Skip to content

Commit

Permalink
✨ feat: allow relative paths for image shortcodes (#222)
Browse files Browse the repository at this point in the history
  • Loading branch information
welpo committed Nov 24, 2023
1 parent 1221eee commit 7796162
Show file tree
Hide file tree
Showing 9 changed files with 158 additions and 65 deletions.
28 changes: 15 additions & 13 deletions content/blog/shortcodes/index.ca.md
@@ -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]
Expand All @@ -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
Expand All @@ -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
Expand Down
28 changes: 15 additions & 13 deletions content/blog/shortcodes/index.es.md
@@ -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]
Expand All @@ -18,64 +18,66 @@ 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") */}}
```


### Imagen atenuable

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
Expand All @@ -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
Expand Down
28 changes: 15 additions & 13 deletions content/blog/shortcodes/index.md
@@ -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]
Expand All @@ -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
Expand All @@ -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
Expand Down
23 changes: 17 additions & 6 deletions templates/shortcodes/dimmable_image.html
@@ -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 -%}
30 changes: 24 additions & 6 deletions templates/shortcodes/dual_theme_image.html
@@ -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 -%}

0 comments on commit 7796162

Please sign in to comment.