Sommaire de l’article :
- Une galerie photos filtrable par catégories
- Divi Supreme : Insertion du module Filterable Gallery
- Créer les catégories de la galerie filtrable
- Ajouter du texte à une image et l’assigner à une catégorie
- Paramétrage du Contenu du module Filterable Gallery
- Paramétrage du Style du module Filterable Gallery
Une galerie photos filtrable par catégories
Filtrer une galerie d’images par catégories ? C’est possible grâce au module Filterable Gallery de Divi Supreme, l’excellent plugin pour le Visual Builder de Divi.
Assignez les photos d’une galerie à certaines catégories et triez-les en 1 clic. Cette galerie photos filtrable c’est sûr, améliorera grandement le confort de navigation des visiteurs sur d’un site web WordPress Divi. De plus, grâce aux options fines de paramétrages disponibles de ce nouveau module Divi, vous pourrez apporter un design très évolué à cette galerie. Créer un site Internet professionnel n’aura jamais été aussi simple grâce aux modules supplémentaires de Divi Supreme Pro.
Divi Supreme : Insertion du module Filterable Gallery
Pour insérer la galerie, créer une section, puis dans cette section une rangée à 1 colonne par exemple puis insérer le module en le recherchant dans la liste ou écrivant ses premières lettres (filt…) dans le champ de recherche.
A noter qu’une fois que Divi Supreme Pro est installé, la 60aine de nouveaux modules apparaissent en fond bleu pour les distinguer des autres modules de base du Divi Visual Builder.
Préparez et optimisez les images de votre galerie. Une largeur de 1024 Pixels est confortable et raisonnable. Pour redimensionner, recadrer et optimiser vos images, je vous recommande le site en ligne Photopea, il est relativement puissant et entièrement gratuit et ne nécessite pas d’inscription, ni d’installation.
Le format le mieux adapté pour cette galerie filtrable est le format JPG (J’ai pu noter que le format WebP n’était pas supporté par ce module.).
Puis dans les paramètres du module, (onglet Contenu), dans « General », ajouter les images en cliquant sur le plus. La médiathèque est appelée, faire la sélection souhaitée.
Créer les catégories de la galerie filtrable
Sauvegardez les modifications du module puis enregistrez la page. Rendez-vous ensuite dans le menu WordPress à « Médias » puis choisissez le sous-menu « Catégories ». Sur cette page, vous pouvez créer les catégories souhaitées qui s’appliqueront ensuite automatiquement à la galerie filtrable de Divi Supreme.
Ajouter du texte à une image et l’assigner à une catégorie.
Nous le verrons un peu plus tard dans cet article, il est possible de faire apparaître du texte sous chaque image de la galerie ou dessus si l’option « Overlay » est activée.
Le texte pouvant apparaître avec chaque image sera le texte renseigné dans le champ « Titre » de l’image, dans le champ « Légende » ou dans le champ « Description ». Chaque texte pouvant être activé ou pas séparément.
Pour renseigner ce texte et assigner une image à une catégorie, cliquer sur chaque image de la galerie « Medias ».
Pour renseigner le texte complétez les champs 1,2 et 3.
Dans le champ 4, écrivez le nom de la catégorie où l’image sera assignée.
Veuillez noter dans le champ 5, il est possible d’ajouter une adresse URL spécifique à l’image et qui s’activera en cliquant dessus. Cette option peut-être très intéressante pour conduire le visiteur vers des pages internes ou externes au site.
Paramétrage du Contenu du module Filterable Gallery
– Use Dynamic Images
Cette option permet de choisir la ou les catégories à afficher. Il suffit de cocher la ou les catégories souhaitées.
– Numbers of Colums
Vous pouvez choisir à cette endroit un affichage jusqu’à 6 colonnes.
– Image Sizes
Choisissez la taille d’image la mieux adaptée à la taille d’origine de votre image (recadrée ou pas).
– Column Gap et Row Gap
Vous pouvez à cette endroit définir l’espacement entre vos images de la galerie. L’espacement entre les colonnes et les rangées.
– Speed
Cette option définit en ms la vitesse de réorganisation des images de la galerie au clic sur le bouton d’une catégorie.
– Layout
C’est à cet endroit qu’il est possible de choisir entre un affichage « Card » des images qui permet d’afficher du texte sous l’image et un affichage « Overlay » qui permet d’afficher du texte « sur l’image » avec un filtre.
D’autres options intéressantes sont disponibles juste en dessous dans la partie « Elements ».
– Enable Filterable Gallery
Cette option permet d’activer ou pas le côté filtrable de la galerie.
– Show All Images Text
Il est possible à cet endroit de faire apparaître le bouton « All » qui affichent l’ensemble des images, toutes catégories confondues. Dans le champ, vous pouvez nommer ce bouton comme vous le souhaitez, »Toutes les images » par exemple.
– Show Tiltle / Caption / Description
C’est là que vous pourrez activer ou pas le texte renseigné pour chaque image à savoir le titre, la légende et la description.
– Use Lightbox
Cette option activée permettra au clic de révéler l’image en grande taille avec un contour assombri.
– Pagination
Si le nombre d’images de la catégorie est supérieur à limite fixée d’image affichable à l’écran alors une pagination apparaîtra sous la galerie pour accéder aux autres pages.
Paramétrage du Style du module Filterable Gallery
Ensuite dans l’onglet « Style » vous pouvez comme tout module Divi apporter un design fin à cette galerie. Libre à vous d’apporter votre touche personnelle ;).
Vous pouvez designer le texte du Titre (Title), la légende (Caption) et de la description (Description). A noter que si vous avez choisi un affichage « Card », il faudra ajouter dans le texte affichée de la marge interne (car le texte est trop proche du bord).
Une partie à bien designer pour un bel effet sera la partie « Category Tab » qui est celle des boutons catégories présents au dessus de la galerie.
Des réglages très fins vous sont proposés. Dans la vidéo, j’en donne un exemple.
