Créer une galerie d’images avec une dimension préétablie

Créer une galerie d’images n’est pas compliqué grâce aux fonctionnalités graphiques et rédactionnels de SPIP.

1. SPIP permet d’envoyer depuis la rédaction plusieurs images d’un seul coup à travers l’utilisation d’archives zip. Il suffit de zipper toutes les images, de les envoyer au serveur et de demander d’ajouter son contenu au portfolio.
2. SPIP est en mesure de générer des miniatures automatiquement pour les images envoyées. Donc après avoir préparé la boucle pour montrer nos images dans le modèle de l’article, le jeu est fait.

Toutefois l’œil aussi en veut pour son compte, et si les images sont toutes de dimensions diverses, le rendu final ne sera pas toujours convaincant. On pourrait donc penser à créer une galerie dans laquelle les miniatures seraient toutes de dimensions égales mais cela comporte une certaine quantité de travail supplémentaire.

En effet retailler les images à la main pour obtenir des dimensions uniforme est un travail long ennuyeux pour l’administrateur ou l’auteur de la galerie.
En outre, en taillant les images, on pourrait perdre des détails importants, ce qui n’est pas toujours acceptable.

Et si SPIP pouvait présenter aux navigateurs des miniatures qui soient toutes de même dimension, tout en permettant en même temps de visualiser les images complètes, nous aurions résolu tous les problèmes, et sans perdre une seconde pour préparer les images avant de les envoyer à la rédaction, fantastique !

Très bien mais comment fait-on ?
En utilisant les fonctions fantastiques de manipulation des images de SPIP et un peu d’astuces.

L’idée est de redimensionner les images autant qu’il suffit pour les faire rentrer dans la boite de la taille désirée, de façon à ce que leur hauteur ou leur largeur occupe totalement la longueur ou la largeur de la boite même.
Donc tailler la partie de l’image qui sort de la boite, en ayant la perspicacité de montrer la partie centrale d’habitude la plus intéressante.

Pour mieux comprendre le procédé, il s’agit de tailler deux bandes de dimensions égales à partir des images situées en haut et en bas ou à gauche et à droite sur la base des proportions de l’image même et à celle de la miniature désirée.

La première chose à faire est d’évaluer le rapport entre la hauteur de l’image et la hauteur de la miniature désirée, puis de faire la même chose pour la largeur. Les rapports ainsi obtenus, nous indiquerons sur lequel des deux axes nous effectuerons la coupe (en hauteur, nous taillerons alors deux bandes en haut et en bas, ou en largeur et donc les bandes à droite et à gauche)

Supposons que nous voulions obtenir des miniatures 115x115 :

  <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
          #SET{ratio_x,#LARGEUR|div{115}}
          #SET{ratio_y,#HAUTEUR|div{115}}
  </BOUCLE_img>

Nous avons créé une boucle sur les images dans le portfolio et nous avons calculé les rapports entre la largeur de l’image et de la miniature(ratio_x), puis la même chose pour la hauteur (ratio_y) que nous allons mémoriser dans deux variables, justement ratio x et ratio y avec la balise #SET.

Maintenant nous allons redimensionner autant qu’il suffit notre image afin que la miniature montre la plus grande portion possible de l’image originale.
Nous ajoutons là :

  <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
          #SET{ratio_x,#LARGEUR|div{115}}
          #SET{ratio_y,#HAUTEUR|div{115}}
          #SET{ratio,#GET{ratio_x}|<={#GET{ratio_y}}|?{#GET{ratio_x},#GET{ratio_y}}}
          [(#FICHIER|image_reduire_par{#GET{ratio}})]
  </BOUCLE_img>

Nous avons calculé le minimum entre les rapports ratio_x et le ratio_y et nous l’avons mémorisé dans la variable ratio puis nous avons redimensionné l’image originale justement de la valeur ratio pour obtenir une miniature avec la hauteur ou la largeur égale à 115, sur la base de ces proportions originales.

Il ne reste plus qu’à couper les bandes superflues de la miniature et de montrer l’image.

  <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
          #SET{ratio_x,#LARGEUR|div{115}}
          #SET{ratio_y,#HAUTEUR|div{115}}
          #SET{ratio,#GET{ratio_x}|<={#GET{ratio_y}}|?{#GET{ratio_x},#GET{ratio_y}}}
          [(#FICHIER|image_reduire_par{#GET{ratio}}|image_recadre{115,115,center})]
  </BOUCLE_img>

Le filtre graphique image_recadre fait justement cela : il retaille l’image en la mettant aux dimensions voulues (115 x 115), en en montrant que la partie centrale (center).

En dernier nous créons un lien vers l’image complète :

 <BOUCLE_img(DOCUMENTS){id_article}{mode=document}{extension IN 'jpg,png,gif'}>
         #SET{ratio_x,#LARGEUR|div{115}}
         #SET{ratio_y,#HAUTEUR|div{115}}
         #SET{ratio,#GET{ratio_x}|<={#GET{ratio_y}}|?{#GET{ratio_x},#GET{ratio_y}}}
         [<a href="#FICHIER">(#FICHIER|image_reduire_par{#GET{ratio}}|image_recadre{115,115,center})</a>]
 </BOUCLE_img>

Nous avons fini :)

Maintenant nous ne devons plus nous préoccuper de rien sinon d’ajouter les images dans le portfolio, et SPIP pense au reste !

Mais si tout cela est vrai, certes, essayez pour y croire.