✨ feat(header): add img_alt attribute for customisable alt text (#153)

README.md

@@ -102,7 +102,7 @@ section_path = "blog/_index.md"
 
 ```
 [extra]
-header = {title = "Hello! I'm tabi~", img = "img/main.webp" }
+header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Your Name" }
 ```
 
 The content outside the front matter will be rendered between the header title and the posts listing. In the screenshot above, it's the text that reads "tabi is a fast, lightweight, and modern Zola theme…".

content/_index.ca.md

@@ -5,7 +5,7 @@ sort_by = "date"
 template = "section.html"
 
 [extra]
-header = {title = "Hola! Soc tabi~", img = "img/main.webp" }
+header = {title = "Hola! Soc tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, l'autor de tabi" }
 section_path = "blog/_index.ca.md"
 max_posts = 4
 social_media_card = "img/social_cards/ca.jpg"

content/_index.es.md

@@ -5,7 +5,7 @@ sort_by = "date"
 template = "section.html"
 
 [extra]
-header = {title = "¡Hola! Soy tabi~", img = "img/main.webp" }
+header = {title = "¡Hola! Soy tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, el autor de tabi" }
 section_path = "blog/_index.es.md"
 max_posts = 4
 social_media_card = "img/social_cards/es.jpg"

content/_index.md

@@ -5,7 +5,7 @@ sort_by = "date"
 template = "section.html"
 
 [extra]
-header = {title = "Hello! I'm tabi~", img = "img/main.webp" }
+header = {title = "Hello! I'm tabi~", img = "img/main.webp", img_alt = "Óscar Fernández, the theme's author" }
 section_path = "blog/_index.md"
 max_posts = 4
 social_media_card = "img/social_cards/index.jpg"

templates/partials/home_banner.html

@@ -16,7 +16,7 @@
             {%- set image_path = get_url(path=header.img, trailing_slash=false) | safe -%}
         {%- endif -%}
         <div id="image-container-home">
-            <img alt="the owner" id="banner-home-img" src="{{ image_path }}" />
+            <img alt="{{ header.img_alt | default(value="the owner") }}" id="banner-home-img" src="{{ image_path }}" />
         </div>
     {%- endif -%}
 </div>