L'élément Gallery affiche une galerie d'images personnalisable avec des options pour les légendes, les effets de survol et une lightbox.
Ajouter Gallery
Pour ajouter un élément Gallery à votre page cliquez sur +Add > Helpers > Gallery.
Ajouter des images à une galerie
Gallery Source
Cette option désigne l'endroit d’où vous remplissez votre galerie d'images. Vous avez trois options:
- Media Library – Bibliothèque de Médias : spécifiez les identifiants d’image existantes dans votre bibliothèque multimédia WordPress ou cliquez sur browse (parcourir) pour sélectionner des images.
- ACF : utilisez un champ Gallery de l’extension Advanced Custom Fields.
- WooCommerce : affiche la galerie d’images pour le produit WooCommerce spécifié.
Link Images – Lien sur les images
Cliquez le bouton yes pour lier les images de la galerie à leur version plein format : un clic sur une image de la galerie provoquera l'affichage de sa version en grand.
Cliquez le bouton no sinon.
Add Lightbox – Ajouter une visionneuse
Cette option apparaît lorsque Link Images est défini sur yes. Au lieu de créer un lien vers le fichier image lui-même, l'image sera affichée dans une visionneuse.
Thumbnail Resolution – Résolution de la vignette
Sélectionnez la résolution d’image à utiliser pour représenter les images dans la galerie.
Personnalisation de la galerie
Layout – Disposition
Ceci contrôle la disposition de la galerie, y compris le format de l'image, le nombre d'images par ligne et l'espacement entre les images.
- Layout – choisissez soit flex ou masonry. Flex conserve toutes les images dans des rangées ordonnées, tandis que masonry organise les images en fonction de leurs propres tailles et du nombre d'images par ligne.
- Image Aspect Ratio – Rapport hauteur / largeur de l’image : si vous choisissez flex pour le modèle, indiquez un rapport hauteur / largeur tel que 16: 9 (écran large), 21: 9 (cinéma), 1: 1 (carré), etc.
- Images Per Row – Images par rangée : définissez le nombre maximum d'images affichées dans chaque rangée.
- Space Around Image – Espace autour des images : contrôle l’espacement entre chaque image.
- Image Min Width – Largeur minimale de l’image : utilisez cette propriété pour rendre la galerie responsive. Les images ne seront pas affichées de taille plus étroite que cette largeur.
Captions – Légendes
- Show Captions – Afficher les légendes : choisissez oui ou non.
- Caption Color – Couleur des légendes : définissez la couleur du texte des légendes.
- Caption Background Color – Couleur de fond des sous-titres : définissez la couleur d'arrière-plan où les sous-titres sont affichés.
- Show Captions Only On Hover – Afficher les légendes uniquement en survol : choisissez oui ou non.
- Hide Captions Below – Masquer les légendes en dessous de : définissez une taille d'écran en dessous de laquelle les légendes ne seront pas affichées.
Hover – Survol
- Image Opacity – Opacité de l’image : définit l'opacité de l'image lorsqu'elle n'est pas survolée.
- Hover Image Opacity – Opacité des images survolées : définit l'opacité de l'image lorsqu’elle est survolée avec la souris.
- Transition Duration – Durée de transition : définissez la durée de la transition pour l'opacité du survol de l'image et l'affichage de la légende, le cas échéant.
Greg C. / Ph. Reskator
