From 6aa78ce1d2005ee2a4172e47c85e1dc5fd2750e2 Mon Sep 17 00:00:00 2001 From: welpo Date: Wed, 27 Nov 2024 19:42:24 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=20'raw=5Fpath'=20parame?= =?UTF-8?q?ter=20to=20image=20shortcodes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- config.toml | 2 +- content/blog/shortcodes/index.ca.md | 5 +++-- content/blog/shortcodes/index.es.md | 5 +++-- content/blog/shortcodes/index.md | 7 ++++--- templates/shortcodes/dimmable_image.html | 2 +- templates/shortcodes/dual_theme_image.html | 4 ++-- templates/shortcodes/full_width_image.html | 2 +- templates/shortcodes/image_hover.html | 4 ++-- templates/shortcodes/image_toggler.html | 4 ++-- templates/shortcodes/invertible_image.html | 2 +- 10 files changed, 20 insertions(+), 17 deletions(-) diff --git a/config.toml b/config.toml index d6f3ce88d..757be5811 100644 --- a/config.toml +++ b/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. diff --git a/content/blog/shortcodes/index.ca.md b/content/blog/shortcodes/index.ca.md index d71649276..8160a5fb1 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 = 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`. diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md index 0d24aedc5..14de35a70 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 = 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`. diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md index f3883697e..e1b759ba5 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 = 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 diff --git a/templates/shortcodes/dimmable_image.html b/templates/shortcodes/dimmable_image.html index 327ff51d9..0bd91c175 100644 --- a/templates/shortcodes/dimmable_image.html +++ b/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="") -%} diff --git a/templates/shortcodes/dual_theme_image.html b/templates/shortcodes/dual_theme_image.html index b73ae0390..3aa1590e5 100644 --- a/templates/shortcodes/dual_theme_image.html +++ b/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 -%} diff --git a/templates/shortcodes/full_width_image.html b/templates/shortcodes/full_width_image.html index 41809a727..3aa2ddebd 100644 --- a/templates/shortcodes/full_width_image.html +++ b/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="") -%} diff --git a/templates/shortcodes/image_hover.html b/templates/shortcodes/image_hover.html index d00967af7..8a86704ee 100644 --- a/templates/shortcodes/image_hover.html +++ b/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 -%} diff --git a/templates/shortcodes/image_toggler.html b/templates/shortcodes/image_toggler.html index 2fd811bde..e46752594 100644 --- a/templates/shortcodes/image_toggler.html +++ b/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 -%} diff --git a/templates/shortcodes/invertible_image.html b/templates/shortcodes/invertible_image.html index b03626972..274597134 100644 --- a/templates/shortcodes/invertible_image.html +++ b/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="") -%}