deepStateMirrors/tabi
1
0
Fork 1
mirror of https://github.com/welpo/tabi.git synced 2025-10-11 07:46:15 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

✨ feat: allow relative paths for image shortcodes (#222)

Browse source
This commit is contained in:
Óscar Fernández 2023-11-24 02:10:43 +01:00 • committed by GitHub
parent 1221eeeb41
commit 7796162e37
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 158 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

28
content/blog/shortcodes/index.es.md
View file

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