Using
[(#CHEMIN{myimage.png}|balise_img)]
will produce the tag :
<img src="the_dir/myimage.png" alt="" width="180" height="56">
The |balise_img filter can be applied to a JPG, PNG or GIF file and, from SPIP 4.0, it can also be used to
- apply to .SVG files
- apply to a <img> tag that has already been formed, for example from an image filter :
[(#FICHIER|image_reduire{200,200}|balise_img{'un nuage','spip_logo'})]
Optional parameters
-
altalternative text; a null value for explicitly not having an alt tag on the image (instead of an empty alt) -
classnull by default (ie if img is a tag, its class attribute will be unchanged. no class inserted) -
sizeallowing you to specify the rendering size - from SPIP 4.0.
[(#CHEMIN{monimage.png}|balise_img{paysage, spip_doc})]
will generate the tag :
<img class="spip_doc" src="le_rep/monimage.png" width="180" height="56" alt="paysage">
From SPIP 4.0 onwards, the last size argument can be used to force the size. This argument can take several forms:
- The x1.5, x2 or x3 attribute can be used to force a density of 1.5, 2 or 3 (the x here is the density multiplier in relation to the initial size). A 200px wide image displayed with a x2 will therefore have a width='100' attribute.
- A single number like 64 to force a square image with width='64' height='64'.
- A width AND a height in the form 1024x640 to get a 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.
To make the filter easier to use, the size argument (optional) always comes last, even if you don’t specify alt or class :
[(#FICHIER|balise_img{1024x640})]
[(#FICHIER|balise_img{'a cloud',1024x640})]
[(#FICHIER|balise_img{'a cloud','spip_logo',1024x640})]
But if the alt or class are ever ambiguous and can be interpreted as a size, simply indicate an empty size to remove the ambiguity:
[(#FICHIER|balise_img{'a cloud','x2',''})]
The filter can therefore easily be used to adjust the image display by x2 or x3 to take account of retina screens:
[(#FICHIER|image_reduire{400,400}|balise_img{'My image HD',x2})]
Notes
- The use of a x2 parameter for the image density forces a double size even if the screen isn’t HD. So it doesn’t replace the specialist plug-ins (adaptive_image and image_responsive, for example), but it complements them to manage small decorative images or png pictograms, for example: all you have to do is supply the pictogram in 64px and it will be displayed in 32px so that it looks good everywhere.
- For SVG images, this filter lets you control the display size independently of the default size entered in the file.
See also
Tags
Filters