Tuto complet de Meow Gallery, plugin de galerie d’images WordPress

Vous le savez surement, WordPress propose nativement un bloc “galerie photo” qui permet d’intégrer sur une page une série de photos directement choisie dans la bibliothèque de médias. Si cette fonctionnalité peut faire le job, il faut bien avouer que les possibilités de la galerie native sont très limitées. Certains auront envie ou besoin de modifier l’apparence de la galerie pour lui donner un aspect plus esthétique.

Différence entre les types de plugins de Galeries WordPress

Il existe de nombreux plugins WordPress pour intégrer une jolie galerie photo dans une page.

Le problème est que la plupart d’entre eux utilisent leurs propres options de stockage d’image rendant l’utilisation des galeries d’images assez fastidieuse : Il faut d’abord créer la galerie dans le plugin, puis copier un shortcode qu’on va aller intégrer dans l’article.

Et même si certains plugins utilisent des blocs Gutenberg pour pouvoir les intégrer directement depuis une page, reste qu’il faut d’abord aller créer la galerie d’image dans le plugin. Et répéter cela autant de fois qu’on a de galeries à intégrer. Bref, si on a besoin d’insérer beaucoup de galerie d’images, cela peut devenir très ennuyant.

Pour remédier à ce problème, il existe deux plugins de galerie photo qui utilisent la médiathèque native de WordPress, ce qui facilitent grandement la gestion. Imaginez, on crée une galerie directement depuis une page, on va chercher les photos dans notre bibliothèque d’image et voilà ! Le gain de temps est important.

Le premier d’entre eux est bien sûr le plugin Jetpack et fait partie de la galaxie WordPress. Jetpack est le plugin à tout faire de la firme Automattic, développeurs de WordPress. JetPack entre autres dizaines de choses, propose une option pour améliorer le design des galeries photos appelé “Mosaïque”.

Mais on le sait tous maintenant, Jetpack est une usine à gaz, et il faut bien avouer qu’il est dommage de devoir installer ce plugin si on a juste besoin de la fonctionnalité “Mosaïque”…

C’est là qu’intervient le plugin dont nous allons vous parler aujourd’hui : Meow Gallery. Un plugin WordPress pour intégrer des galeries photos qui utilisent la médiathèque native.

Pourquoi la galerie d’image native de WordPress n’est pas idéale

Voici deux exemples de ce qu’il est possible de faire avec la galerie photo native de WordPress en utilisant le bloc “Galerie”

Nous avons ajouté 5 photos dans la galerie photo native de WordPress, dont une est vertical.

La galerie native de WordPress ne propose que peu d’options de présentation et la principale consiste à choisir si les images sont recadrées ou pas.

On remarque que la version “recadrée” est plus agréable à l’œil, mais que nos photos horizontales ont été forcées au format vertical pour pouvoir “combler les trous”.

Qu’en est-il si l’on veut présenter nos photos sous forme de galerie tout en gardant l’aspect original de nos images ?

La réponse : il faut utiliser un plugin de galerie photo. Ok, mais comment fait-on si on veut garder le côté pratique de pouvoir directement choisir les images de la galerie dans la médiathèque ? On utilise un plugin de galerie qui se sert de la bibliothèque de média WordPress.

Meow Gallery

Meow Gallery a été lancé en 2017 par Jordy Meow. Dans le cadre de son activité de photographe il s’est rendu compte qu’il n’existait pas de plugin de galerie photo qui correspondait à ses attentes. Il a donc décidé de créer le plugin dont il avait besoin.

Le plugin Meow Gallery a été conçu pour fonctionner idéalement avec Gutenberg (mais il est également possible d’utiliser un shortcode pour intégrer des galeries).

Les galeries d’images réalisées avec Meow Gallery sont faciles à configurer puisque utilisant la médiathèque native de WordPress, et responsive (le plugin vient ajouter les attributs srcset et sizes.)

Meow Gallery en résumé

• Lancé en 2017
• +6 000 installations actives
• Note de 5/5
• Plugin régulièrement mis à jour

Les principales fonctionnalités de Meow Gallery

• Bloc Gutenberg
• Shortcode
• Compatible Retina
• Responsive (ajout des attributs srcset et sizes)
• 4 styles de mises en page en version gratuit
• Fonctionne avec la médiathèque
• Fonctionne sans JavaScript

Installer Meow Gallery

Pour installer Meow Gallery, comme pour tous les plugins recensés dans le répertoire des extensions WordPress deux options s’offrent à vous :

Depuis l’administration WordPress

• Rendez-vous dans l’onglet “Extensions”
• Cliquez sur le bouton “Ajouter”
• Tapez “Meow Gallery” dans le répertoire des extensions
• Cliquez “Installer maintenant” sur l’extension Meow Gallery
• Activez l’extension Meow Gallery

Une autre possibilité :

• Rendez-vous sur la page WordPress du plugin Meow Gallery
• Cliquez sur le bouton “Télécharger”
• Retournez dans l’administration WordPress
• Rendez-vous dans l’onglet “Extensions”
• Cliquez sur le bouton “Ajouter”
• Cliquez sur le bouton “Téléverser une extension”
• Uploadez le fichier ZIP Meow Gallery
• Activez l’extension Meow Gallery

Depuis un serveur FTP

• Rendez-vous sur la page WordPress du plugin Meow Gallery
• Cliquez sur le bouton “Télécharger”
• Dézippez le fichier téléchargé
• Ouvrez votre logiciel FTP préféré (exemple : Filezilla)
• Connectez vous à votre espace FTP
• Placez le dossier Meow Gallery dans le dossier FTP /wp-content/plugins

Le plugin est prêt à l’emploi et peut être utilisé en laissant les réglages par défaut dès son installation. Cela dit il est possible de configurer les réglages généraux du plugin et nous allons voir comment s’y prendre.

Un support minimum

Nous attirons votre attention sur le fait que ce plugin ne propose qu’un support minimum. Leur politique en la matière est claire : “Les réponses au support sont généralement apportées uniquement les mardis et samedis” .

Une limite qui peut se comprendre, les développeurs n’étant pas dédié à 100% à ce projet.

Un autre message en dit long sur la philosophie du support : “Si cela prend trop de temps pour vous, vous pouvez toujours demander un remboursement”.

Si notre expérience a été très décevante, le développeur nous a présenté ses excuses en nous expliquant qu’il faisait vraiment le maximum pour répondre à tous les messages mais qu’il était tout seul s’en occuper et que le notre était passé en dehors de ses radars.

Cela dit quand on propose un service payant “Pro”, le support est malheureusement une obligation à laquelle il faut se plier. Ne pas avoir la capacité d’assurer un bon service à ce niveau là est peut être le seul point négatif de ce plugin.

Réglages généraux du plugin Meow Gallery

Pour trouver les réglages généraux du plugin Meow Gallery, rendez-vous sur le tableau de bord WordPress dans l’onglet “Meow Apps > Gallery”.

Vous trouverez dans cette fenêtre quatre onglets :

• Basics : réglages basiques par défaut
• Layout : réglages par défaut des différentes mises en page
• Pro Layouts : réglages des mises en page PRO
• Pro version : pour accéder à la version PRO

Dans l’onglet “Basics” le premier réglage “Layout” concerne le choix de la mise en page par défaut pour les galeries que vous allez intégrer dans vos pages.

Par défaut la galerie est réglée sur la mise en page Tiles. Mais si vous souhaitez un autre style de galerie par défaut c’est ici que cela se passe.

Le réglage suivant “Animation” est réservé à la version PRO. Il permet de choisir le comportement de l’animation des images par défaut.

Dans la partie “UI / Captions” il est possible de choisir comment sont affichées par défaut les légendes de vos images dans la galerie.

En dessous, on trouvera une option réservée à la version PRO permet d’autoriser ou non le clic droit sur les images.

Dans la partie “Optimization / Image Size”, on peut régler la taille des images par défaut. Il est conseillé de laisser le réglage sur “Responsive images” qui ajoute les attributs srcset.

Enfin, dans la partie “Optimization / Infinite & Lazy” on trouve une option réservée à la version PRO qui permet d’activer le défilement infini des images dans la galerie avec un lazy loading.

Pour terminer, rendez-vous sur l’onglet “Layouts” pour modifier les réglages par défaut de chaque mise en page de galerie. Pour chaque mise en page, on trouvera les réglages principaux qui seront également disponibles dans le bloc Gutenberg lorsqu’on intègre une galerie dans une page.

Seul le réglage de la densité d’affichage des images dans la galerie Tiles n’est accessible que depuis l’onglet Layouts et pas dans les réglages du bloc Gutenberg.

Les différentes options d’affichages de Meow Gallery

Reprenons nos 5 photos et voyons ce que nous pouvons faire avec le plugin de galerie WordPress Meow Gallery. L’idée est ici de vous montrer le rendu visuel des galeries et de faire un tour des possibilités et des réglages.

Réglages communs à toutes les galeries Meow Gallery

Les galeries du plugin Meow Gallery viennent avec des possibilités de réglages différents, mais certains sont communs à toutes les galeries.

Ainsi pour chaque galerie il sera possible de :

• Choisir le format de mise en page
• Choisir le comportement au passage de la souris (aucun, lien vers la page du fichier joint, lien vers le média)
• Choisir le dossier Lightroom depuis lequel les images sont utilisées
• Afficher ou non la légende de la photo
• Utiliser les réglages par défaut
• Ajouter des classes CSS personnalisées

Mise en page “Tiles”

C’est la mise en page “star” des galeries photos modernes. La mise en page Tiles s’adapte de façon intelligente aux différents formats des images pour offrir une galerie totalement alignée sans décalages.

Réglages de la mise en page “Tiles”

Dans la mesure où la mise en page “Tiles” s’occupe automatiquement d’aligner les images dans la galerie, le seul réglage principal de la galerie “Tiles” concerne l’espacement entre les images.

Mise en page “Masonry”

La mise en page Masonry est plus compliquée à utiliser, il faut bien penser les formats de ses images pour arriver à un résultat aligné (si c’est ce que l’on cherche). Ci-dessous on voit qu’il y a petit décalage en bas de la photo verticale.

Réglages de la mise en page “Masonry”

Pour cette galerie au format “Masonry” le plugin Meow Gallery offre la possibilité de régler le nombre de colonnes. Associé à la disposition des images verticales ou horizontales, modifier le nombre de colonnes aura pour effet de modifier l’aspect visuel de la galerie.

Mise en page “Justified”

Cette mise en page, comme son nom l’indique, “justifie” toutes les images entre elles en fonction de leur hauteur. Il est possible d’ajuster cette hauteur ce qui aura pour effet de modifier les dispositions des images.

Réglages de la mise en page “Justified”

Dans la galerie “Justified” il est possible de régler la hauteur des lignes d’images. Vous verrez alors vos images se déplacer pour s’adapter à cette hauteur. À voir de choisir la bonne hauteur pour atteindre l’effet visuel souhaité et ne pas laisser une image orpheline en fin de galerie.

Mise en page “Square”

La mise en page Square offre un affichage type “Instagram” avec des images au format carré.

Réglages de la mise en page “Square”

La galerie “Square” permet de régler le nombre de colonnes de 2 à 5 images. Cela aura évidemment pour effet de jouer sur la taille des images affichées.

Mise en page “Cascade”

La mise en page Cascade va afficher vos images les unes en dessous des autres.

Réglages de la mise en page “Cascade”

Dans la galerie “Cascade”, il est simplement possible de jouer sur l’espacement autour de chaque image. Les images seront, dans tous les cas, affichées les unes en dessous des autres.

Impact sur les performances du plugin Meow Gallery

Vous le savez surement, mais plus vous ajoutez des plugins à votre installation WordPress plus vous avez de chance d’alourdir le temps de chargement de vos pages. À ce petit jeu, certains plugins sont plus gourmands que d’autres et on vous conseille de toujours choisir le plugin le plus léger, celui faisant le moins possible appel aux scripts possibles, voir ceux n’en ajoutant pas du tout.

Meow Gallery ne présente comme un plugin “rapide comme l’éclair et optimisé” et qu’il n’utilise de JavaScript que pour les fonctionnalités “infinite/lazy” et le mise en page “Carrousel” (uniquement disponibles dans la version PRO).

Voyons si les résultats sont au niveau des intentions et regardons l’impact de l’installation du plugin Meow Gallery sur les performances.

Condition du test

• Serveurs WP Scale
• WordPress 5.8
• Thème Twenty Twenty One
• Aucun autre plugin installé

Test 1 – Impact sur les performances de l’installation de Meow Gallery

Test réalisé avec l’URL d’un article sans galeries de 1600 mots comprenant 8 images de 1920px (200ko chacune).

	Speed index*	Poids page**	Poids CSS**	Qualité du CSS**	Poids JS**	Requêtes**	Exécution JS**	JQuery utilisé**
Sans plugins	1300ms	79,9kb	35kb	A	6,6kb	9	28ms	Non
JetPack installé***	1500ms	103kb	58,3kb	B	6,6kb	13	27ms	Non
Meow Gallery installé	1500ms	121kb	37,7kb	A	45,2kb	13	47ms	Oui

Test 2 – Impact sur les performances de l’utilisation de Meow Gallery dans une page

Test réalisé avec l’URL d’un article de 1600 mots comprenant 3 galeries de 5 images de 1920px (200ko chacune)

	Speed index*	Poids page**	Poids CSS**	Qualité du CSS**	Poids JS**	Requêtes**	Exécution JS**	JQuery utilisé**
Galerie native	1300ms	454kb	35kb	A	6,6kb	13	39ms	Non
Mosaïque d’images de Jetpack***	1300ms	671kb	60kb	B	22kb	23	74ms	Non
Meow Gallery (Tiled)	1500ms	496kb	37,7kb	A	45,2kb	17	99ms	Oui

Conclusion des tests

On se rend compte qu’évidemment l’impact de l’installation et de l’utilisation de Meow Gallery n’est pas neutre. C’est normal puisque chaque installation d’un plugin va venir ajouter sa petite participation au poids de votre site WordPress.

Là où l’on peut être surpris c’est de voir que même dans sa version gratuite le plugin embarque bien du JavaScript et utilise du JQuery. Alors que selon ce qui été annoncé on aurait pu croire que le JS n’était utilisé que dans le version PRO pour des fonctionnalités absentes dans la version gratuite.

On peut penser que c’est ce qui impacte légèrement la vitesse de chargement de la page. Cela dit on peut considérer que l’impact est minime (200ms).

Au passage on peut être surpris du résultat du plugin JetPack que l’on présente toujours comme une usine à gaz qui plombe un site WordPress. Dans notre cas où l’on utiliserait uniquement la gallerie photo de Jetpack il n’en est rien. Les performances sont identiques voit meilleure que Meow Gallery, exceptés que JetPack semble ajouter un bon paquet de CSS de mauvaise qualité. Quant aux fonctionnalités et au rendu des galeries elles sont identiques.

Meow Gallery Pro

Meow Gallery propose une version PRO ajoutant des fonctionnalités qui pourront en intéresser certains. Vous bénéficierez de l’ajout de deux mises en page de galerie (Carrousel et Map), de nombreux effet d’animation au survol et du chargement infini.

Installer Meow Gallery Pro

Pour installer Meow Gallery Pro, vous allez tout d’abord devoir télécharger le fichier ZIP depuis votre compte client Meow Apps puis l’uploader dans vos extensions WordPress.

• Supprimer la version gratuite : si vous avez déjà la version gratuite de Meow Gallery, on vous conseille tout d’abord de désactiver le plugin, puis de le supprimer, depuis l’onglet “Extension” de l’administration WordPress.
• Dans l’onglet “Extensions” cliquez sur le bouton “Ajouter”
• Cliquez sur le bouton “Téléverser une extension”
• Uploadez le fichier ZIP Meow Gallery Pro
• Activez l’extension Meow Gallery Pro

Comme pour la version gratuite, vous pouvez également uploader directement le fichier ZIP de la version Pro dans le dossier /wp-content/plugins via votre client FTP. Puis allez l’activer dans l’onglet “Extensions” de votre administration WordPress.

Réglages généraux du plugin Meow Gallery Pro

Si vous optez pour la version Pro du plugin, vous allez donc débloquer les fonctionnalités affichées “Pro Only” dans la version gratuite. Vous pouvez donc vous diriger dans l’onglet des réglages généraux de Meow Gallery pour accéder aux différentes options suivantes :

• Réglages par défaut de la galerie “Carrousel”
• Réglages par défaut de la galerie “Maps”
• Activer la fonction chargement infini
• Activer la fonction “clique droit”
• Activer les animations par défaut

Réglages par défauts des deux galeries Pro

Dans l’onglet “Pro Layouts” vous trouverez les réglages des deux mises en page de galerie ajoutées par Meow Gallery Pro.

À gauche, les réglages de la galerie “Carrousel” qui vous permet de choisir les options par défaut pour l’espace entre les images, la hauteur du slider, et si vous souhaitez afficher ou non les boutons de navigation (flèches sur les côtés et points en dessous des images).

À droite, on retrouve les réglages de la galerie “Map” qui permet d’afficher vos images dans une carte interactive. Ici vous pouvez définir quel moteur de carte vous souhaitez utiliser. Pour chacune des cartes disponibles, il faudra aller obtenir un “token”, autrement appelé “jeton”, autrement dit la clef API qui permettra de faire fonctionner l’affichage de la carte sur votre site. Enfin, vous pourrez choisir la hauteur de la carte et appliquer un style pour modifier l’apparence de la carte.

Activer les options Pro

En plus des deux galeries, vous pourrez activer les options de chargement infini et de clique droit. Pour se faire direction l’onglet “Basics”.

Définir les animations par défaut

Toujours dans l’onglet “Basic” vous pour choisir le type d’animation par défaut appliqué aux galeries. Bien sûr comme pour tous les réglages par défaut il est possible de les “contourner” de façon individuelle depuis le bloc Gutenberg ou le shortcode.

Entrons un peu plus dans le détail des fonctionnalités proposées par la version Pro de Meow Gallery.

Mise en page “Carrousel” (Slider)

Il s’agit du traditionnel “slider” qui affichera vos images sous la forme d’un carrousel à faire défiler soit par l’utilisation des flèches soit par l’utilisation des petits points en dessous du diaporama.

Réglages de la mise en page “Carrousel”

Dans les réglages de la galerie “Carrousel” il sera principalement possible de régler l’écart entre les images dans le slider. Bien sûr, comme pour les autres galeries, les animations sont accessibles avec la version Pro.

Mise en page “Map” (Carte interactive)

Cette mise en page vous permet d’afficher vos images sur une carte interactive. La carte utilise les coordonnées GPS renseignées dans les Exifs de vos images pour les localiser sur la carte.

Différents formats de cartes sont disponibles :

• Google Map
• MapBox
• MapTiler
• OpenStreetMap

Attention pour pouvoir utiliser cette galerie “Map”, plusieurs prérequis :

• Avoir les coordonnées GPS renseignées dans les Exifs des images
• Ne pas avoir de plugin qui supprimer les Exifs
• Ne pas avoir de serveur qui bloque les Exifs
• Avoir une clef API permettant d’utiliser l’un des moteurs de carte. Pour info si vous souhaitez utiliser Google Map il faudra aller jusqu’à renseigner une carte bancaire pour pouvoir l’utiliser.

Réglages de la mise en page “Map”

Pour la galerie Map il n’y a pas de réglages spécifiques au niveau du bloc. Vous y retrouverez les réglages habituels disponibles pour les autres galeries.

Chargement infini

Le chargement infini est intéressant si vous avez des galeries avec beaucoup d’images. Cela vous permet d’afficher juste une partie de vos images et laisser le chargement infini s’occuper de dévoiler le reste de vos images au fur et à mesure du défilement de la page.

Animations au survol

C’est une des fonctionnalités attendues avec la version Pro. Les animations au survol permettent d’ajouter de la vie à vos galeries. Comme on l’a vu vous pouvez régler l’animation par défaut depuis les réglages généraux, mais vous pouvez également choisir l’animation de façon individuelle pour chaque galerie.

• Défaut : pas d’animation ou animation choisies par défaut dans les réglages généraux.
• Zoom Out
• Zoom In
• Fade Out : applique un léger voile clair sur l’image au survol de la souris
• Fade In : applique un léger voile clair sur toute la galerie qui disparait au survol de la souris
• Colorize : applique un filtre noir et blanc sur toute la galerie qui disparait au survol de la souris
• Highlight : applique un léger voie sombre sur toute la galerie qui disparait au survol de la souris

Voici un petit Gif pour vous donner une idée de ce que l’on entend par effet au survol de la souris.

Tarifs de la version PRO de Meow Gallery

• Starter (1 site) : $19/an (mises à jour et support)
• Standard (5 sites) : $24/an (mises à jour et support) ou $69 à vie (mise à jour à vie mais support uniquement pour 1 an)
• Professional (20 sites) : $32/an (mises à jour et support) ou $149 à vie (mise à jour à vie mais support uniquement pour 1 an)
• Developer (500 sites) : $199 à vie (mise à jour à vie mais support uniquement pour 1 an)
• Agency (2500 sites) : $299 à vie (mise à jour à vie mais support uniquement pour 1 an)

RAPPEL SUPPORT : Nous vous rappelons ici le support proposé par le plugin Pro est limité par le fait qu’une seule personne s’en occupe (le développeur) et que les délais de réponse peuvent être importants.

Conclusion

Malgré sa relative confidentialité le plugin Meow Gallery est une alternative crédible au plugin JetPack dont l’installation est à questionner s’il n’est utilisé que pour intégrer une jolie galerie d’image.

C’est en effet, à notre connaissance, le seul plugin WordPress spécialisé dans les galeries d’images qui s’utilise de façon naturelle avec la médiathèque. C’est aussi un plugin qui, de part sa conception, n’aura que très peu d’impact sur les performances de votre site internet et qui respecte les bonnes pratiques en matière d’attributs des images responsives.

Cela fait beaucoup de points positifs pour un plugin gratuit.

Au final Meow Gallery offre un choix varié de mises en page et permet d’afficher des galeries d’images esthétiques. Son usage est réellement intuitif, grâce l’accès à la bibliothèque de média directement depuis le bloc galerie sur vos pages. C’est un vrai plus si on le compare aux autres plugins de galerie WordPress. Le seul point négatif que l’on a pu trouver à ce plugin est l’absence de support vraiment efficace. Il faudra être patient.