feat: add full-width image option to shortcodes

Closes #85
This commit is contained in:
welpo
2023-07-05 02:43:07 +02:00
parent 8c5f30556a
commit fd50204e32
9 changed files with 89 additions and 4 deletions

View File

@@ -1,7 +1,7 @@
+++
title = "Shortcodes personalitzats"
date = 2023-02-19
updated = 2023-06-05
updated = 2023-07-05
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,20 @@ 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") */}}
```
### 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).
Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant `true` al paràmetre opcional `full_width`.
{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }}
#### Ús
```
{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}}
```
## Cites
### Cites multillenguatge

View File

@@ -1,7 +1,7 @@
+++
title = "Shortcodes personalizados"
date = 2023-02-19
updated = 2023-06-05
updated = 2023-07-05
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,20 @@ 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") */}}
```
### 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).
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="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") }}
#### Uso
```
{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Fotografía de un canal en Ámsterdam") */}}
```
## Citas
### Citas multilenguaje

View File

@@ -1,7 +1,7 @@
+++
title = "Custom shortcodes"
date = 2023-02-19
updated = 2023-06-05
updated = 2023-07-05
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,20 @@ 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") */}}
```
### 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).
All other image shortcodes can be made into full-width by setting the optional parameter `full_width` to `true`.
{{ full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }}
#### Usage
```
{{/* full_width_image(src="img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}}
```
## Quotes
### Multilingual quotes