Cet article prend 7 minutes à lire et comporte 1664 mots.

Ce n'est pas une photo, mais tout un set que vous voulez présenter. Créer une galerie photo est simple, mais toutes n'ont pas le même impact visuel. Laquelle choisir pour quel effet ?

Rien de plus facile que d’intégrer une gale­rie à un article : il suffit de cliquer sur Ajouter un média, puis sur Créer une gale­rie… vous sélec­tion­nez les photos que vous souhai­tez inclure dans la gale­rie, vous cliquez sur Créer une nouvelle gale­rie, choi­sis­sez la taille des images, déci­dez de lier ou non au fichier média ou à la page du fichier joint, d’afficher les images dans un ordre prédé­ter­miné ou aléa­toire… un dernier clic sur Insérer la gale­rie, et c’est terminé.

Ouf ! Je vais à la ligne !

Le résul­tat, c’est une gale­rie de photos, toute simple, pas vrai­ment mises en valeur.

Affichage par défaut d'une galerie de photos
Affichage par défaut d’une gale­rie de photos

Ok, les photos sont là, alignées dans une gale­rie proprette, on ne peut plus mini­ma­liste, et on peut éven­tuel­le­ment cliquer dessus pour affi­cher l’image en grand.

Le thème est le thème par défaut pour WordPress 5, Twenty Nineteen.
J’ai pris un set de photos de chats pour illus­trer cet article. Les mêmes pour chaque gale­rie. La diffé­rence est donc dans la gale­rie, pas dans les photos elles‐mêmes.

Mais il est est quand même possible de faire mieux, beau­coup mieux, très faci­le­ment.

Je vais vous présen­ter quelques exten­sions qui vont vous permettre de donner à vos gale­ries un look un peu plus sexy 😉 Elles sont prévues pour fonc­tion­ner avec Gutenberg – parfois de manière un peu… un peu beau­coup dérou­tante – et, cerise sur le gâteau, elles sont gratuites !

La toute première, on ne la présente pas, on ne la présente plus, il s’agit de…

Jetpack

Oui, la boîte à outils de WordPress, Jetpack, inclut un modèle de gale­rie bien plus avancé que la gale­rie basique que nous venons de mettre en œuvre. Il suffit d’activer le module Mosaïque d’images, et le tout et joué – ou presque.

Pour en savoir plus sur Jetpack et pour l’installer, je vous renvoie à l’article Jetpack – le couteau suisse pour WordPress.

Et en plus, ce n’est pas un type de gale­rie, mais quatre que vous allez gagner.

L’utilisation est vrai­ment intui­tive, d’autres gale­ries gagne­raient à étudier celle‐ci.

Son inté­gra­tion à Gutenberg est un modèle du genre. Tous les modules Jetpack sont dans un onglet Jetpack, qu’on ne peut en aucun cas manquer :

Les modules Jetpack pour Gutenberg
Les modules Jetpack pour Gutenberg

Les gale­ries sont simples à utili­ser, le fonc­tion­ne­ment est le même que celui des gale­ries par défaut de WordPress. Une fois créée, la gale­rie s’affiche en mode WYSIWYG. Et pour modi­fier, c’est à nouveau très bien fait.

Soit on passe par le bloc lui‐même :

Réglages du bloc

Soit on se sert de la barre laté­rale de Gutenberg :

Tiled Galleries - barre latérale de Gutenberg
Tiled Galleries – barre laté­rale de Gutenberg

Que du bonheur, pour un affi­chage à la hauteur dans vos pages et articles. Voici les diffé­rents rendus :

La mosaïque d’images carrées

C’est une présen­ta­tion en grille simple, avec des minia­tures carrées. Le résul­tat est déjà large­ment plus agréable :

Jetpack Tiled Gallery - images carrées
Jetpack Tiled Gallery – images carrées

La mosaïque d’images

Très réussi, les images sont arran­gées et « justi­fiées », vos photos sont vrai­ment mises en valeur :

Jetpack Tiled Gallery - mosaïque par défaut
Jetpack Tiled Gallery – mosaïque par défaut

Mais ce n’est pas tout, il y a aussi…

La mosaïque de colonnes

Au leu d’avoir un arran­ge­ment ligne par ligne, c’est en colonnes que vos photo­gra­phies vont être dispo­sées – l’effet est plutôt bluf­fant :

Jetpack Tiled Gallery - mosaïque justifiée en colonnes
Jetpack Tiled Gallery – mosaïque justi­fiée en colonnes

Pour ma part, c’est – et de loin – la dispo­si­tion que je préfère. Mais il y a aussi, même si elle n’est pas vrai­ment en vogue actuel­le­ment…

La présentation en cercles

Elle peut éven­tuel­le­ment conve­nir à certains sujets, même si je ne vois pas trop lesquels – j’attends vos commen­taires !

Jetpack Tiled Gallery - cercles
Jetpack Tiled Gallery – cercles

Couplé au module Carrousel (toujours dans Jetpack…), vous avez une solu­tion déjà pour affi­cher des gale­ries photo avec un impact visuel bien plus inté­res­sant que la basique gale­rie native de WordPress – et sans bourse délier, ce qui n’est pas rien !

Mais vous souhai­tez peut‐être affi­cher vos photo­gra­phies en grand format, avec PhotoSwipe par exemple (c’est PhotoSwipe qui vous permet voir les images des gale­ries en pleine réso­lu­tion, quand vous cliquez dessus, sur ce blog).

Malheureusement, il n’existe pas – à ma connais­sance – d’extension gratuite permet­tant de coupler les gale­ries Jetpack et PhotoSwipe.

Il y a par contre deux exten­sions qui permettent d’afficher vos images dans un modèle de gale­rie proche de la mosaïque d’images de Jetpack, plus dans l’esprit des murs d’images de Pixabay d’ailleurs, et qui permet leur affi­chage plein écran avec PhotoSwipe ou avec jQuery light­gal­lery, il s’agit de Justified Gallery et de Photonic.

Photonic

Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos, Zenfolio and Instagram

Photonic Gallery & Lightbox for Flickr, SmugMug, Google Photos, Zenfolio and Instagram

Galleries on steroids ! A stylish light­box & gallery plugin for WP, Flickr, SmugMug, Picasa, Google Photos, Zenfolio & Instagram photos and vid …

Sayontan Sinha

Le premier point fort de cette exten­sion, c’est qu’elle permet d’afficher des images en prove­nance d’autres sources : Flickr, SmugMug, Google Photos, Picasa, Zenfolio, Instagram et bien évidem­ment les photos de votre biblio­thèque de médias.

Le deuxième, c’est qu’elle permet de person­na­li­ser le rendu de vos gale­ries, un peu comme Jetpack.

L’inconvénient majeur, c’est qu’elle ne permet pas de déci­der de l’ordre d’affichage, ce qui peut donner des résul­tats fran­che­ment déce­vants.

Second incon­vé­nient : à chaque fois que l’on veut modi­fier une gale­rie, il faut repas­ser par toutes les étapes.

Si vous voulez lier des images externes à votre blog, c’est un must‐have. Sinon, c’est à vous de voir.

Mais le rendu peut être excellent, jugez‐en vous même :

Random Justified Gallery
Random Justified Gallery

La mosaïque n’est pas mal, mais je dirais « peut mieux faire » :

Mosaïque Photonic – 1er essai

Juste en rechar­geant la page, on obtient une autre présen­ta­tion, toujours avec la mosaïque :

Mosaïque Photonic - 2e essai
Mosaïque Photonic – 2e essai

Le rendu de ce mode est donc aléa­toire… du pas mal du tout au bof‐bof.

La présen­ta­tion de type Masonry accepte le nombre de colonnes en argu­ment, ce qui permet de corri­ger la présen­ta­tion quand le rendu n’est pas terrible. Surtout que là, du coup, l’ordre n’est plus aléa­toire 😐

3 colonnes (par défaut), c’est parfois carré­ment vilain :

Masonry 3 colonnes
Masonry 3 colonnes

Mieux vaut 4 colonnes que 3 :

Masonry 4 colonnes
Masonry 4 colonnes

C’est fina­le­ment bien mieux avec 2 colonnes (sans être excep­tion­nel) :

Masonry 2 colonnes
Masonry 2 colonnes

La présen­ta­tion en grille est, on va dire, clas­sique, sans surprise :

Grille

Et pour finir, voici la présen­ta­tion en cercles, diffé­rente de celle propo­sée par Jetpack – mais au final, je n’aime pas ce rendu. Question de goût…

Cercles
Cercles

Pour confi­gu­rer cette exten­sion, rendez‐cous dans le menu laté­ral gauche de WordPress, tout en bas, vous trou­ve­rez Photonic > Settings.

L’écran est un modèle du genre (non, je suis pas sérieux, je fais des cauche­mars à chaque fois que je je vois (là non plus je ne suis pas sérieux, mais quand même, c’est pas terrible)) :

Réglages de Photonic

Vous aurez à choi­sir votre light­box, et à vali­der. Vous avez même le poids de chaque light­box, si vous voulez pous­ser l’optimisation jusqu’au bout. Pensez à addi­tion­ner le poids de chaque élément (javas­cript + CSS + polices éven­tuel­le­ment), le premier chiffre peut vous enduire en horreur induire en erreur.

C’est tout, le reste n’est pas essen­tiel.

Dans Gutenberg, c’est dans Widgets qu’il faudra aller lors du choix de bloc :

Positionnement de Photonic dans les blocs Gutenberg

Vous obte­nez un sublime bloc vide, avec un joli visuel tout de même :

Bloc Photonic dans Gutenberg
Bloc Photonic dans Gutenberg

Cliquez dessus, choi­sis­sez votre source :

Choix de la source
Choix de la source

Choisissez votre source, cliquez sur Next. L’écran suivant permet de choi­sir entre l’affichage des gale­ries atta­chées à l’article et l’affichage d’une gale­rie à créer. Je n’ai pas trouvé à quoi sert la première option. Ceci dit, je ne suis pas un expert en exten­sions de type gale­ries – j’en ai trouvé une qui me convient, je m’y tiens 😉

Troisième écran, le choix des images. Je ne vous fais pas un dessin 😉 Vient ensuite le choix du rendu :

Photonic – Choix du rendu

Faites‐vous plai­sir, choi­sis­sez, cliquez sur Next (vous commen­cez à en avoir l’habitude) – écran réca­pi­tu­la­tif, vous vali­dez, et, là…

Photonic - galerie créée
Photonic – gale­rie créée

Et non, pour voir la gale­rie, il faut passer par la prévi­sua­li­sa­tion ! Et s’il ne vous convient pas, retour à la case départ…

La seconde exten­sion est dédiée aux gale­ries justi­fiées, à la Pixabay, c’est…

Justified Gallery

Justified Gallery

Justified Gallery

WordPress gallery plugin. Display native WordPress galle­ries in a respon­sive justi­fied image grid and a…

Damian Góra

Très simple à instal­ler, à confi­gu­rer, et un masque sur vos images, qui se déplace avec un effet visuel sympa­thique.

Vous trou­ve­rez cette exten­sion en allant dans Extensions > Ajouter, et en saisis­sant Justified Gallery dans le champ en haut à droite. Un clic pour instal­ler, un pour acti­ver… et le tour est joué, il ne reste plus qu’à passer dans Réglages > Justified Gallery pour gérer les options dispo­nibles :

Réglages - Justified Gallery
Réglages – Justified Gallery

Le rendu est à la hauteur :

Galerie de photos avec Justified Gallery
Galerie de photos avec Justified Gallery

La créa­tion de gale­rie s’effectue en utili­sant le module par défaut de WordPress, avec la biblio­thèque de médias, très intui­tive donc.

Le carrousel dfactory et son extension pour PhotoSwipe

Basée en Pologne, cette web agency propose des exten­sions, la plupart gratuites, régu­liè­re­ment mises à jour, pour la gestion de vos images (mais pas que, il faudrait peut être que je présente l’ensemble de leurs exten­sions dans un article…).

La première exten­sion, Responsive Lightbox,fonc­tionne avec Jetpack – et gère l’affichage de vos photo­gra­phies avec SwipeBox, prettyPhoto, FancyBox, Nivo Lightbox et Image Lightbox. De quoi satis­faire la majo­rité des utili­sa­teurs.

De plus, Responsive Lightbox permet d’afficher les images seules dans une light­box, ce qui n’est pas le cas de toutes les exten­sions que j’ai pu tester.

Et pour ceux qui veulent à tout prix PhotoSwipe, il y a un add‐on à cette exten­sion…

PhotoSwipe Lightbox

Cette exten­sion n’est pas gratuite, elle est propo­sée avec une licence à 19$ pour une utili­sa­tion sur un blog (29$ pour 5 sites et 69$ pour l’utiliser sur autant de sites que vous le souhai­tez).

Mais PhotoSwipe Lightbox s’intègre dans Responsive Lightbox pour vous offrir la seule exten­sion PhotoSwipe utili­sable avec Jetpack et ses mosaïques.

Responsive Lightbox avec PhotoSwipe
Responsive Lightbox avec PhotoSwipe

Et les réglages de l’extension sont acces­sibles depuis Responsive Lightbox :

Réglages de l'extension PhotoSwipe Lightbox
Réglages de l’extension PhotoSwipe Lightbox

En conclusion

J’ai passé des heures à cher­cher l’extension parfaite pour affi­cher une gale­rie photo – elle n’existe pas. Il y a toujours un compro­mis à faire – ou alors, il faut mettre les mains dans le cambouis code.

Jetpack ne propose pas nati­ve­ment d’effet au survol de la souris, Justified Gallery se limite à un affi­chage en lignes, et la meilleure solu­tion n’est pas tout à fait gratuite. Mais au moins, il existe des solu­tions satis­fai­santes, pour mettre en valeur vos gale­ries, gratui­te­ment ou pour un coût fina­le­ment très raison­nable.

Et vous, utili­sez vous une exten­sion pour mettre en valeur vos gale­ries ? Connaissez‐vous d’autres exten­sions pour valo­ri­ser une gale­rie de photos ?

Si vous avez trouvé une faute d’orthographe, veuillez sélec­tion­ner le texte en ques­tion et appuyer sur Ctrl + Entrée.

Besoin d'aide ?

Découvrez mes forfaits installation

4 réflexions sur “Des extensions gratuites pour créer une galerie photo attrayante”

  1. J’avoue que j’ai long­temps hésité entre des photos à la présen­ta­tion plus « pratique » et la gale­rie photo.
    Mais je trouve que la gale­rie ne présente pas forcé­ment tres bien sur mobile…

    1. Oui Lætitia, toutes les gale­ries ne sont pas égales (niveau rendu) sur mobile. Mais une gale­rie bien faite (jetpack ou justi­fied gale­ries par exemple) mettent les images les unes à la suites des autres, avec une largeur de 100% donc, ce qui évite d’avoir des images trop petites.

      Ceci‐dit le point se discute, une image seule va béné­fi­cier de sa propre légende, peut avoir un texte expli­ca­tif en dessous (ou en dessus), avec la possi­bi­lité de la mettre en plein écran via une exten­sion telle que Photoswipe Masonry par exemple, qui rend très bien sur mobile.

      Tout dépend du contenu du site (diffi­cile de ne pas faire avec une gale­rie dans un article présen­tant des photos de voyage par exemple), du nombre de photos présen­tées, du rédac­teur / de la rédac­trice… comme je le dis en conclu­sion, la gale­rie parfaite n’existe pas, « il y a toujours un compro­mis à faire ».

  2. Merci pour cet article vrai­ment inté­res­sant. J’avais déjà entendu parler de Jetpack mais il n’était pas compa­tible avec les versions récentes de WP. Des mises à jour ont été faites et il fonc­tionne désor­mais jusqu’à la version 4.6 ; du coup, je suis tentée de l’installer car les mosaïques sont belles et rendent très bien sur l’exemple des chats.

    1. Disons que Jetpack a toujours eu ses admi­ra­teurs… et ses détrac­teurs. Je l’utilise depuis long­temps et j’en suis très satis­fait. D’autres ne veulent même pas en entendre parler et vont le déni­grer.

      Il faut quand même consi­dé­rer que c’est une exten­sion produite par les créa­teurs de WordPress, qui s’intègre parfai­te­ment avec, mise à jour régu­liè­re­ment, et qui rend d’énormes services (mosaïques d’images, CDN avec Photon, protec­tion contre les attaques, statis­tiques, etc.).

      Et merci pour ton commen­taire, et pour ton compli­ment quant aux gale­ries qui illus­trent l’article !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *