From 2d0788c3981328f1fbd9de4274d2925bf9586e03 Mon Sep 17 00:00:00 2001
From: Jieiku
Date: Mon, 22 May 2023 22:39:16 -0700
Subject: Add multi-lingual Support
---
content/overview-images/index.fr.md | 107 ++++++++++++++++++++++++++++++++++++
1 file changed, 107 insertions(+)
create mode 100644 content/overview-images/index.fr.md
(limited to 'content/overview-images')
diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md
new file mode 100644
index 0000000..130b061
--- /dev/null
+++ b/content/overview-images/index.fr.md
@@ -0,0 +1,107 @@
++++
+title = "Codes courts d'image"
+description = "Les images peuvent être intégrées directement à l'aide de markdown ``, mais l'utilisation d'un shortcode empêche CLS en définissant explicitement la largeur et la hauteur."
+date = 2021-05-19
+draft = false
+
+[taxonomies]
+categories = ["Features"]
+tags = ["shortcodes","images"]
+[extra]
+toc = true
+keywords = "Image, Markdown, Shortcodes, Hover"
+thumbnail = "ferris-gesture.png"
++++
+
+Cet article couvre les **shortcodes imghover et img**. Les images peuvent également être intégrées directement à l'aide de markdown ``, mais il est préférable d'utiliser un shortcode afin de pouvoir définir explicitement la largeur et la hauteur, cela aidera à empêcher le changement de mise en page du contenu, ce qui améliore l'expérience utilisateur et le score Google Lighthouse.
+
+
+# img Shortcode
+
+- 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)
+
+## Utilisation (même chemin)
+```rs
+{{/* img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) */}}
+```
+**Sortir**
+```html
+{{ img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) }}
+```
+{{ img(src="ferris-happy.svg" alt="Ferris est heureux" w=600 h=400) }}
+
+## Utilisation (chemin relatif ./)
+```rs
+{{/* img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour" w=600 h=400) */}}
+```
+**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" w=600 h=400) }}
+
+## Utilisation (chemin racine /)
+```rs
+{{/* img(src="/overview-rich-content/ferris.svg" alt="Ferris le Rustacé" w=600 h=400) */}}
+```
+**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é" w=600 h=400) }}
+
+# Image SVG directement dans le code :
+```html
+
+```
+
+
+
+# imghover Shortcode
+
+La première image du tableau src est celle comparée à toutes les autres.
+
+Lorsque vous passez votre souris sur une image, celle-ci affiche l'image à comparer.
+
+Cela peut être utilisé pour comparer une seule image avec une autre en passant seulement deux src dans le tableau.
+
+- src est un tableau de chemins et de noms de fichiers pour les images. (obligatoire)
+- w est la largeur de l'image.
+- h est la hauteur de l'image.
+- p est la taille en pourcentage que vous souhaitez que l'image utilise sur la page. (50 est la valeur par défaut)
+
+*w et h ne sont utilisés que pour calculer le rapport d'aspect, la taille globale est définie par p*
+
+## Utilisation (même chemin)
+```rs
+{{/* imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) */}}
+```
+**Sortir**
+```html
+{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }}
+
+## Utilisation (chemin relatif ./)
+```rs
+{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}}
+```
+**Sortir**
+```html
+{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }}
+
+## Utilisation (chemin racine /)
+```rs
+{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}}
+```
+**Sortir**
+```html
+{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }}
+```
+{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }}
--
cgit v1.3.1