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
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.
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)
{{img(src="ferris-happy.svg" alt="Ferris est heureux")}}
Sortir
<imgsrc="ferris-happy.svg"alt="Ferris est heureux"width="600"height="400"loading="lazy"/>
Utilisation (chemin relatif ./)
{{img(src="./img/ferris-gesture.svg" alt="Ferris dit bonjour")}}
Sortir
<imgsrc="img/ferris-gesture.svg"alt="Ferris dit bonjour"width="600"height="400"loading="lazy"/>
Utilisation (chemin racine /)
{{img(src="/images/ferris.svg" alt="Ferris le Rustacé")}}
Sortir
<imgsrc="https://blog.decentralizedscience.org/images/ferris.svg"alt="Ferris le Rustacé"width="600"height="400"loading="lazy"/>
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 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. **