✨ feat: allow relative paths for image shortcodes

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

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,64 +18,66 @@ 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") */}}
 ```
 
 
 ### Imagen atenuable
 
 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

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

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) -%}
     <div class="full-width">
-{% endif %}
-<img class="dimmable-image" src="{{ get_url(path=src) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if meta.width %} width="{{ meta.width }}"{% endif %}{% if meta.height %} height="{{ meta.height }}" {% endif %}/>
-{% if full_width | default(value=false) %}
+{%- endif -%}
+<img class="dimmable-image" src="{{ get_url(path=image_path) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if meta.width %} width="{{ meta.width }}"{% endif %}{% if meta.height %} height="{{ meta.height }}" {% endif %}/>
+{%- if full_width | default(value=false) -%}
     </div>
-{% endif %}
+{%- endif -%}

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) -%}
     <div class="full-width">
 {%- endif -%}
-<img src="{{ get_url(path=light_src) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if light_meta.width %} width="{{ light_meta.width }}"{% endif %}{% if light_meta.height %} height="{{ light_meta.height }}"{% endif %} class="img-light">
-<img src="{{ get_url(path=dark_src) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if dark_meta.width %} width="{{ dark_meta.width }}"{% endif %}{% if dark_meta.height %} height="{{ dark_meta.height }}"{% endif %} class="img-dark">
-{% if full_width | default(value=false) %}
+<img src="{{ get_url(path=light_image_path) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if light_meta.width %} width="{{ light_meta.width }}"{% endif %}{% if light_meta.height %} height="{{ light_meta.height }}" {% endif %} class="img-light">
+<img src="{{ get_url(path=dark_image_path) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if alt %} alt="{{ alt }}"{% endif %}{% if dark_meta.width %} width="{{ dark_meta.width }}"{% endif %}{% if dark_meta.height %} height="{{ dark_meta.height }}" {% endif %} class="img-dark">
+{%- if full_width | default(value=false) -%}
     </div>
-{% endif %}
+{%- endif -%}