From 2aa5a83686880e947a6614a42f93550d96b1f87f Mon Sep 17 00:00:00 2001 From: Jieiku Date: Sun, 2 Feb 2025 21:30:23 -0800 Subject: Add and Update Translations --- content/overview-images/index.es.md | 150 ++++++++++++++++++++++++++++++++++++ content/overview-images/index.fr.md | 49 +++++++++--- content/overview-images/index.md | 31 +++++++- 3 files changed, 215 insertions(+), 15 deletions(-) create mode 100644 content/overview-images/index.es.md (limited to 'content/overview-images') diff --git a/content/overview-images/index.es.md b/content/overview-images/index.es.md new file mode 100644 index 0000000..0f26e78 --- /dev/null +++ b/content/overview-images/index.es.md @@ -0,0 +1,150 @@ ++++ +date = 2021-05-19T15:00:00Z +description = "Las imágenes pueden incrustarse directamente usando markdown `![Ferris](ferris.svg)`, pero usando un shortcode se evita CLS al establecer explícitamente la anchura y la altura." +draft = false +title = "Códigos cortos de imagen" + +[extra] +keywords = "Image, Markdown, Shortcodes, Swap" +series = "Features" +thumbnail = "ferris-gesture.png" +toc = true + +[taxonomies] +tags = [ + "Features", + "Shortcodes", + "Images", +] ++++ +Este post cubre los **shortcodes imgswap e img**. Las imágenes también se pueden incrustar directamente utilizando markdown `![Ferris](ferris.svg)`, pero es mejor utilizar un código corto para que pueda establecer explícitamente la anchura y la altura, esto ayudará a evitar el cambio de diseño de contenido que mejora la experiencia del usuario y la puntuación de Google Lighthouse. + + + +# código corto img + +- src es la ruta y el nombre de archivo de la imagen. (obligatorio) +- class establece una clase para la imagen. +- alt establece la nota alt para la imagen. +- caption establece el texto del título debajo de la imagen. +- link establece un hipervínculo para la imagen. +- w es el ancho de la imagen. +- h es la altura de la imagen. + +Clases opcionales: + +- ci se puede utilizar para centrar la imagen. +- fr se puede utilizar para flotar la imagen a la derecha. +- fl se puede utilizar para flotar la imagen a la izquierda. +- b1 se puede utilizar para añadir un borde de 1px. + +*google lighthouse recomienda establecer los atributos alt, w y h. Si se omite alt, se utiliza el nombre del archivo. Si se omiten w o h entonces get\_image\_metadata() rellena estos valores.* + +## Uso (misma ruta) + +```rs +{{/* img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") */}} +``` + +**Salida** + +```html +{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} +``` + +{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} + +## Uso (ruta relativa ./) + +```rs +{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") */}} +``` + +**Salida** + +```html +{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} +``` + +{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} + +## Uso (ruta raíz /) + +```rs +{{/* img(src="/images/ferris.svg" alt="Ferris the Rustacean") */}} +``` + +**Salida** + +```html +{{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} +``` + +{{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} + +# Imagen SVG directamente en el código + +```html + +``` + + + +# código corto imgswap + +Por defecto main\_src es la imagen mostrada, swap\_src se muestra al pasar el ratón por encima. + +Al pasar el ratón sobre la imagen se mostrará la imagen a comparar. + +- main\_src es la ruta y el nombre de archivo de la imagen por defecto. (obligatorio) +- swap\_src es la ruta y el nombre de archivo de la imagen de intercambio. (obligatorio) +- class establece una clase para la imagen. +- alt establece la nota alt para la imagen. +- caption establece el texto del título debajo de la imagen. +- link establece un hipervínculo para la imagen. +- w es el ancho de la imagen. +- h es la altura de la imagen. + +*google lighthouse recomienda establecer los atributos alt, w y h. Si se omite alt, se utiliza el nombre del archivo. Si se omiten w o h entonces get\_image\_metadata() rellena estos valores.* + +## Uso (misma ruta) + +```rs +{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}} +``` + +**Salida** + +```html +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} +``` + +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} + +## Uso (ruta relativa ./) + +```rs +{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") */}} +``` + +**Salida** + +```html +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} +``` + +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} + +## Uso (ruta raíz /) + +```rs +{{/* imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") */}} +``` + +**Salida** + +```html +{{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} +``` + +{{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md index d81dcaf..ad77bf9 100644 --- a/content/overview-images/index.fr.md +++ b/content/overview-images/index.fr.md @@ -38,44 +38,57 @@ Cours optionnels: - fl peut être utilisé pour faire flotter l'image vers la gauche. - b1 peut être utilisé pour ajouter une bordure de 1px. -** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. ** +*google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs.* ## Utilisation (même chemin) + ```rs -{{/* img(src="ferris-happy.svg" class="ci b1" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") */}} +{{/* img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") */}} ``` + **Output** + ```html -{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") }} +{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} ``` -{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris est heureux" caption="Ferris" link="https://www.rust-lang.org/") }} + +{{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} ## Utilisation (chemin relatif ./) + ```rs -{{/* img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" caption="Ferris" link="https://www.rust-lang.org/") */}} +{{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") */}} ``` + **Output** + ```html -{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" caption="Ferris" link="https://www.rust-lang.org/") }} +{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} ``` -{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" caption="Ferris" link="https://www.rust-lang.org/") }} + +{{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} ## Utilisation (chemin racine /) + ```rs -{{/* img(src="/images/ferris.svg" alt="Ferris le Rustacé") */}} +{{/* img(src="/images/ferris.svg" alt="Ferris the Rustacean") */}} ``` + **Sortir** + ```html -{{ img(src="/images/ferris.svg" alt="Ferris le Rustacé") }} +{{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} ``` -{{ img(src="/images/ferris.svg" alt="Ferris le Rustacé") }} + +{{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} # Image SVG directement dans le code + ```html ``` - + # imgswap Shortcode @@ -92,34 +105,46 @@ Lorsque vous passez votre souris sur l'image, l'image à comparer s'affiche. - w est la largeur de l'image. - h est la hauteur de l'image. -** google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs. ** +*google lighthouse recommande de définir les attributs alt, w et h. Si alt est omis, le nom du fichier est utilisé. Si w ou h sont omis alors get_image_metadata() remplit ces valeurs.* ## Utilisation (même chemin) + ```rs {{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}} ``` + **Sortir** + ```html {{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} ``` + {{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} ## Utilisation (chemin relatif ./) + ```rs {{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") */}} ``` + **Sortir** + ```html {{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} ``` + {{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} ## Utilisation (chemin racine /) + ```rs {{/* imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") */}} ``` + **Sortir** + ```html {{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} ``` + {{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} diff --git a/content/overview-images/index.md b/content/overview-images/index.md index 05c45e5..c3cfd03 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -38,44 +38,57 @@ Optional Classes: - fl can be used to float the image left. - b1 can be used to add a 1px border. -** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. ** +*google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values.* ## Usage (same path) + ```rs {{/* img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") */}} ``` + **Output** + ```html {{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} ``` + {{ img(src="ferris-happy.svg" class="ci b1" alt="Ferris is Happy" caption="Ferris" link="https://www.rust-lang.org/") }} ## Usage (relative path ./) + ```rs {{/* img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") */}} ``` + **Output** + ```html {{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} ``` + {{ img(src="./img/ferris-gesture.svg" alt="Ferris says Hello" caption="Ferris" link="https://www.rust-lang.org/") }} ## Usage (root path /) + ```rs {{/* img(src="/images/ferris.svg" alt="Ferris the Rustacean") */}} ``` + **Output** + ```html {{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} ``` + {{ img(src="/images/ferris.svg" alt="Ferris the Rustacean") }} # SVG image directly in code + ```html ``` - + # imgswap Shortcode @@ -92,34 +105,46 @@ When you hover your mouse over the image it will display the image to compare. - w is the width of the image. - h is the height of the image. -** google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values. ** +*google lighthouse recommends setting alt, w, and h attributes. If alt is omitted then the filename is used. If w or h are omitted then get_image_metadata() fills these values.* ## Usage (same path) + ```rs {{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}} ``` + **Output** + ```html {{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} ``` + {{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} ## Usage (relative path ./) + ```rs {{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") */}} ``` + **Output** + ```html {{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} ``` + {{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} ## Usage (root path /) + ```rs {{/* imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") */}} ``` + **Output** + ```html {{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} ``` + {{ imgswap(main_src="/images/ferris.svg" swap_src="/images/ferris-gesture.svg") }} -- cgit v1.3.1