From 7ccd71736eb8c3e7ee1114b271e8b698bdf5df18 Mon Sep 17 00:00:00 2001 From: welpo Date: Wed, 9 Aug 2023 18:36:45 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20add=202=20interactive=20ima?= =?UTF-8?q?ge=20shortcodes?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - `image_hover` changes image on mouse hover. - `image_toggler` swaps image on click. --- content/blog/shortcodes.ca.md | 26 ++++++++++++++++++++++- content/blog/shortcodes.es.md | 26 ++++++++++++++++++++++- content/blog/shortcodes.md | 28 +++++++++++++++++++++++-- sass/main.scss | 2 ++ sass/parts/_image-hover.scss | 21 +++++++++++++++++++ sass/parts/_image-toggler.scss | 20 ++++++++++++++++++ templates/shortcodes/image_hover.html | 13 ++++++++++++ templates/shortcodes/image_toggler.html | 18 ++++++++++++++++ 8 files changed, 150 insertions(+), 4 deletions(-) create mode 100644 sass/parts/_image-hover.scss create mode 100644 sass/parts/_image-toggler.scss create mode 100644 templates/shortcodes/image_hover.html create mode 100644 templates/shortcodes/image_toggler.html diff --git a/content/blog/shortcodes.ca.md b/content/blog/shortcodes.ca.md index d85a53fb3..2a977718e 100644 --- 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 index 0ac84696b..d94034477 100644 --- 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 index 4bef8281e..b6aa3d4d0 100644 --- 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 index e1c8c4d82..3cf173fde 100644 --- 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 new file mode 100644 index 000000000..fc1e7b1cd --- /dev/null +++ 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 new file mode 100644 index 000000000..5e28f7198 --- /dev/null +++ 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 new file mode 100644 index 000000000..241a5faa4 --- /dev/null +++ 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) -%} + +
+
+ {{ default_alt }} +
+
+ {{ hovered_alt }} +
+
diff --git a/templates/shortcodes/image_toggler.html b/templates/shortcodes/image_toggler.html new file mode 100644 index 000000000..09fca1a76 --- /dev/null +++ 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) %} + +
+ + +