deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-12-17 04:48:44 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

✨ feat: add 2 interactive image shortcodes

Browse source 
- `image_hover` changes image on mouse hover.

- `image_toggler` swaps image on click.
This commit is contained in:
welpo 2023-08-09 18:36:45 +02:00
parent 42293b2868
commit 7ccd71736e
No known key found for this signature in database
GPG key ID: A2F978CF4EC1F5A6
8 changed files with 150 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

26
content/blog/shortcodes.ca.md
View file

@ -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).