From 729f7cda12340aabce5d0faab8d306b5e0d59568 Mon Sep 17 00:00:00 2001 From: Jieiku Date: Wed, 9 Aug 2023 18:44:31 -0700 Subject: imghover > imgswap, reduce complexity, fix CSP --- content/overview-images/index.fr.md | 36 ++++++++++++++++-------------------- 1 file changed, 16 insertions(+), 20 deletions(-) (limited to 'content/overview-images/index.fr.md') diff --git a/content/overview-images/index.fr.md b/content/overview-images/index.fr.md index 130b061..9a68006 100644 --- a/content/overview-images/index.fr.md +++ b/content/overview-images/index.fr.md @@ -9,11 +9,11 @@ categories = ["Features"] tags = ["shortcodes","images"] [extra] toc = true -keywords = "Image, Markdown, Shortcodes, Hover" +keywords = "Image, Markdown, Shortcodes, Swap" 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 `![Ferris](ferris.svg)`, 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. +Cet article couvre les **shortcodes imgswap et img**. Les images peuvent également être intégrées directement à l'aide de markdown `![Ferris](ferris.svg)`, 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 @@ -61,47 +61,43 @@ Cet article couvre les **shortcodes imghover et img**. Les images peuvent égale -# imghover Shortcode +# imgswap Shortcode -La première image du tableau src est celle comparée à toutes les autres. +Par défaut, main_src est l'image affichée, swap_src est affiché au survol de la souris. -Lorsque vous passez votre souris sur une image, celle-ci affiche l'image à comparer. +Lorsque vous passez votre souris sur l'image, l'image à comparer s'affiche. -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) +- 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) - 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) */}} +{{/* imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) */}} ``` **Sortir** ```html -{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} ``` -{{ imghover(src=["ferris.svg", "ferris-gesture.svg", "ferris-happy.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="ferris.svg" swap_src="ferris-happy.svg" w=600 h=400) }} ## Utilisation (chemin relatif ./) ```rs -{{/* imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) */}} ``` **Sortir** ```html -{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} ``` -{{ imghover(src=["./img/ferris.svg", "./img/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="./img/ferris.svg" swap_src="./img/ferris-gesture.svg" w=600 h=400) }} ## Utilisation (chemin racine /) ```rs -{{/* imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) */}} +{{/* imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) */}} ``` **Sortir** ```html -{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} ``` -{{ imghover(src=["/overview-rich-content/ferris.svg", "/overview-rich-content/ferris-gesture.svg"] w=600 h=400 p=45) }} +{{ imgswap(main_src="/overview-rich-content/ferris.svg" swap_src="/overview-rich-content/ferris-gesture.svg" w=600 h=400) }} -- cgit v1.3.1