[SPIP 1.9 et GD2] On veut recadrer toutes les vignettes de documents (pour la navigation dans un portfolio par exemple), c’est-à-dire en forcer les dimensions.

Le filtre reduire_image permet, en donnant une des valeurs, de forcer toutes les images à une certaine hauteur (idéal pour un alignement horizontal, les vignettes les unes à côté des autres), ou à une certaine largeur (pour un alignement vertical, les vignettes les unes sous les autres). Nous voulons aller plus loin et forcer la hauteur et la largeur en même temps.

Nous allons pour cela utiliser le filtre image_masque de SPIP 1.9. Ce filtre ne fonctionne que si GD2 est présent sur le serveur (c’est désormais le cas sur la plupart des hébergeurs).

Voici une image installée en tant que document joint à un article (c’est la méthode pour réaliser un portfolio) :

Nous avons installé, dans le même dossier que notre squelette (par exemple dans le dossier /squelettes), l’image PNG suivante :

Les caractéristiques de cette image sont les suivantes :
— c’est une image sauvegardée au format PNG 24 ;
— ses dimensions sont exactement les dimensions que nous visons pour notre recadrage ; ici, nous voulons des vignettes carrées après recadrage ;
— elle est entièrement remplie de gris à 50% ;
— elle n’a aucune transparence ;
— nommons ce fichier mon-masque.png (rappel : nous l’installons dans le dossier du squelette).

Nous pouvons ensuite créer une boucle pour afficher nos documents joints :

(Nous omettons ici les critères permettant de sélectionner uniquement les images parmi les documents joints ; si vous prévoyez d’installer d’autres formats que des images, il faut ajouter les critères pertinents.)

Ce filtre va ainsi s’appliquer à chaque image attachée à l’article.

Dans un premier temps, l’image (le bâtiment) est réduite de telle manière à adopter une des dimensions de l’image, l’autre dimension « dépassant ». Ensuite, les zones qui « dépassent » sont simplement supprimées.

Nous obtenons l’image finale ayant exactement les dimensions du fichier mon-masque.png.

N.B. Nous avons appliqué le filtre directement sur la balise #FICHER du document joint, et non sur une vignette. Il est en effet impératif que le document auquel on applique le filtre soit plus grand que le masque (ce qui, avec les vignettes déjà réduites, n’est pas garanti).

N.B.2. Ce genre de recadrage automatique est essentiellement destiné à créer des vignettes de navigation. L’effet s’applique en effet au centre de l’image, donc il y a toujours le risque de couper un élément intéressant de la photo, ce qui est acceptable sur des vignettes de navigation, mais pas sur des grandes images.

N.B.3. Dans notre exemple, nous avons pris un masque carré. Mais on peut très bien imaginer, selon les besoins de l’interface graphique, systématiquement recadrer avec un masque quatre-tiers (façon télévision), ou seize-neuvièmes pour évoquer un écran de cinéma (ou de PSP).