From 7796162e378cacb9b4d6129f95138121224714f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C3=93scar=20Fern=C3=A1ndez?= Date: Fri, 24 Nov 2023 02:10:43 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20allow=20relative=20paths=20?= =?UTF-8?q?for=20image=20shortcodes=20(#222)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/blog/shortcodes/index.ca.md | 28 ++++++++++---------- content/blog/shortcodes/index.es.md | 28 ++++++++++---------- content/blog/shortcodes/index.md | 28 ++++++++++---------- templates/shortcodes/dimmable_image.html | 23 ++++++++++++----- templates/shortcodes/dual_theme_image.html | 30 +++++++++++++++++----- templates/shortcodes/full_width_image.html | 15 +++++++++-- templates/shortcodes/image_hover.html | 26 ++++++++++++++++--- templates/shortcodes/image_toggler.html | 26 ++++++++++++++++--- templates/shortcodes/invertible_image.html | 19 +++++++++++--- 9 files changed, 158 insertions(+), 65 deletions(-) diff --git a/content/blog/shortcodes/index.ca.md b/content/blog/shortcodes/index.ca.md index 4dbb4d6..4fbbc47 100644 --- a/content/blog/shortcodes/index.ca.md +++ b/content/blog/shortcodes/index.ca.md @@ -1,7 +1,7 @@ +++ title = "Shortcodes personalitzats" date = 2023-02-19 -updated = 2023-08-26 +updated = 2023-11-24 description = "Aquest tema inclou alguns shortcodes personalitzats útils que pots utilitzar per millorar les teves publicacions. Ja sigui per mostrar imatges que s'adapten als temes clar i fosc, o per donar format a una secció de referències amb un aspecte professional, aquests shortcodes personalitzats t'ajudaran." [taxonomies] @@ -18,63 +18,65 @@ social_media_card = "social_cards/ca_blog_shortcodes.jpg" **Nota**: tots els shortcodes d'imatge tenen dos paràmetres opcionals: `full_width`, que té com a valor predeterminat `false` (vegeu [a sota](#imatge-d-amplada-completa)), i `lazy_loading`, que té com a valor predeterminat `true`. +**Nota 2**: a partir del commit XXX, tots els shortcodes d'imatges suporten rutes relatives pel paràmetre `src`. + ### Imatges per a temes duals Útil si vols utilitzar una imatge diferent pels temes clar i fosc: -{{ dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/img/paris_night.webp" alt="La Torre Eiffel") }} +{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") }} #### Ús ``` -{{/* dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/img/paris_night.webp" alt="La Torre Eiffel") */}} +{{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") */}} ``` ### Imatge invertible Útil per a gràfics, dibuixos de línies, diagrames… Inverteix els colors de la imatge. La imatge original s'utilitzarà per al tema clar. -{{ invertible_image(src="blog/shortcodes/img/graph.webp", alt="Gràfic invertible") }} +{{ invertible_image(src="img/graph.webp", alt="Gràfic invertible") }} #### Ús ``` -{{/* invertible_image(src="blog/shortcodes/img/graph.webp", alt="Gràfic invertible") */}} +{{/* invertible_image(src="img/graph.webp", alt="Gràfic invertible") */}} ``` ### Imatge regulable Les imatges amb massa brillantor o contrast poden ser molestes en un fons fosc. Aquí tens un exemple d'una fotografia que s'atenua quan s'activa el tema fosc. -{{ dimmable_image(src="blog/shortcodes/img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") }} +{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") }} #### Ús ``` -{{/* dimmable_image(src="blog/shortcodes/img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") */}} +{{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") */}} ``` ### Canvi d'imatge en passar el cursor La imatge mostrada canvia quan l'usuari passa el cursor per sobre. Útil per a comparacions d'abans i després, per exemple. -{{ image_hover(default_src="blog/shortcodes/img/edited.webp", hovered_src="blog/shortcodes/img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }} +{{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }} #### Ús ``` -{{/* image_hover(default_src="blog/shortcodes/img/before.webp", hovered_src="blog/shortcodes/img/after.webp", default_alt="Foto editada", hovered_alt="Foto original") */}} +{{/* image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Foto editada", hovered_alt="Foto original") */}} ``` ### Canvi d'imatge via clic Mostra una imatge i canvia a una diferent en fer clic. Ideal per destacar diferències o cridar l'atenció sobre detalls. -{{ image_toggler(default_src="blog/shortcodes/img/mojave_day.webp", toggled_src="blog/shortcodes/img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") }} +{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") }} #### Ús ``` -{{/* image_toggler(default_src="blog/shortcodes/img/mojave_day.webp", toggled_src="blog/shortcodes/img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") */}} +{{/* image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") */}} ``` ### Imatge d'amplada completa @@ -83,12 +85,12 @@ La imatge s'expandirà per coincidir amb l'amplada de la capçalera, que normalm Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant `true` al paràmetre opcional `full_width`. -{{ full_width_image(src="blog/shortcodes/img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }} +{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }} #### Ús ``` -{{/* full_width_image(src="blog/shortcodes/img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}} +{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}} ``` ## Shortcodes de text diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md index db4c6de..2069a4c 100644 --- a/content/blog/shortcodes/index.es.md +++ b/content/blog/shortcodes/index.es.md @@ -1,7 +1,7 @@ +++ title = "Shortcodes personalizados" date = 2023-02-19 -updated = 2023-08-26 +updated = 2023-11-24 description = "Este tema incluye algunos shortcodes personalizados útiles que puedes utilizar para mejorar tus publicaciones. Puedes mostrar imágenes que se adapten a los temas claro y oscuro, dar formato a una sección de referencias con un aspecto profesional, y más." [taxonomies] @@ -18,27 +18,29 @@ social_media_card = "social_cards/es_blog_shortcodes.jpg" **Nota**: todos los shortcodes de imagen tienen dos parámetros opcionales: `full_width`, que tiene como valor predeterminado `false` (ver [más abajo](#imagen-a-ancho-completo)), y `lazy_loading`, que tiene como valor predeterminado `true`. +**Nota 2**: a partir del commit XXX, todos los shortcodes de imágenes admiten rutas relativas en el parámetro `src`. + ### Imágenes de doble tema Útil si deseas usar una imagen diferente para los temas claro y oscuro: -{{ dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/img/paris_night.webp" alt="La Torre Eiffel") }} +{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") }} #### Uso ``` -{{/* dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/img/paris_night.webp" alt="La Torre Eiffel") */}} +{{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="La Torre Eiffel") */}} ``` ### Imagen invertible Ideal para gráficos, dibujos lineales, diagramas... Invierte los colores de la imagen. La imagen de origen se utilizará para el tema claro. -{{ invertible_image(src="blog/shortcodes/img/graph.webp", alt="Gráfico invertible") }} +{{ invertible_image(src="img/graph.webp", alt="Gráfico invertible") }} #### Uso ``` -{{/* invertible_image(src="blog/shortcodes/img/graph.webp", alt="Gráfico invertible") */}} +{{/* invertible_image(src="img/graph.webp", alt="Gráfico invertible") */}} ``` @@ -46,36 +48,36 @@ Ideal para gráficos, dibujos lineales, diagramas... Invierte los colores de la Las imágenes con demasiado brillo o contraste pueden ser demasiado discordantes en un fondo oscuro. Aquí tienes un ejemplo de una fotografía que se atenúa cuando el tema oscuro está activo. -{{ dimmable_image(src="blog/shortcodes/img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") }} +{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") }} #### Uso ``` -{{/* dimmable_image(src="blog/shortcodes/img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") */}} +{{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Fotografía de un desierto, cielo celestial") */}} ``` ### Cambio de imagen al pasar el cursor La imagen mostrada cambia cuando el usuario pasa el cursor por encima. Útil para comparaciones de antes y después, por ejemplo. -{{ image_hover(default_src="blog/shortcodes/img/edited.webp", hovered_src="blog/shortcodes/img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }} +{{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }} #### Uso ``` -{{/* image_hover(default_src="blog/shortcodes/img/before.webp", hovered_src="blog/shortcodes/img/after.webp", default_alt="Imagen editada", hovered_alt="Toma original") */}} +{{/* image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Imagen editada", hovered_alt="Toma original") */}} ``` ### Cambio de imagen vía click Muestra una imagen y cambia a una diferente al hacer clic. Ideal para destacar diferencias o llamar la atención sobre detalles. -{{ image_toggler(default_src="blog/shortcodes/img/mojave_day.webp", toggled_src="blog/shortcodes/img/mojave_night.webp", default_alt="Mojave durante el día", toggled_alt="Mojave durante la noche") }} +{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave durante el día", toggled_alt="Mojave durante la noche") }} #### Uso ``` -{{/* image_toggler(default_src="blog/shortcodes/img/mojave_day.webp", toggled_src="blog/shortcodes/img/mojave_night.webp", default_alt="Mojave durante el día", toggled_alt="Mojave durante la noche") */}} +{{/* image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave durante el día", toggled_alt="Mojave durante la noche") */}} ``` ### Imagen a ancho completo @@ -84,12 +86,12 @@ La imagen se expandirá para coincidir con el ancho del encabezado, que generalm Todos los otros shortcodes de imágenes pueden usar el ancho completo asignando el valor `true` al parámetro opcional `full_width`. -{{ full_width_image(src="blog/shortcodes/img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") }} +{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") }} #### Uso ``` -{{/* full_width_image(src="blog/shortcodes/img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") */}} +{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") */}} ``` ## Shortcodes de texto diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md index bd96411..660f876 100644 --- a/content/blog/shortcodes/index.md +++ b/content/blog/shortcodes/index.md @@ -1,7 +1,7 @@ +++ title = "Custom shortcodes" date = 2023-02-19 -updated = 2023-08-26 +updated = 2023-11-24 description = "This theme includes some useful custom shortcodes that you can use to enhance your posts. Whether you want to display images that adapt to light and dark themes, or format a professional-looking reference section, these custom shortcodes have got you covered." [taxonomies] @@ -18,63 +18,65 @@ social_media_card = "social_cards/blog_shortcodes.jpg" **Note**: all image shortcodes have two optional parameters: `full_width`, which defaults to `false` (see [below](#full-width-image)), and `lazy_loading`, which defaults to `true`. +**Note 2**: as of commit XXX, all image shortcodes support relative paths in the `src` parameter. + ### Dual theme images Useful if you want to use a different image for the light and dark themes: -{{ dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/img/paris_night.webp" alt="The Eiffel tower") }} +{{ dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") }} #### Usage ``` -{{/* dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/img/paris_night.webp" alt="The Eiffel tower") */}} +{{/* dual_theme_image(light_src="img/paris_day.webp", dark_src="img/paris_night.webp" alt="The Eiffel tower") */}} ``` ### Invertible image Good for graphs, line drawings, diagrams… Inverts the colours of the image. The source image will be used for the light theme. -{{ invertible_image(src="blog/shortcodes/img/graph.webp", alt="Invertible graph") }} +{{ invertible_image(src="img/graph.webp", alt="Invertible graph") }} #### Usage ``` -{{/* invertible_image(src="blog/shortcodes/img/graph.webp", alt="Invertible graph") */}} +{{/* invertible_image(src="img/graph.webp", alt="Invertible graph") */}} ``` ### Dimmable image Images with too much brightness or contrast can be jarring against a dark background. Here's an example of a photograph that dims when the dark theme is active. -{{ dimmable_image(src="blog/shortcodes/img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") }} +{{ dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") }} #### Usage ``` -{{/* dimmable_image(src="blog/shortcodes/img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") */}} +{{/* dimmable_image(src="img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") */}} ``` ### Swap image on hover Povides an interaction where the image displayed changes as the user hovers over it. Useful for before-after comparisons, for example. -{{ image_hover(default_src="blog/shortcodes/img/edited.webp", hovered_src="blog/shortcodes/img/raw.webp", default_alt="Edited picture", hovered_alt="Original shot") }} +{{ image_hover(default_src="img/edited.webp", hovered_src="img/raw.webp", default_alt="Edited picture", hovered_alt="Original shot") }} #### Usage ``` -{{/* image_hover(default_src="blog/shortcodes/img/before.webp", hovered_src="blog/shortcodes/img/after.webp", default_alt="Edited picture", hovered_alt="Original shot") */}} +{{/* image_hover(default_src="img/before.webp", hovered_src="img/after.webp", default_alt="Edited picture", hovered_alt="Original shot") */}} ``` ### Interactive image toggle Display an image and switch to a different one on click. Ideal for highlighting differences or drawing attention to details. -{{ image_toggler(default_src="blog/shortcodes/img/mojave_day.webp", toggled_src="blog/shortcodes/img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") }} +{{ image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") }} #### Usage ``` -{{/* image_toggler(default_src="blog/shortcodes/img/mojave_day.webp", toggled_src="blog/shortcodes/img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") */}} +{{/* image_toggler(default_src="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") */}} ``` ### Full-width image @@ -83,12 +85,12 @@ The image will expand to match the width of the header, which is usually wider t All other image shortcodes can be made into full-width by setting the optional parameter `full_width` to `true`. -{{ full_width_image(src="blog/shortcodes/img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }} +{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }} #### Usage ``` -{{/* full_width_image(src="blog/shortcodes/img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}} +{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}} ``` ## Text shortcodes diff --git a/templates/shortcodes/dimmable_image.html b/templates/shortcodes/dimmable_image.html index 2106f7e..be8ef5c 100644 --- a/templates/shortcodes/dimmable_image.html +++ b/templates/shortcodes/dimmable_image.html @@ -1,10 +1,21 @@ -{%- set meta = get_image_metadata(path=src, allow_missing=true) -%} +{%- set colocated_path = page.colocated_path | default(value="") -%} +{%- set relative_path = colocated_path ~ src -%} +{%- set meta = get_image_metadata(path=relative_path, allow_missing=true) -%} + +{#- Fallback to absolute path if relative path doesn't work -#} +{%- if not meta -%} + {%- set meta = get_image_metadata(path=src, allow_missing=true) -%} + {%- set image_path = src -%} +{%- else -%} + {%- set image_path = relative_path -%} +{%- endif -%} + {%- set lazy_loading = lazy_loading | default(value=true) -%} -{% if full_width | default(value=false) %} +{%- if full_width | default(value=false) -%}
-{% endif %} - -{% if full_width | default(value=false) %} +{%- endif -%} + +{%- if full_width | default(value=false) -%}
-{% endif %} +{%- endif -%} diff --git a/templates/shortcodes/dual_theme_image.html b/templates/shortcodes/dual_theme_image.html index adea2c4..fba3529 100644 --- a/templates/shortcodes/dual_theme_image.html +++ b/templates/shortcodes/dual_theme_image.html @@ -1,12 +1,30 @@ -{%- set light_meta = get_image_metadata(path=light_src, allow_missing=true) -%} -{%- set dark_meta = get_image_metadata(path=dark_src, allow_missing=true) -%} +{%- set colocated_path = page.colocated_path | default(value="") -%} +{%- set relative_light_path = colocated_path ~ light_src -%} +{%- set relative_dark_path = colocated_path ~ dark_src -%} + +{%- set light_meta = get_image_metadata(path=relative_light_path, allow_missing=true) -%} +{%- if not light_meta -%} + {%- set light_meta = get_image_metadata(path=light_src, allow_missing=true) -%} + {%- set light_image_path = light_src -%} +{%- else -%} + {%- set light_image_path = relative_light_path -%} +{%- endif -%} + +{%- set dark_meta = get_image_metadata(path=relative_dark_path, allow_missing=true) -%} +{%- if not dark_meta -%} + {%- set dark_meta = get_image_metadata(path=dark_src, allow_missing=true) -%} + {%- set dark_image_path = dark_src -%} +{%- else -%} + {%- set dark_image_path = relative_dark_path -%} +{%- endif -%} + {%- set lazy_loading = lazy_loading | default(value=true) -%} {%- if full_width | default(value=false) -%}
{%- endif -%} - - -{% if full_width | default(value=false) %} + + +{%- if full_width | default(value=false) -%}
-{% endif %} +{%- endif -%} diff --git a/templates/shortcodes/full_width_image.html b/templates/shortcodes/full_width_image.html index 68c555b..36ddb2c 100644 --- a/templates/shortcodes/full_width_image.html +++ b/templates/shortcodes/full_width_image.html @@ -1,6 +1,17 @@ -{%- set meta = get_image_metadata(path=src, allow_missing=true) -%} +{%- set colocated_path = page.colocated_path | default(value="") -%} +{%- set relative_path = colocated_path ~ src -%} +{%- set meta = get_image_metadata(path=relative_path, allow_missing=true) -%} + +{#- Fallback to absolute path if relative path doesn't work -#} +{%- if not meta -%} + {%- set meta = get_image_metadata(path=src, allow_missing=true) -%} + {%- set image_path = src -%} +{%- else %} + {%- set image_path = relative_path -%} +{%- endif -%} + {%- set lazy_loading = lazy_loading | default(value=true) -%}
- +
diff --git a/templates/shortcodes/image_hover.html b/templates/shortcodes/image_hover.html index 7632f56..615c2f0 100644 --- a/templates/shortcodes/image_hover.html +++ b/templates/shortcodes/image_hover.html @@ -1,12 +1,30 @@ -{%- set default_meta = get_image_metadata(path=default_src, allow_missing=true) -%} -{%- set hovered_meta = get_image_metadata(path=hovered_src, allow_missing=true) -%} +{%- set colocated_path = page.colocated_path | default(value="") -%} +{%- set relative_default_path = colocated_path ~ default_src -%} +{%- set relative_hovered_path = colocated_path ~ hovered_src -%} + +{%- set default_meta = get_image_metadata(path=relative_default_path, allow_missing=true) -%} +{%- if not default_meta -%} + {%- set default_meta = get_image_metadata(path=default_src, allow_missing=true) -%} + {%- set default_image_path = default_src -%} +{%- else -%} + {%- set default_image_path = relative_default_path -%} +{%- endif -%} + +{%- set hovered_meta = get_image_metadata(path=relative_hovered_path, allow_missing=true) -%} +{%- if not hovered_meta -%} + {%- set hovered_meta = get_image_metadata(path=hovered_src, allow_missing=true) -%} + {%- set hovered_image_path = hovered_src -%} +{%- else -%} + {%- set hovered_image_path = relative_hovered_path -%} +{%- endif -%} + {%- set lazy_loading = lazy_loading | default(value=true) -%}
- {{ default_alt }} + {{ default_alt }}
- {{ hovered_alt }} + {{ hovered_alt }}
diff --git a/templates/shortcodes/image_toggler.html b/templates/shortcodes/image_toggler.html index 6dee797..bb2cd20 100644 --- a/templates/shortcodes/image_toggler.html +++ b/templates/shortcodes/image_toggler.html @@ -2,18 +2,36 @@ {# allowing individual interactive elements (like toggles) to function correctly. #} {# This avoids conflicts when multiple instances of the shortcode are used. #} {%- set random_id = get_random(end=100000) -%} -{%- set default_meta = get_image_metadata(path=default_src, allow_missing=true) -%} -{%- set toggled_meta = get_image_metadata(path=toggled_src, allow_missing=true) -%} +{%- set colocated_path = page.colocated_path | default(value="") -%} +{%- set relative_default_path = colocated_path ~ default_src -%} +{%- set relative_toggled_path = colocated_path ~ toggled_src -%} + +{%- set default_meta = get_image_metadata(path=relative_default_path, allow_missing=true) -%} +{%- if not default_meta -%} + {%- set default_meta = get_image_metadata(path=default_src, allow_missing=true) -%} + {%- set default_image_path = default_src -%} +{%- else -%} + {%- set default_image_path = relative_default_path -%} +{%- endif -%} + +{%- set toggled_meta = get_image_metadata(path=relative_toggled_path, allow_missing=true) -%} +{%- if not toggled_meta -%} + {%- set toggled_meta = get_image_metadata(path=toggled_src, allow_missing=true) -%} + {%- set toggled_image_path = toggled_src -%} +{%- else -%} + {%- set toggled_image_path = relative_toggled_path -%} +{%- endif -%} + {%- set lazy_loading = lazy_loading | default(value=true) -%}
diff --git a/templates/shortcodes/invertible_image.html b/templates/shortcodes/invertible_image.html index d801d4d..de67fa0 100644 --- a/templates/shortcodes/invertible_image.html +++ b/templates/shortcodes/invertible_image.html @@ -1,10 +1,21 @@ -{%- set meta = get_image_metadata(path=src, allow_missing=true) -%} +{%- set colocated_path = page.colocated_path | default(value="") -%} +{%- set relative_path = colocated_path ~ src -%} +{%- set meta = get_image_metadata(path=relative_path, allow_missing=true) -%} + +{#- Fallback to absolute path if relative path doesn't work -#} +{%- if not meta -%} + {%- set meta = get_image_metadata(path=src, allow_missing=true) -%} + {%- set image_path = src -%} +{%- else -%} + {%- set image_path = relative_path -%} +{%- endif -%} + {%- set lazy_loading = lazy_loading | default(value=true) -%} -{% if full_width | default(value=false) %} +{%- if full_width | default(value=false) -%}
-{% endif %} - +{%- endif -%} + {%- if full_width | default(value=false) -%}
{%- endif -%}