Créer une galerie d'images

Dans cet article nous allons voir comment créer une galerie d'images à l'aide de miniatures qui s'agrandissent dans une boite lumineuse des plus moderne lorsque l'on clique dessus. C'est assez simple, juste de quoi découvrir l'insertion d'images depuis l'éditeur tel écran-tel écrit ainsi que les fonctionnalités de mise à l'échelle des images.

Commençons donc par créer la page qui va accueillir notre galerie d'images.

Une nouvelle page pour notre galerie

Pour créer une page, on se rend dans la section "Structure", et dans l'onglet "Pages" on clique sur "Nouveau". Un formulaire pour créer la page apparait, on commencera par renseigner le titre de notre page : "Galerie d'image".

Insérer une image dans l'éditeur tel écran-tel écrit

Plus bas dans le formulaire se trouve la section "Contenu", elle devrait présenter les contenus éditables dans le gabarit, et en général un éditeur tel écran-tel écrit pour le corps de la page. Il est possible que le gabarit définisse un autre type d'éditeur, dans ce cas on sélectionnera "HTML WYSIWYG" dans le menu "Éditeurs" pour en changer.

Pour insérer une image à la position courante du curseur on clique sur l'icône représentant un arbre majestueux grâce à l'illusion stupéfiante de quelques pixels.

Le sélecteur d'image apparait alors, présentant une mosaïque des dernières images crées ou modifiées depuis le module "Images". Si l'on connait le nom de notre image, on peut utiliser la zone de rechercher pour la retrouver en un instant, sinon on peut toujours parcourir le catalogue d'images grâce à la pagination.

Vous avez peut-être remarqué une curieuse encoche et haut à droite du sélecteur, elle dévoile les options qui nous serviront à transformer nos images en miniatures lorsque l'on clique dessus.

Paramétrer les options de la miniature

Pour chaque image, on peut définir les dimensions de sa miniature, ainsi que la méthode de redimensionnement (parmi huit méthodes fantastiques), le format de l'image ainsi que la qualité de la compression (pour le format JPEG). On trouvera aussi quelques options sympathiques dont "Afficher l'original en lihtbox" qui va faire de nos miniatures une galerie d'images interactive incroyable, et rien que pour cela on lui pardonnera son anglicisme.

Et voici le résultat de tous nos efforts, une première miniature. Célébrons-la, mais ne nous arrêtons pas en si bon chemin.

Créer la galerie

Parce que les options des miniatures sont conservées, on va pouvoir ajouter d'autres images sans avoir à paramétrer leur miniature, elles utiliseront simplement les options précédentes.

C'était facile. Il ne nous reste plus qu'à enregistrer notre page et à l'afficher pour voir le résultat.

Quel résultat !

Le résultat et superbe et pourtant il ne nous a fallu qu'une paire de minutes, finalement le plus dur sera sans doute de choisir les images à mettre dans notre galerie.

Aller plus loin

Comme nous l'avons vu, créer une galerie d'image ce n'est pas bien compliqué, et cela peut-être encore plus simple grâce au module "Diaporama", dont nous découvrirons les fonctionnalités dans un prochain article, alors à bientôt !