From a71419ba7190b153992e50016dcf3cd48b0dfcdc Mon Sep 17 00:00:00 2001 From: welpo Date: Fri, 16 Feb 2024 00:48:18 +0100 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(shortcodes):=20support=20URLs?= =?UTF-8?q?=20for=20image=20source?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- content/blog/shortcodes/index.ca.md | 4 +- content/blog/shortcodes/index.es.md | 4 +- content/blog/shortcodes/index.md | 4 +- templates/shortcodes/dimmable_image.html | 29 +++++++++------ templates/shortcodes/dual_theme_image.html | 43 +++++++++++++--------- templates/shortcodes/full_width_image.html | 25 ++++++++----- templates/shortcodes/image_hover.html | 41 ++++++++++++--------- templates/shortcodes/image_toggler.html | 41 ++++++++++++--------- templates/shortcodes/invertible_image.html | 29 +++++++++------ 9 files changed, 131 insertions(+), 89 deletions(-) diff --git a/content/blog/shortcodes/index.ca.md b/content/blog/shortcodes/index.ca.md index 57862e11c..9a360caba 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-11-24 +updated = 2024-02-16 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] @@ -20,6 +20,8 @@ social_media_card = "social_cards/ca_blog_shortcodes.jpg" **Nota 2**: a partir del [PR #222](https://github.com/welpo/tabi/pull/222) (commit [7796162](https://github.com/welpo/tabi/commit/7796162e378cacb9b4d6129f95138121224714f1)), tots els shortcodes d'imatges suporten rutes relatives pel paràmetre `src`. +**Nota 3**: a partir del [PR #280](https://github.com/welpo/tabi/pull/280), tots els shortcodes d'imatges admeten imatges remotes pel paràmetre `src`. + ### Imatges per a temes duals Útil si vols utilitzar una imatge diferent pels temes clar i fosc: diff --git a/content/blog/shortcodes/index.es.md b/content/blog/shortcodes/index.es.md index f94cf797f..ab52074f3 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-11-24 +updated = 2024-02-16 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] @@ -20,6 +20,8 @@ social_media_card = "social_cards/es_blog_shortcodes.jpg" **Nota 2**: a partir del [PR #222](https://github.com/welpo/tabi/pull/222) (commit [7796162](https://github.com/welpo/tabi/commit/7796162e378cacb9b4d6129f95138121224714f1)), todos los shortcodes de imágenes admiten rutas relativas en el parámetro `src`. +**Nota 3**: a partir del [PR #280](https://github.com/welpo/tabi/pull/280), todos los shortcodes de imágenes admiten imágenes remotas en el parámetro `src`. + ### Imágenes de doble tema Útil si deseas usar una imagen diferente para los temas claro y oscuro: diff --git a/content/blog/shortcodes/index.md b/content/blog/shortcodes/index.md index 507f8316b..99b881c79 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-11-24 +updated = 2024-02-16 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] @@ -20,6 +20,8 @@ social_media_card = "social_cards/blog_shortcodes.jpg" **Note 2**: as of [PR #222](https://github.com/welpo/tabi/pull/222) (commit [7796162](https://github.com/welpo/tabi/commit/7796162e378cacb9b4d6129f95138121224714f1)), all image shortcodes support relative paths in the `src` parameter. +**Note 3**: as of [PR #280](https://github.com/welpo/tabi/pull/280), all image shortcodes support remote images in the `src` parameter. + ### Dual theme images Useful if you want to use a different image for the light and dark themes: diff --git a/templates/shortcodes/dimmable_image.html b/templates/shortcodes/dimmable_image.html index be8ef5c7b..125699a9a 100644 --- a/templates/shortcodes/dimmable_image.html +++ b/templates/shortcodes/dimmable_image.html @@ -1,21 +1,26 @@ -{%- 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 -%} +{#- Determine image path based on whether the src is remote or local -#} +{%- if src is starting_with("http") -%} + {%- set image_url = src -%} {%- else -%} - {%- set image_path = relative_path -%} + {%- 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_url = get_url(path=src) -%} + {%- else -%} + {%- set image_url = get_url(path=relative_path) -%} + {%- endif -%} {%- endif -%} {%- set lazy_loading = lazy_loading | default(value=true) -%} -{%- if full_width | default(value=false) -%} +{%- if full_width -%}
{%- endif -%} - -{%- if full_width | default(value=false) -%} + +{%- if full_width -%}
{%- endif -%} diff --git a/templates/shortcodes/dual_theme_image.html b/templates/shortcodes/dual_theme_image.html index fba3529b4..bad33d6e8 100644 --- a/templates/shortcodes/dual_theme_image.html +++ b/templates/shortcodes/dual_theme_image.html @@ -1,30 +1,37 @@ {%- 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 lazy_loading = lazy_loading | default(value=true) -%} -{%- 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 -%} +{# Handling for light mode image #} +{%- if light_src is starting_with("http") -%} + {%- set light_image_url = light_src -%} {%- else -%} - {%- set light_image_path = relative_light_path -%} + {%- set relative_light_path = colocated_path ~ light_src -%} + {%- set light_meta = get_image_metadata(path=relative_light_path, allow_missing=true) -%} + {%- if not light_meta -%} + {%- set light_image_url = get_url(path=light_src) -%} + {%- else -%} + {%- set light_image_url = get_url(path=relative_light_path) -%} + {%- endif -%} {%- 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 -%} +{# Handling for dark mode image #} +{%- if dark_src is starting_with("http") -%} + {%- set dark_image_url = dark_src -%} {%- else -%} - {%- set dark_image_path = relative_dark_path -%} + {%- set relative_dark_path = colocated_path ~ dark_src -%} + {%- set dark_meta = get_image_metadata(path=relative_dark_path, allow_missing=true) -%} + {%- if not dark_meta -%} + {%- set dark_image_url = get_url(path=dark_src) -%} + {%- else -%} + {%- set dark_image_url = get_url(path=relative_dark_path) -%} + {%- endif -%} {%- endif -%} -{%- set lazy_loading = lazy_loading | default(value=true) -%} - -{%- if full_width | default(value=false) -%} +{%- if full_width -%}
{%- endif -%} - - -{%- if full_width | default(value=false) -%} + + +{%- if full_width -%}
{%- endif -%} diff --git a/templates/shortcodes/full_width_image.html b/templates/shortcodes/full_width_image.html index 36ddb2c2e..41809a727 100644 --- a/templates/shortcodes/full_width_image.html +++ b/templates/shortcodes/full_width_image.html @@ -1,17 +1,22 @@ -{%- 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) -%} +{#- Set paths based on whether the src is remote or local -#} +{%- if src is starting_with("http") -%} + {%- set image_url = src -%} +{%- else -%} + {%- 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 -%} + {#- 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_url = get_url(path=src) -%} + {%- else %} + {%- set image_url = get_url(path=relative_path) -%} + {%- endif -%} {%- endif -%} {%- set lazy_loading = lazy_loading | default(value=true) -%}
- +
diff --git a/templates/shortcodes/image_hover.html b/templates/shortcodes/image_hover.html index 615c2f0c4..dff7f728f 100644 --- a/templates/shortcodes/image_hover.html +++ b/templates/shortcodes/image_hover.html @@ -1,30 +1,37 @@ {%- 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 lazy_loading = lazy_loading | default(value=true) -%} -{%- 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 -%} +{#- Direct or relative URL handling for default image -#} +{%- if default_src is starting_with("http") -%} + {%- set default_image_url = default_src -%} {%- else -%} - {%- set default_image_path = relative_default_path -%} + {%- set relative_default_path = colocated_path ~ default_src -%} + {%- set default_meta = get_image_metadata(path=relative_default_path, allow_missing=true) -%} + {%- if not default_meta -%} + {%- set default_image_url = get_url(path=default_src) -%} + {%- else -%} + {%- set default_image_url = get_url(path=relative_default_path) -%} + {%- endif -%} {%- 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 -%} +{#- Direct or relative URL handling for hovered image -#} +{%- if hovered_src is starting_with("http") -%} + {%- set hovered_image_url = hovered_src -%} {%- else -%} - {%- set hovered_image_path = relative_hovered_path -%} + {%- set relative_hovered_path = colocated_path ~ hovered_src -%} + {%- set hovered_meta = get_image_metadata(path=relative_hovered_path, allow_missing=true) -%} + {%- if not hovered_meta -%} + {%- set hovered_image_url = get_url(path=hovered_src) -%} + {%- else -%} + {%- set hovered_image_url = get_url(path=relative_hovered_path) -%} + {%- endif -%} {%- 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 bb2cd2014..82c542b3b 100644 --- a/templates/shortcodes/image_toggler.html +++ b/templates/shortcodes/image_toggler.html @@ -3,35 +3,42 @@ {# This avoids conflicts when multiple instances of the shortcode are used. #} {%- set random_id = get_random(end=100000) -%} {%- 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 lazy_loading = lazy_loading | default(value=true) -%} -{%- 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 -%} +{# Direct or relative URL handling for default image #} +{%- if default_src is starting_with("http") -%} + {%- set default_image_url = default_src -%} {%- else -%} - {%- set default_image_path = relative_default_path -%} + {%- set relative_default_path = colocated_path ~ default_src -%} + {%- set default_meta = get_image_metadata(path=relative_default_path, allow_missing=true) -%} + {%- if not default_meta -%} + {%- set default_image_url = get_url(path=default_src) -%} + {%- else -%} + {%- set default_image_url = get_url(path=relative_default_path) -%} + {%- endif -%} {%- 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 -%} +{# Direct or relative URL handling for toggled image #} +{%- if toggled_src is starting_with("http") -%} + {%- set toggled_image_url = toggled_src -%} {%- else -%} - {%- set toggled_image_path = relative_toggled_path -%} + {%- set relative_toggled_path = colocated_path ~ toggled_src -%} + {%- set toggled_meta = get_image_metadata(path=relative_toggled_path, allow_missing=true) -%} + {%- if not toggled_meta -%} + {%- set toggled_image_url = get_url(path=toggled_src) -%} + {%- else -%} + {%- set toggled_image_url = get_url(path=relative_toggled_path) -%} + {%- endif -%} {%- endif -%} -{%- set lazy_loading = lazy_loading | default(value=true) -%} - -
+
diff --git a/templates/shortcodes/invertible_image.html b/templates/shortcodes/invertible_image.html index de67fa080..317d83606 100644 --- a/templates/shortcodes/invertible_image.html +++ b/templates/shortcodes/invertible_image.html @@ -1,21 +1,26 @@ -{%- 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 -%} +{#- Determine if src is a remote URL or a local path -#} +{%- if src is starting_with("http") -%} + {%- set image_url = src -%} {%- else -%} - {%- set image_path = relative_path -%} + {%- 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_url = get_url(path=src) -%} + {%- else %} + {%- set image_url = get_url(path=relative_path) -%} + {%- endif -%} {%- endif -%} {%- set lazy_loading = lazy_loading | default(value=true) -%} -{%- if full_width | default(value=false) -%} +{%- if full_width -%}
{%- endif -%} - -{%- if full_width | default(value=false) -%} + +{%- if full_width -%}
{%- endif -%}