Avec ParoiCMS, le code d'un template peut librement recadrer et redimensionner les images de l'utilisateur. Pour cela, on utilise le tag useImage. Par exemple :
ParoiCMS
{% useImage img1 uid: doc.featuredImage.uid size: "200x50" %}Explications :
img1 est le nom de la variable produite par le tag.uid reçoit l'identifiant de l'image.size indique la taille que l'on souhaite récupérer.Inspectons le résultat :
{{ img1 | info }}
Avec un pixel ratio de 1.5, cela produit une image de 300 par 75 pixels physiques, destinée à être affichée sur 200 par 50 pixels logiques.
À propos du pixel ratio, voir aussi la documentation : Définir le pixel ratio du ParoiCMS
Voici comment créer une balise <img> avec notre variable img1 :
<img
src="{{ img1.url }}"
width="{{ img1.width }}"
height="{{ img1.height }}"
alt=""
loading="lazy">
Et si on relance avec une taille "50x200", on obtient :
Il est également possible de laisser une dimension libre. Par exemple, la taille "200x" créera une image de 200 pixels logiques de largeur avec une hauteur calculée pour conserver le ratio de l'image originale. Par exemple, si l'utilisateur upload depuis le back-office une image carrée de 1000 pixels sur 1000 pixels, le résultat sera aussi une image carrée avec une largeur de 200 pixels logiques (donc 300 pixels physiques après application du pixel ratio).
Il existe enfin une syntaxe pour définir la dimension la plus grande et calculer la plus petite : ainsi, la taille x100x garantit que, quelle que soit l'image donnée par l'utilisateur, la largeur ou la hauteur ne peut excéder 100 pixels. L'autre dimension sera calculée pour respecter le ratio de l'image originale.
Récapitulons les syntaxes des tailles d'images :
200x50 produit une image respectant les contraintes en redimensionnant puis en croppant l'image originale.200x redimensionne une image à 200 pixels logiques de largeur, avec une hauteur qui dépend de l'image originale.x50 redimensionne une image à 50 pixels logiques de hauteur, avec une largeur qui dépend de l'image originale.x100x redimensionne le côté le plus grand à 100 pixels logiques et calcule l'autre dimension en fonction de l'image originale.Les images originales sont stockées dans la base des médias. Les images produites par useImage sont quant à elles stockées dans le fichier de cache des images. Elles sont générées à la demande, au moment où le template s'exécute. Elles sont périssables et peuvent être régénérées.