✨ feat: add 'raw_path' parameter to image shortcodes

config.toml

@@ -332,7 +332,7 @@ allowed_domains = [
 
 # Enable the CSP directives configured (or default).
 # 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
-enable_csp = true
+enable_csp = false
 
 # Custom subset of characters for the header.
 # If set to true, the `static/custom_subset.css` file will be loaded first.

content/blog/shortcodes/index.ca.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalitzats"
 date = 2023-02-19
-updated = 2024-11-07
+updated = 2024-11-27
 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]
@@ -107,8 +107,9 @@ El teu codi Mermaid va aquí.
 
 Tots els shortcodes d'imatge admeten rutes absolutes, rutes relatives, i fonts remotes en el paràmetre `src`.
 
-Tots els shortcodes d'imatge tenen tres paràmetres opcionals:
+Tots els shortcodes d'imatge tenen els següents paràmetres opcionals:
 
+- `raw_path`. Per defecte és `false`. Si es configura a `true`, el paràmetre `src` s'utilitzarà tal qual. Útil per a actius ubicats a la mateixa carpeta que tenen un slug personalitzat (vegeu [Zola issue #2598](https://github.com/getzola/zola/issues/2598)).
 - `inline`. Valor predeterminat: `false`. Si s'estableix a `true`, la imatge es mostrarà en línia amb el text.
 - `full_width`. Valor predeterminat: `false` (vegeu [a sota](#imatge-d-amplada-completa)).
 - `lazy_loading`. Valor predeterminat: `true`.

content/blog/shortcodes/index.es.md

@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2024-11-07
+updated = 2024-11-27
 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]
@@ -105,8 +105,9 @@ Tu diagrama Mermaid va aquí. Puedes omitir los parámetros para usar los valore
 
 Todos los shortcodes de imagen admiten rutas absolutas, rutas relativas, y fuentes remotas en el parámetro `src`.
 
-Todos los shortcodes de imagen tienen tres parámetros opcionales:
+Todos los shortcodes de imagen tienen los siguientes parámetros opcionales:
 
+- `raw_path`. Por defecto es `false`. Si se establece en `true`, el parámetro `src` se usará tal cual. Útil para activos ubicados en la misma carpeta que tienen un slug personalizado (ver [Zola issue #2598](https://github.com/getzola/zola/issues/2598)).
 - `inline`. Valor predeterminado: `false`. Si se establece `true`, la imagen se mostrará en línea con el texto.
 - `full_width`. Valor predeterminado: `false` (ver [más abajo](#imagen-a-ancho-completo)).
 - `lazy_loading`. Valor predeterminado: `true`.

content/blog/shortcodes/index.md

@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2024-11-07
+updated = 2024-11-27
 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]
@@ -107,8 +107,9 @@ Your diagram goes here.
 
 All image shortcodes support absolute paths, relative paths, and remote sources in the `src` parameter.
 
-All image shortcodes have three optional parameters:
+All image shortcodes have these optional parameters:
 
+- `raw_path`. Defaults to `false`. If set to `true`, the `src` parameter will be used as is. Useful for colocated assets with a custom slug (see [Zola issue #2598](https://github.com/getzola/zola/issues/2598)).
 - `inline`. Defaults to `false`. If set to `true`, the image will be displayed inline with the text.
 - `full_width`. Defaults to `false` (see [below](#full-width-image))
 - `lazy_loading`. Defaults to `true`.
@@ -178,7 +179,7 @@ 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="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }}
+{{ full_width_image(src="http://welpo.github.io/tabi/img/main.webp", alt="Photograph of a canal in Amsterdam", raw_path=true) }}
 
 #### Usage
 

templates/shortcodes/dimmable_image.html

@@ -1,5 +1,5 @@
 {#- Determine image path based on whether the src is remote or local -#}
-{%- if src is starting_with("http") -%}
+{%- if src is starting_with("http") or raw_path -%}
     {%- set image_url = src -%}
 {%- else -%}
     {%- set colocated_path = page.colocated_path | default(value="") -%}

templates/shortcodes/dual_theme_image.html

@@ -10,7 +10,7 @@
 {%- endif -%}
 
 {# Handling for light mode image #}
-{%- if light_src is starting_with("http") -%}
+{%- if light_src is starting_with("http") or raw_path -%}
     {%- set light_image_url = light_src -%}
 {%- else -%}
     {%- set relative_light_path = colocated_path ~ light_src -%}
@@ -23,7 +23,7 @@
 {%- endif -%}
 
 {# Handling for dark mode image #}
-{%- if dark_src is starting_with("http") -%}
+{%- if dark_src is starting_with("http") or raw_path -%}
     {%- set dark_image_url = dark_src -%}
 {%- else -%}
     {%- set relative_dark_path = colocated_path ~ dark_src -%}

templates/shortcodes/full_width_image.html

@@ -1,5 +1,5 @@
 {#- Set paths based on whether the src is remote or local -#}
-{%- if src is starting_with("http") -%}
+{%- if src is starting_with("http") or raw_path -%}
     {%- set image_url = src -%}
 {%- else -%}
     {%- set colocated_path = page.colocated_path | default(value="") -%}

templates/shortcodes/image_hover.html

@@ -15,7 +15,7 @@
 {%- endif -%}
 
 {#- Direct or relative URL handling for default image -#}
-{%- if default_src is starting_with("http") -%}
+{%- if default_src is starting_with("http") or raw_path -%}
     {%- set default_image_url = default_src -%}
 {%- else -%}
     {%- set relative_default_path = colocated_path ~ default_src -%}
@@ -28,7 +28,7 @@
 {%- endif -%}
 
 {#- Direct or relative URL handling for hovered image -#}
-{%- if hovered_src is starting_with("http") -%}
+{%- if hovered_src is starting_with("http") or raw_path -%}
     {%- set hovered_image_url = hovered_src -%}
 {%- else -%}
     {%- set relative_hovered_path = colocated_path ~ hovered_src -%}

templates/shortcodes/image_toggler.html

@@ -19,7 +19,7 @@
 {%- endif -%}
 
 {# Direct or relative URL handling for default image #}
-{%- if default_src is starting_with("http") -%}
+{%- if default_src is starting_with("http") or raw_path -%}
     {%- set default_image_url = default_src -%}
 {%- else -%}
     {%- set relative_default_path = colocated_path ~ default_src -%}
@@ -32,7 +32,7 @@
 {%- endif -%}
 
 {# Direct or relative URL handling for toggled image #}
-{%- if toggled_src is starting_with("http") -%}
+{%- if toggled_src is starting_with("http") or raw_path -%}
     {%- set toggled_image_url = toggled_src -%}
 {%- else -%}
     {%- set relative_toggled_path = colocated_path ~ toggled_src -%}

templates/shortcodes/invertible_image.html

@@ -1,5 +1,5 @@
 {#- Determine if src is a remote URL or a local path -#}
-{%- if src is starting_with("http") -%}
+{%- if src is starting_with("http") or raw_path -%}
     {%- set image_url = src -%}
 {%- else -%}
     {%- set colocated_path = page.colocated_path | default(value="") -%}