nick
/
tabi-test
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

✨ feat: allow relative paths for image shortcodes (#222)

Browse Source
main
Óscar Fernández 1 year ago committed by GitHub
parent 1221eeeb41
commit 7796162e37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 158 additions and 65 deletions
Show Stats Download Patch File Download Diff File

28
content/blog/shortcodes/index.ca.md
Unescape Escape View File

@ -1,7 +1,7 @@
+++ +++
title = "Shortcodes personalitzats" title = "Shortcodes personalitzats"
date = 2023-02-19 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." 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] [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**: 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 ### Imatges per a temes duals
Útil si vols utilitzar una imatge diferent pels temes clar i fosc: Ú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 #### Ú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 ### 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. Ú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 #### Ú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 ### 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. 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 #### Ú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 ### 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. 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 #### Ú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 ### 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. 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 #### Ú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 ### 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`. 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 #### Ú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 ## Shortcodes de text

28
content/blog/shortcodes/index.es.md
Unescape Escape View File

@ -1,7 +1,7 @@
+++ +++
title = "Shortcodes personalizados" title = "Shortcodes personalizados"
date = 2023-02-19 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." 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] [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**: 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 ### Imágenes de doble tema
Útil si deseas usar una imagen diferente para los temas claro y oscuro: Ú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 #### 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 ### 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. 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 #### 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. 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 #### 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 ### 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. 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 #### 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 ### 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. 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 #### 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 ### 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`. 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 #### 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 ## Shortcodes de texto

28
content/blog/shortcodes/index.md
Unescape Escape View File

@ -1,7 +1,7 @@
+++ +++
title = "Custom shortcodes" title = "Custom shortcodes"
date = 2023-02-19 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." 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] [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**: 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 ### Dual theme images
Useful if you want to use a different image for the light and dark themes: 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 #### 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 ### Invertible image
Good for graphs, line drawings, diagrams… Inverts the colours of the image. The source image will be used for the light theme. 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 #### Usage
``` ```
{{/* invertible_image(src="blog/shortcodes/img/graph.webp", alt="Invertible graph") */}} {{/* invertible_image(src="img/graph.webp", alt="Invertible graph") */}}
``` ```
### Dimmable image ### 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. 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 #### 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 ### 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. 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 #### 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 ### Interactive image toggle
Display an image and switch to a different one on click. Ideal for highlighting differences or drawing attention to details. 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 #### 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 ### 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`. 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 #### 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 ## Text shortcodes

23
templates/shortcodes/dimmable_image.html
Unescape Escape View File

@ -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) -%} {%- set lazy_loading = lazy_loading | default(value=true) -%}
{% if full_width | default(value=false) %} {%- if full_width | default(value=false) -%}
<div class="full-width"> <div class="full-width">
{% endif %} {%- 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 %}/> <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) %} {%- if full_width | default(value=false) -%}
</div> </div>
{% endif %} {%- endif -%}

30
templates/shortcodes/dual_theme_image.html
Unescape Escape View File

@ -1,12 +1,30 @@
{%- set light_meta = get_image_metadata(path=light_src, allow_missing=true) -%} {%- set colocated_path = page.colocated_path | default(value="") -%}
{%- set dark_meta = get_image_metadata(path=dark_src, allow_missing=true) -%} {%- 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) -%} {%- set lazy_loading = lazy_loading | default(value=true) -%}
{%- if full_width | default(value=false) -%} {%- if full_width | default(value=false) -%}
<div class="full-width"> <div class="full-width">
{%- endif -%} {%- 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=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_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"> <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) %} {%- if full_width | default(value=false) -%}
</div> </div>
{% endif %} {%- endif -%}

15
templates/shortcodes/full_width_image.html
Unescape Escape View File

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

26
templates/shortcodes/image_hover.html
Unescape Escape View File

@ -1,12 +1,30 @@
{%- set default_meta = get_image_metadata(path=default_src, allow_missing=true) -%} {%- set colocated_path = page.colocated_path | default(value="") -%}
{%- set hovered_meta = get_image_metadata(path=hovered_src, allow_missing=true) -%} {%- 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) -%} {%- set lazy_loading = lazy_loading | default(value=true) -%}
<div class="image-hover-container{% if full_width | default(value=false) %} full-width{% endif %}"> <div class="image-hover-container{% if full_width | default(value=false) %} full-width{% endif %}">
<div class="image-default"> <div class="image-default">
<img src="{{ get_url(path=default_src) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if hovered_alt %} alt="{{ default_alt }}"{% endif %}{% if default_meta.width %} width="{{ default_meta.width }}"{% endif %}{% if default_meta.height %} height="{{ default_meta.height }}"{% endif %}> <img src="{{ get_url(path=default_image_path) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if default_alt %} alt="{{ default_alt }}"{% endif %}{% if default_meta.width %} width="{{ default_meta.width }}"{% endif %}{% if default_meta.height %} height="{{ default_meta.height }}"{% endif %}>
</div> </div>
<div class="image-hovered"> <div class="image-hovered">
<img src="{{ get_url(path=hovered_src) }}"{% if hovered_alt %} alt="{{ hovered_alt }}"{% endif %}{% if hovered_meta.width %} width="{{ hovered_meta.width }}"{% endif %}{% if hovered_meta.height %} height="{{ hovered_meta.height }}"{% endif %}> <img src="{{ get_url(path=hovered_image_path) }}"{% if hovered_alt %} alt="{{ hovered_alt }}"{% endif %}{% if hovered_meta.width %} width="{{ hovered_meta.width }}"{% endif %}{% if hovered_meta.height %} height="{{ hovered_meta.height }}"{% endif %}>
</div> </div>
</div> </div>

26
templates/shortcodes/image_toggler.html
Unescape Escape View File

@ -2,18 +2,36 @@
{# allowing individual interactive elements (like toggles) to function correctly. #} {# allowing individual interactive elements (like toggles) to function correctly. #}
{# This avoids conflicts when multiple instances of the shortcode are used. #} {# This avoids conflicts when multiple instances of the shortcode are used. #}
{%- set random_id = get_random(end=100000) -%} {%- set random_id = get_random(end=100000) -%}
{%- set default_meta = get_image_metadata(path=default_src, allow_missing=true) -%} {%- set colocated_path = page.colocated_path | default(value="") -%}
{%- set toggled_meta = get_image_metadata(path=toggled_src, allow_missing=true) -%} {%- 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) -%} {%- set lazy_loading = lazy_loading | default(value=true) -%}
<div class="image-toggler-container {% if full_width | default(value=false) %}full-width{% endif %}"> <div class="image-toggler-container {% if full_width | default(value=false) %}full-width{% endif %}">
<input type="checkbox" id="toggle-img-{{ random_id }}" class="image-toggler-toggle"> <input type="checkbox" id="toggle-img-{{ random_id }}" class="image-toggler-toggle">
<label for="toggle-img-{{ random_id }}" class="image-label"> <label for="toggle-img-{{ random_id }}" class="image-label">
<div class="image-default"> <div class="image-default">
<img src="{{ get_url(path=default_src) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if default_alt %} alt="{{ default_alt }}"{% endif %}{% if default_meta.width %} width="{{ default_meta.width }}"{% endif %}{% if default_meta.height %} height="{{ default_meta.height }}"{% endif %}> <img src="{{ get_url(path=default_image_path) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if default_alt %} alt="{{ default_alt }}"{% endif %}{% if default_meta.width %} width="{{ default_meta.width }}"{% endif %}{% if default_meta.height %} height="{{ default_meta.height }}"{% endif %}>
</div> </div>
<div class="image-toggled"> <div class="image-toggled">
<img src="{{ get_url(path=toggled_src) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if toggled_alt %} alt="{{ toggled_alt }}"{% endif %}{% if toggled_meta.width %} width="{{ toggled_meta.width }}"{% endif %}{% if toggled_meta.height %} height="{{ toggled_meta.height }}"{% endif %}> <img src="{{ get_url(path=toggled_image_path) }}"{% if lazy_loading %} loading="lazy"{% endif %}{% if toggled_alt %} alt="{{ toggled_alt }}"{% endif %}{% if toggled_meta.width %} width="{{ toggled_meta.width }}"{% endif %}{% if toggled_meta.height %} height="{{ toggled_meta.height }}"{% endif %}>
</div> </div>
</label> </label>
</div> </div>

19
templates/shortcodes/invertible_image.html
Unescape Escape View File

@ -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) -%} {%- set lazy_loading = lazy_loading | default(value=true) -%}
{% if full_width | default(value=false) %} {%- if full_width | default(value=false) -%}
<div class="full-width"> <div class="full-width">
{% endif %} {%- endif -%}
<img class="invertible-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 %}/> <img class="invertible-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) -%} {%- if full_width | default(value=false) -%}
</div> </div>
{%- endif -%} {%- endif -%}

Write Preview
Loading…
Cancel
Save