✨ feat: allow relative paths for image shortcodes (#222)
This commit is contained in:
Óscar Fernández
GitHub
parent
1221eeeb41
commit
7796162e37
@ -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
|
||||
|
||||
@ -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,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 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") */}}
|
||||
```
|
||||
|
||||
|
||||
@ -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.
|
||||
|
||||
{{ 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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 -%}
|
||||
|
||||
@ -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 -%}
|
||||
|
||||
@ -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) -%}
|
||||
|
||||
<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>
|
||||
|
||||
@ -1,12 +1,30 @@
|
||||
{%- set default_meta = get_image_metadata(path=default_src, allow_missing=true) -%}
|
||||
{%- set hovered_meta = get_image_metadata(path=hovered_src, allow_missing=true) -%}
|
||||
{%- 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 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) -%}
|
||||
|
||||
<div class="image-hover-container{% if full_width | default(value=false) %} full-width{% endif %}">
|
||||
<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 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>
|
||||
|
||||
@ -2,18 +2,36 @@
|
||||
{# allowing individual interactive elements (like toggles) to function correctly. #}
|
||||
{# This avoids conflicts when multiple instances of the shortcode are used. #}
|
||||
{%- set random_id = get_random(end=100000) -%}
|
||||
{%- set default_meta = get_image_metadata(path=default_src, allow_missing=true) -%}
|
||||
{%- set toggled_meta = get_image_metadata(path=toggled_src, allow_missing=true) -%}
|
||||
{%- 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 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) -%}
|
||||
|
||||
<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">
|
||||
<label for="toggle-img-{{ random_id }}" class="image-label">
|
||||
<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 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>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
@ -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="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 %}/>
|
||||
{%- 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) -%}
|
||||
</div>
|
||||
{%- endif -%}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user