✨ feat: add 2 interactive image shortcodes

- `image_hover` changes image on mouse hover. - `image_toggler` swaps image on click.
welpo · Aug 9, 2023 · 7ccd717 · 7ccd717
1 parent 42293b2
commit 7ccd717
Show file tree

Hide file tree

Showing 8 changed files with 150 additions and 4 deletions.
diff --git a/content/blog/shortcodes.ca.md b/content/blog/shortcodes.ca.md
@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalitzats"
 date = 2023-02-19
-updated = 2023-07-07
+updated = 2023-08-09
 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]
@@ -45,6 +45,30 @@ Les imatges amb massa brillantor o contrast poden ser molestes en un fons fosc.
 {{/* 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="img/edited.webp", hovered_src="img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }}
+
+#### Ús
+
+```
+{{/* 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="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="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") */}}
+```
+
 ### Imatge d'amplada completa
 
 La imatge s'expandirà per coincidir amb l'amplada de la capçalera, que normalment és més ampla que el text de l'article (excepte en mòbil/finestres petites).

diff --git a/content/blog/shortcodes.es.md b/content/blog/shortcodes.es.md
@@ -1,7 +1,7 @@
 +++
 title = "Shortcodes personalizados"
 date = 2023-02-19
-updated = 2023-07-05
+updated = 2023-08-09
 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]
@@ -46,6 +46,30 @@ Las imágenes con demasiado brillo o contraste pueden ser demasiado discordantes
 {{/* 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="img/edited.webp", hovered_src="img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }}
+
+#### Uso
+
+```
+{{/* 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="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="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
 
 La imagen se expandirá para coincidir con el ancho del encabezado, que generalmente es más ancho que el texto del artículo (excepto en móvil/ventanas pequeñas).

diff --git a/content/blog/shortcodes.md b/content/blog/shortcodes.md
@@ -1,7 +1,7 @@
 +++
 title = "Custom shortcodes"
 date = 2023-02-19
-updated = 2023-07-05
+updated = 2023-08-09
 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]
@@ -45,6 +45,30 @@ Images with too much brightness or contrast can be jarring against a dark backgr
 {{/* 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="img/edited.webp", hovered_src="img/raw.webp", default_alt="Edited picture", hovered_alt="Original shot") }}
+
+#### Usage
+
+```
+{{/* 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="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="img/mojave_day.webp", toggled_src="img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") */}}
+```
+
 ### Full-width image
 
 The image will expand to match the width of the header, which is usually wider than the article text (except on mobile/small windows).
@@ -63,7 +87,7 @@ All other image shortcodes can be made into full-width by setting the optional p
 
 ### Multilingual quotes
 
-This shortcode allows you to display both the translated and original text for a quote:
+This shortcode allows you to display both the translated and original text for a quote. The quotation marks will be added automatically:
 
 {{ multilingual_quote(original="Qué sosiego, ir por la vida en silencio, saludando sólo a los amigos.", translated="What tranquility, to go through life in silence, greeting only friends.", author="Francisco Umbral") }}
 

diff --git a/sass/main.scss b/sass/main.scss
@@ -30,6 +30,8 @@
 @import 'parts/header-anchor.scss';
 @import 'parts/header.scss';
 @import 'parts/home-banner.scss';
+@import 'parts/image-toggler.scss';
+@import 'parts/image-hover.scss';
 @import 'parts/image.scss';
 @import 'parts/misc.scss';
 @import 'parts/multilingual_quote.scss';

diff --git a/sass/parts/_image-hover.scss b/sass/parts/_image-hover.scss
@@ -0,0 +1,21 @@
+.image-hover-container {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+
+    .image-default {
+        display: block;
+    }
+
+    .image-hovered {
+        display: none;
+    }
+
+    &:hover .image-hovered {
+        display: block;
+    }
+
+    &:hover .image-default {
+        display: none;
+    }
+}
diff --git a/sass/parts/_image-toggler.scss b/sass/parts/_image-toggler.scss
@@ -0,0 +1,20 @@
+.image-toggled {
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+}
+
+.image-toggler-toggle {
+    display: none;
+}
+
+.image-toggler-toggle:checked ~ .image-label .image-toggled {
+    visibility: visible;
+    position: static;
+}
+
+.image-toggler-toggle:checked ~ .image-label .image-default {
+    visibility: hidden;
+    position: absolute;
+}
diff --git a/templates/shortcodes/image_hover.html b/templates/shortcodes/image_hover.html
@@ -0,0 +1,13 @@
+{%- set default_meta = get_image_metadata(path=default_src, allow_missing=true) -%}
+{%- set hovered_meta = get_image_metadata(path=hovered_src, allow_missing=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) }}" alt="{{ default_alt }}"
+            width="{{ default_meta.width }}" height="{{ default_meta.height }}">
+    </div>
+    <div class="image-hovered">
+        <img src="{{ get_url(path=hovered_src) }}" alt="{{ hovered_alt }}"
+            width="{{ hovered_meta.width }}" height="{{ hovered_meta.height }}">
+    </div>
+</div>
diff --git a/templates/shortcodes/image_toggler.html b/templates/shortcodes/image_toggler.html
@@ -0,0 +1,18 @@
+{%- 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) %}
+
+<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) }}" alt="{{ default_alt }}"
+                width="{{ default_meta.width }}" height="{{ default_meta.height }}">
+        </div>
+        <div class="image-toggled">
+            <img src="{{ get_url(path=toggled_src) }}" alt="{{ toggled_alt }}"
+                width="{{ toggled_meta.width }}" height="{{ toggled_meta.height }}">
+        </div>
+    </label>
+</div>