|balise_img

Le filtre |balise_img génère un tag image complet à partir de l’url relative d’un fichier imageou d’une balise image déjà formée.

Utilisation

[(#CHEMIN{monimage.png}|balise_img)]

produira le tag :

<img src="le_rep/monimage.png" alt="" width="180" height="56">.

Le filtre |balise_img s’applique à un fichier JPG, PNG ou GIF et à partir de SPIP 3.3, il peut également
-  s’appliquer aux fichiers .SVG
-  s’appliquer à une balise <img> déjà formée, par exemple issue d’un filtre image : [(#FICHIER|image_reduire{200,200}|balise_img{'un nuage','spip_logo'})]

Paramètres optionnels

  • alt texte alternatif ; une valeur nulle pour explicitement ne pas avoir de balise alt sur l’image (au lieu d’un alt vide)
  • class null par defaut (ie si img est une balise, son attribut class sera inchangé. pas de class insérée
  • size permettant de spécifier la taille du rendu - à partir de SPIP 3.3.
[(#CHEMIN{monimage.png}|balise_img{paysage, spip_doc})]

produira le tag : <img class="spip_doc" src="le_rep/monimage.png" width="180" height="56" alt="paysage">.

À partir de SPIP 3.3, le dernier argument size permet de forcer la taille. Cet argument peut prendre plusieurs formes :

-  `x1.5`, `x2` ou `x3` permet de forcer une densité de 1.5, 2 ou 3 (le x est ici le multiplicateur de densité par rapport a la taille initiale). Une image de largeur 200px affichée avec un `x2` aura donc un attribut width='100'.

-  Un nombre seul comme `64` pour forcer une image carrée avec width='64' height='64'

-  Une largeur ET une hauteur sour la forme `1024x640` pour avoir un width='1024' height='640'

-  Une largeur seule et une hauteur automatique sous la forme 1024x* pour avoir donc un width='1024' et un height ajusté automatiquement pour respecter les proportions initiales de l’image.

Pour faciliter l’utilisation du filtre, l’argument de taille (optionnel) arrive toujours en dernier, même si on ne precise pas de alt ou de class :

[(#FICHIER|balise_img{1024x640})]
[(#FICHIER|balise_img{'un nuage',1024x640})]
[(#FICHIER|balise_img{'un nuage','spip_logo',1024x640})]

Mais si jamais le alt ou la class sont ambigu et peuvent être interprétés comme une taille, il suffit d’indiquer une taille vide pour lever l’ambiguité : [(#FICHIER|balise_img{'un nuage','x2',''})]

Le filtre peut donc ainsi facilement être utilisé pour ajuster l’affichage d’image en x2 ou x3 pour prendre en compte les écrans rétina : [(#FICHIER|image_reduire{400,400}|balise_img{'Mon image HD',x2})]

Remarques

-  L’emploi d’un paramètre x2 pour la densité de l’image force, quoiqu’il arrive, une double taille même si l’écran n’est pas HD. Ça ne remplace donc pas les plugins spécialisés (adaptive_image et image_responsive par ex), mais ça les complète pour gérer par exemple des petites images de décoration ou des pictogrammes png : il suffit de fournir le pictogramme en 64px et on l’affiche en 32px pour qu’il soit de bonne qualité partout.

-  Pour les images SVG, ce filtre permet de contrôler la taille d’affichage indépendamment de la taille par défaut inscrite dans le fichier.

Voir aussi

Les balises

les filtres

Auteur cam.lafit, peetdu Publié le : Mis à jour : 19/03/21

Traductions : català, English, français, Nederlands