feat: add optional cover image alt (#20)

Co-authored-by: st1020 <[email protected]>
st1020 · Oct 4, 2024 · fe3b3a6 · fe3b3a6
1 parent 11028d7
commit fe3b3a6
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 9 deletions.
diff --git 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
@@ -6,12 +6,12 @@ <h1 class="!my-0 pb-2.5">{{ page.title }}</h1>
     {% 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
@@ -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
@@ -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 %}<!---->