️ refactor: co-locate images (#200)

This commit is contained in:
Óscar Fernández
2023-10-07 23:27:55 +02:00
committed by GitHub
parent c0a07cb467
commit 8aabeaecc3
173 changed files with 205 additions and 205 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 300 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 61 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 13 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.9 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 70 KiB

View File

@@ -0,0 +1,178 @@
+++
title = "Shortcodes personalitzats"
date = 2023-02-19
updated = 2023-08-26
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]
tags = ["funcionalitat", "shortcodes"]
[extra]
toc = true
toc_levels = 2
quick_navigation_buttons = true
social_media_card = "social_cards/ca_blog_shortcodes.jpg"
+++
## Shortcodes d'imatge
**Nota**: tots els shortcodes d'imatge tenen dos paràmetres opcionals: `full_width`, que té com a valor predeterminat `false` (vegeu [a sota](#imatge-d-amplada-completa)), i `lazy_loading`, que té com a valor predeterminat `true`.
### Imatges per a temes duals
Útil si vols utilitzar una imatge diferent pels temes clar i fosc:
{{ dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/img/paris_night.webp" alt="La Torre Eiffel") }}
#### Ús
```
{{/* dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/img/paris_night.webp" alt="La Torre Eiffel") */}}
```
### Imatge invertible
Útil per a gràfics, dibuixos de línies, diagrames… Inverteix els colors de la imatge. La imatge original s'utilitzarà per al tema clar.
{{ invertible_image(src="blog/shortcodes/img/graph.webp", alt="Gràfic invertible") }}
#### Ús
```
{{/* invertible_image(src="blog/shortcodes/img/graph.webp", alt="Gràfic invertible") */}}
```
### Imatge regulable
Les imatges amb massa brillantor o contrast poden ser molestes en un fons fosc. Aquí tens un exemple d'una fotografia que s'atenua quan s'activa el tema fosc.
{{ dimmable_image(src="blog/shortcodes/img/desert_by_oskerwyld.webp", alt="Fotografia d'un desert, cel celestial") }}
#### Ús
```
{{/* dimmable_image(src="blog/shortcodes/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="blog/shortcodes/img/edited.webp", hovered_src="blog/shortcodes/img/raw.webp", default_alt="Foto editada", hovered_alt="Foto original") }}
#### Ús
```
{{/* image_hover(default_src="blog/shortcodes/img/before.webp", hovered_src="blog/shortcodes/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="blog/shortcodes/img/mojave_day.webp", toggled_src="blog/shortcodes/img/mojave_night.webp", default_alt="Mojave de dia", toggled_alt="Mojave de nit") }}
#### Ús
```
{{/* image_toggler(default_src="blog/shortcodes/img/mojave_day.webp", toggled_src="blog/shortcodes/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).
Tots els altres shortcodes d'imatges poden utilizar l'amplada completa assignant `true` al paràmetre opcional `full_width`.
{{ full_width_image(src="blog/shortcodes/img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") }}
#### Ús
```
{{/* full_width_image(src="blog/shortcodes/img/amsterdam_by_oskerwyld.webp", alt="Fotografia d'un canal a Àmsterdam") */}}
```
## Shortcodes de text
### Cites multillenguatge
Aquest shortcode permet mostrar una cita traduïda i en el llenguatge original:
{{ multilingual_quote(original="Die Logik ist zwar unerschütterlich, aber einem Menschen, der leben will, widersteht sie nicht.", translated="La lògica, encara que inquebrantable, no resisteix a un home que vol viure.", author="Franz Kafka") }}
#### Ús
```
{{/* multilingual_quote(original="Die Logik ist zwar unerschütterlich, aber einem Menschen, der leben will, widersteht sie nicht.", translated="La lògica, encara que inquebrantable, no resisteix a un home que vol viure.", author="Franz Kafka") */}}
```
### Referències amb sagnat invertit
Aquest shortcode formata una secció de referència amb un sagnat invertit de la següent manera:
{% references() %}
Alderson, E. (2015). Ciberseguretat i justícia social: Una crítica a la hegemonia corporativa en un món digital. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6).
Funkhouser, M. (2012). Les normes socials d'indecència: Un anàlisi del comportament desviat a la societat contemporània. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037).
Schrute, D. (2005). La revolució de l'agricultura de remolatxa: Un anàlisi de la innovació agrícola. *Scranton Agricultural Quarterly, 38*(3), 67-81.
Steinbrenner, G. (1997). L'anàlisi cost-benefici de George Costanza: Un anàlisi del comportament de presa de riscos en el lloc de treball. *New York Journal of Business, 12*(4), 112-125.
Winger, J. A. (2010). L'art del debat: Un examen de la retòrica en el model de les Nacions Unides del Greendale Community College. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie).
{% end %}
#### Ús
```
{%/* references() */%}
Les teves referències van aquí.
Cada una en una nova línia. Es renderitzarà el Markdown (enllaços, cursiva…).
{%/* end */%}
```
### Spoiler
Aquest shortcode amaga el text fins que l'usuari fa clic per revelar-lo. Per exemple: A l'antiga Roma, el *vomitorium* era {{ spoiler(text="l'entrada a través de la qual les multituds entraven i sortien d'un estadi, no un espai especial utilitzat per a vomitar durant els àpats. Sí, [de debó](https://ca.wikipedia.org/wiki/Vomitori).") }}
Com veus, el Markdown es renderitza.
Aquest shortcode té l'opció `fixed_blur` per difuminar el text "SPOILER", en lloc de difuminar el contingut real. Per exemple: és {{ spoiler(text="innecessari", fixed_blur=true)}} esperar 24 hores abans de denunciar la desaparició d'una persona.
#### Ús
```
{{/* spoiler(text="text a amagar", fixed_blur=false) */}}
```
## Contenidors
### Contenidor ample
Utilitza aquest codi curt si vols tenir una taula, paràgraf, bloc de codi… més ample. A l'escriptori, ocuparà l'amplada de la capçalera. A mòbils no tindrà efecte, excepte per les taules, que guanyaran scroll horitzontal.
{% wide_container() %}
| Títol | Any | Director | Director de fotografia | Gènere | IMDb | Durada |
|-------------------|-------|----------------------|-------------------------|----------------|-------|--------------|
| Beoning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Misteri | 7.5 | 148 min |
| The Master | 2012 | Paul Thomas Anderson | Mihai Mălaimare Jr. | Drama/Història | 7.1 | 137 min |
| The Tree of Life | 2011 | Terrence Malick | Emmanuel Lubezki | Drama | 6.8 | 139 min |
{% end %}
#### Ús
```
{%/* wide_container() */%}
Posa el teu bloc de codi, paràgraf, taula… aquí.
El Markdown, per suposat, serà interpretat.
{%/* end */%}
```

View File

@@ -0,0 +1,180 @@
+++
title = "Shortcodes personalizados"
date = 2023-02-19
updated = 2023-08-26
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]
tags = ["funcionalidad", "shortcodes"]
[extra]
toc = true
toc_levels = 2
quick_navigation_buttons = true
social_media_card = "social_cards/es_blog_shortcodes.jpg"
+++
## Shortcodes de imagen
**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`.
### 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") }}
#### Uso
```
{{/* dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/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") }}
#### Uso
```
{{/* invertible_image(src="blog/shortcodes/img/graph.webp", alt="Gráfico invertible") */}}
```
### Imagen atenuable
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") }}
#### Uso
```
{{/* dimmable_image(src="blog/shortcodes/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") }}
#### 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") */}}
```
### 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") }}
#### 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") */}}
```
### 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="blog/shortcodes/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") */}}
```
## Shortcodes de texto
### Citas multilenguaje
Este shortcode permite mostrar una cita traducida y en su lenguaje original:
{{ multilingual_quote(original="Ce qui est terrible, ce nest pas de souffrir ni de mourir, mais de mourir en vain.", translated="Lo terrible no es sufrir o morir, sino morir en vano.", author="Jean-Paul Sartre") }}
#### Uso
```
{{/* multilingual_quote(original="Ce qui est terrible, ce nest pas de souffrir ni de mourir, mais de mourir en vain.", translated="Lo terrible no es sufrir o morir, sino morir en vano.", author="Jean-Paul Sartre") */}}
```
### Referencias con sangría francesa
Este shortcode formatea una sección de referencias con sangría francesa de la siguiente manera:
{% references() %}
Alderson, E. (2015). Ciberseguridad y justicia social: Una crítica a la hegemonía corporativa en un mundo digital. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6).
Funkhouser, M. (2012). Las normas sociales de indecencia: Un análisis del comportamiento desviado en la sociedad contemporánea. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037).
Schrute, D. (2005). La revolución de la agricultura de remolacha: Un análisis de la innovación agrícola. *Scranton Agricultural Quarterly, 38*(3), 67-81.
Steinbrenner, G. (1997). El análisis costo-beneficio de George Costanza: Un examen del comportamiento de toma de riesgos en el lugar de trabajo. *New York Journal of Business, 12*(4), 112-125.
Winger, J. A. (2010). El arte del debate: Un examen de la retórica en el modelo de las Naciones Unidas del Greendale Community College. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie).
{% end %}
#### Uso
```
{%/* references() */%}
Tus referencias van aquí.
Cada una en una línea nueva. Se renderizará Markdown (enlaces, cursivas…).
{%/* end */%}
```
### Spoilers
Este shortcode permite ocultar texto que se revelará al hacer clic. Por ejemplo: las galletas de la fortuna tiene su origen en {{ spoiler(text="Japón. Sí, [en serio](https://es.wikipedia.org/wiki/Galleta_de_la_suerte#Historia_y_origen).") }}
Como ves, el Markdown se renderiza.
Este shortcode tiene la opción `fixed_blur` para difuminar el texto "SPOILER", en lugar de difuminar el contenido real. Por ejemplo: es {{ spoiler(text="innecesario", fixed_blur=true)}} esperar 24 horas antes de denunciar la desaparición de una persona.
#### Uso
```
{{/* spoiler(text="texto que ocultar", fixed_blur=false) */}}
```
## Contenedores
### Contenedor ancho
Utiliza este código corto si deseas tener una tabla, párrafo, bloque de código… más ancho. En escritorio, ocupará el ancho del encabezado. En móviles no tendrá efecto, excepto para las tablas, que ganarán scroll horizontal.
{% wide_container() %}
| Título | Año | Director | Director de Fotografía| Género | IMDb | Duración |
|-------------------|-------|----------------------|-----------------------|---------------|-------|--------------|
| Beoning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Misterio| 7.5 | 148 min |
| The Master | 2012 | Paul Thomas Anderson | Mihai Mălaimare Jr. | Drama/Historia| 7.1 | 137 min |
| The Tree of Life | 2011 | Terrence Malick | Emmanuel Lubezki | Drama | 6.8 | 139 min |
{% end %}
#### Uso
```
{%/* wide_container() */%}
Coloca tu bloque de código, párrafo, tabla… aquí.
El Markdown, por supuesto, será interpretado.
{%/* end */%}
```

View File

@@ -0,0 +1,178 @@
+++
title = "Custom shortcodes"
date = 2023-02-19
updated = 2023-08-26
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]
tags = ["showcase", "shortcodes"]
[extra]
toc = true
toc_levels = 2
quick_navigation_buttons = true
social_media_card = "social_cards/blog_shortcodes.jpg"
+++
## Image shortcodes
**Note**: all image shortcodes have two optional parameters: `full_width`, which defaults to `false` (see [below](#full-width-image)), and `lazy_loading`, which defaults to `true`.
### Dual theme images
Useful if you want to use a different image for the light and dark themes:
{{ dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/img/paris_night.webp" alt="The Eiffel tower") }}
#### Usage
```
{{/* dual_theme_image(light_src="blog/shortcodes/img/paris_day.webp", dark_src="blog/shortcodes/img/paris_night.webp" alt="The Eiffel tower") */}}
```
### Invertible image
Good for graphs, line drawings, diagrams… Inverts the colours of the image. The source image will be used for the light theme.
{{ invertible_image(src="blog/shortcodes/img/graph.webp", alt="Invertible graph") }}
#### Usage
```
{{/* invertible_image(src="blog/shortcodes/img/graph.webp", alt="Invertible graph") */}}
```
### Dimmable image
Images with too much brightness or contrast can be jarring against a dark background. Here's an example of a photograph that dims when the dark theme is active.
{{ dimmable_image(src="blog/shortcodes/img/desert_by_oskerwyld.webp", alt="Photograph of a desert, heavenly sky") }}
#### Usage
```
{{/* dimmable_image(src="blog/shortcodes/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="blog/shortcodes/img/edited.webp", hovered_src="blog/shortcodes/img/raw.webp", default_alt="Edited picture", hovered_alt="Original shot") }}
#### Usage
```
{{/* image_hover(default_src="blog/shortcodes/img/before.webp", hovered_src="blog/shortcodes/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="blog/shortcodes/img/mojave_day.webp", toggled_src="blog/shortcodes/img/mojave_night.webp", default_alt="Mojave during the day", toggled_alt="Mojave at night") }}
#### Usage
```
{{/* image_toggler(default_src="blog/shortcodes/img/mojave_day.webp", toggled_src="blog/shortcodes/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).
All other image shortcodes can be made into full-width by setting the optional parameter `full_width` to `true`.
{{ full_width_image(src="blog/shortcodes/img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") }}
#### Usage
```
{{/* full_width_image(src="blog/shortcodes/img/amsterdam_by_oskerwyld.webp", alt="Photograph of a canal in Amsterdam") */}}
```
## Text shortcodes
### Multilingual quotes
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") }}
#### Usage
```
{{/* 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") */}}
```
### References with hanging indent
This shortcode formats a reference section with a hanging indent like so:
{% references() %}
Alderson, E. (2015). Cybersecurity and Social Justice: A Critique of Corporate Hegemony in a Digital World. *New York Journal of Technology, 11*(2), 24-39. [https://doi.org/10.1007/s10198-022-01497-6](https://doi.org/10.1007/s10198-022-01497-6).
Funkhouser, M. (2012). The Social Norms of Indecency: An Analysis of Deviant Behavior in Contemporary Society. *Los Angeles Journal of Sociology, 16*(3), 41-58. [https://doi.org/10.1093/jmp/jhx037](https://doi.org/10.1093/jmp/jhx037).
Schrute, D. (2005). The Beet Farming Revolution: An Analysis of Agricultural Innovation. *Scranton Agricultural Quarterly, 38*(3), 67-81.
Steinbrenner, G. (1997). The Cost-Benefit Analysis of George Costanza: An Examination of Risk-Taking Behavior in the Workplace. *New York Journal of Business, 12*(4), 112-125.
Winger, J. A. (2010). The Art of Debate: An Examination of Rhetoric in Greendale Community College's Model United Nations. *Colorado Journal of Communication Studies, 19*(2), 73-86. [https://doi.org/10.1093/6seaons/1movie](https://doi.org/10.1093/6seaons/1movie).
{% end %}
#### Usage
```
{%/* references() */%}
Your references go here.
Each in a new line. Markdown (links, italics…) will be rendered.
{%/* end */%}
```
### Spoiler
This shortcode allows you to blur text until the user clicks on it. Like this: Goldfish have a memory span of a few {{ spoiler(text="months. Yes, [really](https://en.wikipedia.org/wiki/Goldfish#Cognitive_abilities).") }}
As you can see, Markdown is rendered. You can even add newlines with `<br>`.
This shortcode has the optional flag `fixed_blur` to blur a fixed placeholder ("SPOILER"), instead of blurring the actual contents. Like this: it is {{ spoiler(text="not necessary", fixed_blur=true)}} to wait 24 hours before filing a missing person report.
#### Usage
```
{{/* spoiler(text="text to hide", fixed_blur=false) */}}
```
## Containers
### Wide container
Use this shortcode if you want to have a wider table, paragraph, code block… On desktop, it will take up the width of the header. It will have no effect on mobile, except for tables, which will get a horizontal scroll.
{% wide_container() %}
| Title | Year | Director | Cinematographer | Genre | IMDb | Duration |
|-------------------|-------|----------------------|-----------------------|---------------|-------|--------------|
| Beoning | 2018 | Lee Chang-dong | Hong Kyung-pyo | Drama/Mystery | 7.5 | 148 min |
| The Master | 2012 | Paul Thomas Anderson | Mihai Mălaimare Jr. | Drama/History | 7.1 | 137 min |
| The Tree of Life | 2011 | Terrence Malick | Emmanuel Lubezki | Drama | 6.8 | 139 min |
{% end %}
#### Usage
```
{%/* wide_container() */%}
Place your code block, paragraph, table… here.
Markdown will of course be rendered.
{%/* end */%}
```

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB