From 61f2e1c3ac343163a5361686ad529c7039387310 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Sun, 20 Aug 2023 22:37:18 -0700 Subject: fix image shortcodes for multilingual, and other optimizations --- content/overview-images/index.fr.md | 48 +++++++++++++++++++++---------------- content/overview-images/index.md | 12 +++++++--- 2 files changed, 36 insertions(+), 24 deletions(-) (limited to 'content') diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md index 9a68006..956fdcd 100644 --- a/content/overview-images/index.fr.md +++ b/content/overview-images/index.fr.md @@ -20,39 +20,41 @@ Cet article couvre les **shortcodes imgswap et img**. Les images peuvent égalem - src est le chemin et le nom de fichier de l'image. (obligatoire) - class définit une classe pour l'image. (facultatif) -- alt définit la note alt pour l'image. (recommandé pour google phare) -- w est la largeur de l'image. (recommandé pour google phare) -- h est la hauteur de l'image. (recommandé pour google phare) +- alt définit la note alt pour l'image. +- 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. ** ## Utilisation (même chemin) ```rs -{{/* img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) */}} +{{/* img(src="ferris-happy.svg" alt="Ferris est heureux") */}} ``` **Sortir** ```html -{{ img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) }} +{{ img(src="ferris-happy.svg" alt="Ferris est heureux") }} ``` -{{ img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) }} +{{ img(src="ferris-happy.svg" alt="Ferris est heureux") }} ## Utilisation (chemin relatif ./) ```rs -{{/* img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) */}} +{{/* img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour") */}} ``` **Sortir** ```html -{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) }} +{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour") }} ``` -{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) }} +{{ img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour") }} ## Utilisation (chemin racine /) ```rs -{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) */}} +{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé") */}} ``` **Sortir** ```html -{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) }} +{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé") }} ``` -{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) }} +{{ img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé") }} # Image SVG directement dans le code : ```html @@ -69,35 +71,39 @@ Lorsque vous passez votre souris sur l'image, l'image à comparer s'affiche. - main_src est le chemin et le nom de fichier de l'image par défaut. (obligatoire) - swap_src est le chemin et le nom de fichier de l'image d'échange. (obligatoire) +- class définit une classe pour l'image. (facultatif) +- alt définit la note alt pour l'image. - 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. ** + ## Utilisation (même chemin) ```rs -{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) */}} +{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}} ``` **Sortir** ```html -{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") }} ``` -{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} +{{ 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" w=600 h=400) */}} +{{/* 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" w=600 h=400) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} ``` -{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg") }} ## Utilisation (chemin racine /) ```rs -{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) */}} +{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg") */}} ``` **Sortir** ```html -{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg") }} ``` -{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg") }} diff --git a/content/overview-images/index.md b/content/overview-images/index.md index b1f07e2..cd3181c 100644 --- a/content/overview-images/index.md +++ b/content/overview-images/index.md @@ -20,9 +20,11 @@ This post covers the **imgswap and img shortcodes**. Images can also be embedded - src is the path and filename of the image. (mandatory) - class sets a class for the image. (optional) -- alt sets the alt note for the image. (recommended for google lighthouse) -- w is the width of the image. (recommended for google lighthouse) -- h is the height of the image. (recommended for google lighthouse) +- alt sets the alt note for the image. +- 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. ** ## Usage (same path) ```rs @@ -69,9 +71,13 @@ When you hover your mouse over the image it will display the image to compare. - main_src is the path and filename for the default image. (mandatory) - swap_src is the path and filename for the swap image. (mandatory) +- class sets a class for the image. (optional) +- alt sets the alt note for the image. - 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. ** + ## Usage (same path) ```rs {{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg") */}} -- cgit v1.3.1