From fe3b3a6e14af271d06c60908a1db50e64b778a62 Mon Sep 17 00:00:00 2001
From: Damien LaRocque <phicoltan@gmail.com>
Date: Thu, 3 Oct 2024 22:26:19 -0400
Subject: [PATCH] feat: add optional cover image alt (#20)

Co-authored-by: st1020 <me@st1020.com>
---
 content/markdown-syntax.md        | 3 ++-
 templates/page.html               | 6 +++---
 templates/partials/head.html      | 4 ++--
 templates/partials/page_list.html | 6 +++---
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/content/markdown-syntax.md b/content/markdown-syntax.md
index b172dc7..ce0ee83 100644
--- a/content/markdown-syntax.md
+++ b/content/markdown-syntax.md
@@ -5,7 +5,8 @@ description = "Sample article showcasing basic Markdown syntax and formatting fo
 [taxonomies]
 tags = ["markdown", "css", "html"]
 [extra]
-cover_image = "images/markdown-syntax.png"
+cover.image = "images/markdown-syntax.png"
+cover.alt = "A Markdown logo"
 +++
 
 This article offers a sample of basic Markdown syntax that can be used in Zola content files, also it shows whether basic HTML elements are decorated with CSS in a Kita theme.
diff --git a/templates/page.html b/templates/page.html
index 31ff5d7..78965b9 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -6,12 +6,12 @@
     {% include "partials/page_info.html" %}
   </header>
 
-  {% if page.extra.cover_image %}<!---->
+  {% if page.extra.cover.image %}<!---->
   <figure class="mb-12 mt-0">
     <img
       class="h-auto w-full rounded-lg"
-      src="{{ get_url(path=page.extra.cover_image) }}"
-      alt="cover"
+      src="{{ get_url(path=page.extra.cover.image) }}"
+      alt="{{ page.extra.cover.alt | default(value='cover') }}"
     />
   </figure>
   {% endif %}
diff --git a/templates/partials/head.html b/templates/partials/head.html
index a49db6c..d6ba22d 100644
--- a/templates/partials/head.html
+++ b/templates/partials/head.html
@@ -36,9 +36,9 @@
   <meta property="og:site_name" content="{{ config.title }}" />
   <meta property="og:description" content="{{ description }}" />
   <meta property="og:url" content="{{ page.permalink }}" />
-  {% if page.extra.cover_image %}
+  {% if page.extra.cover.image %}
   <!---->
-  {% set image = page.extra.cover_image %}
+  {% set image = page.extra.cover.image %}
   <!---->
   {% elif config.extra.social_image %}
   <!---->
diff --git a/templates/partials/page_list.html b/templates/partials/page_list.html
index 598ab08..2cd6b0a 100644
--- a/templates/partials/page_list.html
+++ b/templates/partials/page_list.html
@@ -12,12 +12,12 @@
 <section
   class="block-bg relative mb-4 rounded-lg p-4 first-of-type:mt-0 last-of-type:mb-0 active:scale-95 lg:mb-6 lg:p-6"
 >
-  {% if page.extra.cover_image %}
+  {% if page.extra.cover.image %}
   <figure class="mb-4 mt-0">
     <img
       class="h-auto w-full rounded-lg"
-      src="{{ get_url(path=page.extra.cover_image) }}"
-      alt="cover"
+      src="{{ get_url(path=page.extra.cover.image) }}"
+      alt="{{ page.extra.cover.alt | default(value='cover') }}"
     />
   </figure>
   {% endif %}<!---->