🐛 fix: support relative paths in inherited social media card (#432)

config.toml

@@ -252,7 +252,7 @@ favicon_emoji = "🌱"
 # Can be set at page or section levels, following the hierarchy: page > section > config. See: https://welpo.github.io/tabi/blog/mastering-tabi-settings/#settings-hierarchy
 # Learn how to create these images in batch and automatically:
 # https://osc.garden/blog/automating-social-media-cards-zola/
-social_media_card = "social_cards/index.jpg"
+social_media_card = "index.jpg"
 
 menu = [
     { name = "blog", url = "blog", trailing_slash = true },

content/_index.ca.md

@@ -9,7 +9,7 @@ max_posts = 4
 projects_path = "projects/_index.ca.md"
 max_projects = 3
 show_projects_first = false
-social_media_card = "social_cards/ca.jpg"
+social_media_card = "ca.jpg"
 +++
 
 tabi és un tema de [Zola](https://www.getzola.org) ràpid, lleuger i modern. Té com a objectiu ser una pàgina personal i llar d'entrades de blog. Compta amb una puntuació perfecta de Lighthouse, disseny responsive, tema fosc i clar, shortcodes personalitzats i molt més.

content/_index.es.md

@@ -9,7 +9,7 @@ max_posts = 4
 projects_path = "projects/_index.es.md"
 max_projects = 3
 show_projects_first = false
-social_media_card = "social_cards/es.jpg"
+social_media_card = "es.jpg"
 +++
 
 tabi es un tema de [Zola](https://www.getzola.org) rápido, ligero y moderno. Su objetivo es ser una página personal y hogar para publicaciones de blogs. Cuenta con una puntuación perfecta en Lighthouse, diseño responsive, tema oscuro y claro, shortcodes personalizados y mucho más.

content/_index.md

@@ -9,7 +9,7 @@ max_posts = 4
 projects_path = "projects/_index.md"
 max_projects = 3
 show_projects_first = false
-social_media_card = "social_cards/index.jpg"
+social_media_card = "index.jpg"
 +++
 
 tabi is a fast, lightweight, and modern [Zola](https://www.getzola.org) theme. It aims to be a personal page and home to blog posts. It features a perfect Lighthouse score, responsive design, dark and light themes, custom shortcodes, and much more.

content/archive/_index.ca.md

@@ -3,5 +3,5 @@ title = "Arxiu"
 template = "archive.html"
 
 [extra]
-social_media_card = "archive/social_cards/ca_archive.jpg"
+social_media_card = "ca_archive.jpg"
 +++

content/archive/_index.es.md

@@ -3,5 +3,5 @@ title = "Archivo"
 template = "archive.html"
 
 [extra]
-social_media_card = "archive/social_cards/es_archive.jpg"
+social_media_card = "es_archive.jpg"
 +++

content/archive/_index.md

@@ -3,5 +3,5 @@ title = "Archive"
 template = "archive.html"
 
 [extra]
-social_media_card = "archive/social_cards/archive.jpg"
+social_media_card = "archive.jpg"
 +++

content/blog/_index.ca.md

@@ -5,6 +5,6 @@ sort_by = "date"
 insert_anchor_links = "left"
 
 [extra]
-social_media_card = "blog/social_cards/ca_blog.jpg"
+social_media_card = "ca_blog.jpg"
 show_previous_next_article_links = true
 +++

content/blog/_index.es.md

@@ -5,6 +5,6 @@ sort_by = "date"
 insert_anchor_links = "left"
 
 [extra]
-social_media_card = "blog/social_cards/es_blog.jpg"
+social_media_card = "es_blog.jpg"
 show_previous_next_article_links = true
 +++

content/blog/_index.md

@@ -5,6 +5,6 @@ sort_by = "date"
 insert_anchor_links = "left"
 
 [extra]
-social_media_card = "blog/social_cards/blog.jpg"
+social_media_card = "blog.jpg"
 show_previous_next_article_links = true
 +++

content/pages/about/index.ca.md

@@ -5,7 +5,6 @@ path = "/ca/about"
 
 [extra]
 quick_navigation_buttons = true
-social_media_card = "social_cards/about.ca.jpg"
 +++
 
 Benvingut a la demo de [**tabi**](https://github.com/welpo/tabi), un tema per a [Zola](https://www.getzola.org/), un generador de llocs web estàtics rapidíssim.

content/pages/about/index.es.md

@@ -5,7 +5,6 @@ path = "/es/about"
 
 [extra]
 quick_navigation_buttons = true
-social_media_card = "social_cards/about.es.jpg"
 +++
 
 Bienvenido a la demo de [**tabi**](https://github.com/welpo/tabi), un tema para [Zola](https://www.getzola.org/), un rapidísimo generador de sitios estáticos.

content/pages/about/index.md

@@ -5,7 +5,6 @@ path = "about"
 
 [extra]
 quick_navigation_buttons = true
-social_media_card = "social_cards/about.jpg"
 +++
 
 Welcome to the demo of [**tabi**](https://github.com/welpo/tabi), a theme for [Zola](https://www.getzola.org/), a fast static site generator.

content/projects/_index.ca.md

@@ -5,7 +5,7 @@ template = "cards.html"
 insert_anchor_links = "left"
 
 [extra]
-social_media_card = "projects/social_cards/ca_projects.jpg"
+social_media_card = "projects/ca_projects.jpg"
 show_reading_time = false
 quick_navigation_buttons = true
 +++

content/projects/_index.es.md

@@ -5,7 +5,7 @@ template = "cards.html"
 insert_anchor_links = "left"
 
 [extra]
-social_media_card = "projects/social_cards/es_projects.jpg"
+social_media_card = "projects/es_projects.jpg"
 show_reading_time = false
 quick_navigation_buttons = true
 +++

content/projects/_index.md

@@ -5,7 +5,7 @@ template = "cards.html"
 insert_anchor_links = "left"
 
 [extra]
-social_media_card = "projects/social_cards/projects.jpg"
+social_media_card = "projects/projects.jpg"
 show_reading_time = false
 quick_navigation_buttons = true
 +++

templates/partials/header.html

@@ -102,36 +102,7 @@
     <meta property="og:type" content="article" />
 
     {# Image for social media sharing #}
-    {%- set social_media_card = macros_settings::evaluate_setting_priority(setting="social_media_card", page=page | default(value=""), section=section | default(value=""), default_global_value="") -%}
-    {% if social_media_card %}
-        {# Try to construct the image path relative to the current page #}
-        {% set colocated_path = page.colocated_path | default(value="") %}
-        {% set file_path = colocated_path ~ social_media_card %}
-
-        {# Fetch metadata to verify image existence at the relative path #}
-        {%- set meta = get_image_metadata(path=file_path, allow_missing=true) -%}
-
-        {# Check if relative path exists, else try absolute path #}
-        {% if meta %}
-            {% set final_path = file_path %}
-        {% else %}
-            {# If the relative path didn't work, try fetching metadata for the absolute path #}
-            {% set meta = get_image_metadata(path=social_media_card, allow_missing=true) %}
-            {% if meta %}
-                {% set final_path = social_media_card %}
-            {% else %}
-                {# Throw an error if the image doesn't exist at either path #}
-                {{ throw(message="Could not get metadata for the specified social media card image in page " ~ page.path ~ ". Attempted relative path: '" ~ file_path ~ "' and absolute path: '" ~ social_media_card ~ "'. Ensure the file exists at one of these locations.") }}
-            {% endif %}
-        {% endif %}
-
-        {# Generate the social media meta tags #}
-        <meta property="og:image" content="{{ get_url(path=final_path, cachebust=true) }}" />
-        <meta property="og:image:width" content="{{ meta.width }}" />
-        <meta property="og:image:height" content="{{ meta.height }}" />
-        <meta name="twitter:image" content="{{ get_url(path=final_path, cachebust=true) }}" />
-        <meta name="twitter:card" content="summary_large_image" />
-    {% endif %}
+    {%- include "partials/social_media_images.html" -%}
 
     {# Add og:locale and hreflang tags for multilingual sites #}
     {%- if config.languages | length > 0 and current_url %}

templates/partials/social_media_images.html

@@ -0,0 +1,50 @@
+{%- set social_media_card = macros_settings::evaluate_setting_priority(setting="social_media_card", page=page | default(value=""), section=section | default(value=""), default_global_value="") -%}
+{% if social_media_card %}
+    {# Get base path from page/section #}
+    {% set base_path = "" %}
+    {% if section and section.path %}
+        {% set base_path = section.path | trim_end_matches(pat="/_index.md") %}
+        {% if base_path and not social_media_card is starting_with("/") %}
+            {% set base_path = base_path ~ "/" %}
+        {% endif %}
+    {% else %}
+        {% set base_path = page.colocated_path | default(value="") %}
+    {% endif %}
+
+    {% set current_path = base_path ~ social_media_card | trim_start_matches(pat="/") %}
+
+    {# Try parent path by removing the last directory component #}
+    {% set parent_path = base_path | split(pat="/") | slice(end=-2) | join(sep="/") %}
+    {% if parent_path and not social_media_card is starting_with("/") %}
+        {% set parent_path = parent_path ~ "/" %}
+    {% endif %}
+    {% set parent_relative_path = parent_path ~ social_media_card | trim_start_matches(pat="/") %}
+
+    {# Check all possible locations #}
+    {%- set current_meta = get_image_metadata(path=current_path, allow_missing=true) -%}
+    {%- set parent_meta = get_image_metadata(path=parent_relative_path, allow_missing=true) -%}
+    {%- set absolute_meta = get_image_metadata(path=social_media_card, allow_missing=true) -%}
+
+    {% if current_meta %}
+        {% set final_path = current_path %}
+        {% set meta = current_meta %}
+    {% elif parent_meta %}
+        {% set final_path = parent_relative_path %}
+        {% set meta = parent_meta %}
+    {% elif absolute_meta %}
+        {% set final_path = social_media_card %}
+        {% set meta = absolute_meta %}
+    {% else %}
+        {{ throw(message="Could not find social media card image. Tried:
+            1. Current page path: '" ~ current_path ~ "'
+            2. Parent page path: '" ~ parent_relative_path ~ "'
+            3. Absolute path: '" ~ social_media_card ~ "'
+            Please ensure the file exists at one of these locations.") }}
+    {% endif %}
+
+    <meta property="og:image" content="{{ get_url(path=final_path, cachebust=true) }}" />
+    <meta property="og:image:width" content="{{ meta.width }}" />
+    <meta property="og:image:height" content="{{ meta.height }}" />
+    <meta name="twitter:image" content="{{ get_url(path=final_path, cachebust=true) }}" />
+    <meta name="twitter:card" content="summary_large_image" />
+{% endif %}