Galerie d'images : Slideshow avec vignettes

Depuis la version 5.60, WP-ImmoMakler propose une bibliothèque de galerie partagée basée sur Swiper et Lightgallery. Elle remplace l’ancien slideshow galleria.io et offre quatre variantes de mise en page, un concept d’interaction unifié sur les appareils mobiles et des options de personnalisation cohérentes via le Customizer.

Activer le type de galerie

Dans le backend de votre site (wp-admin), naviguez vers WP-ImmoMakler → Customizer → Galerie d’images → Présentation des images du bien immobilier et sélectionnez Slideshow avec vignettes.

Les options suivantes apparaissent ensuite dans la section Galerie d’images.

Sélection d’images

Détermine quelles images du bien immobilier apparaissent dans la galerie. Les plans sont automatiquement identifiés comme tels lors de l’importation (p. ex. via OpenImmo) et peuvent être traités séparément ici.

Valeur	Description
Toutes les images (par défaut)	Les photos et les plans sont affichés ensemble.
Plans uniquement	Seules les images de plans sont affichées.
Sans plans	Seules les photos sont affichées ; les plans restent masqués.

Cette option s’applique aussi bien au slideshow qu’à la galerie statique. Elle correspond à la sélection d’images disponible dans les intégrations de blocs/theme builders (Gutenberg, Elementor, Divi, WPBakery, Bricks) — vous pouvez ainsi afficher, par exemple, les photos à un endroit et uniquement les plans du bien immobilier à un autre.

Mise en page

L’option Mise en page détermine l’organisation de base de la galerie. Le nom décrit la forme de la galerie dans son ensemble, et non la position de la bande de vignettes :

Mise en page	Description
Vertical	Image principale en haut, bande de vignettes en dessous (par défaut). La galerie est haute/empilée dans l’ensemble — convient naturellement aux colonnes étroites et sous l’en-tête.
Horizontal	Image principale à gauche, bande de vignettes à droite. La galerie est large dans l’ensemble — adaptée aux zones hero et aux gabarits pleine largeur pour ordinateur de bureau.
Sans vignettes	Seulement l’image principale avec navigation par flèches. Convient lorsque la galerie est placée sous une colonne étroite ou dans un listing.
Carrousel	Image principale en pleine largeur avec images précédente et suivante partiellement visibles (effet peek). Utilise une hauteur fixe plutôt qu’un ratio d’aspect.

Note

Dans les versions précédentes, « Horizontal » et « Vertical » décrivaient l’orientation de la bande de vignettes (Horizontal = rangée horizontale en bas ; Vertical = colonne verticale à droite). Depuis l’unification, la dénomination décrit la galerie dans son ensemble — une galerie Verticale est haute et empilée, une galerie Horizontale est large. Les paramètres existants sont migrés automatiquement.

Boutons fléchés sur la bande de vignettes

Active des boutons fléchés supplémentaires pour faire défiler la bande de vignettes : haut/bas pour la mise en page horizontale, gauche/droite pour la mise en page verticale. Utile lorsque la bande de vignettes contient plus d’images que ce qui est visible simultanément.

Avance automatique des images (Autoplay)

Lorsqu’il est activé, les images avancent automatiquement à l’intervalle configuré. Un clic ou un glissement met l’autoplay en pause.

• Vitesse d’autoplay (secondes) : Intervalle entre les changements d’image. Par défaut 4 secondes, plage 1–30.

Astuce

Les clients migrés depuis galleria.io (avec l’autoplay actif dans la version précédente) héritent automatiquement du mode autoplay dans la nouvelle galerie, préservant la présentation habituelle.

Effet de transition

Détermine comment l’image principale s’anime lors du changement.

Valeur	Description
Glissement	L’image principale glisse horizontalement vers l’image suivante (par défaut). Effet slider classique.
Fondu	L’image principale se fond doucement dans la suivante (cross-fade). Crée une impression plus calme et convient aux galeries où l’attention doit se porter sur les images elles-mêmes plutôt que sur la mécanique du slider.

Attention

Dans la mise en page carrousel, le fondu supprime l’effet peek des vignettes à gauche et à droite — l’image principale change alors en pleine largeur. Il s’agit d’une caractéristique technique du fondu (Swiper nécessite slidesPerView: 1 pour cela) et c’est intentionnel : l’effet peek du carrousel et le fondu sont visuellement incompatibles.

Durée de transition (millisecondes)

La rapidité avec laquelle la transition entre les images s’effectue. Valeur par défaut : 400 ms, plage 100–2000 ms.

• Les valeurs plus petites (100–200 ms) sont très directes — adaptées aux slideshows rapides et dynamiques.
• Les valeurs plus grandes (≥ 800 ms) sont plus douces et plus calmes — adaptées en combinaison avec l’autoplay et/ou l’effet de fondu.

Ce paramètre s’applique aussi bien aux changements d’image qu’au défilement de la bande de vignettes lors d’un clic sur une vignette — les deux s’animent au même rythme, de sorte qu’aucun effet de « saut + décalage » ne se produit.

Ratio d’aspect de l’image principale / Ratio d’aspect des vignettes

Contrôlent le ratio d’aspect des zones d’image respectives.

Valeur	Description
16:9	Format panoramique — standard pour les slideshows et les images hero.
3:2	Format photo classique.
4:3	Format standard.
1:1	Carré.
Section dorée (1,618:1)	Proportion naturellement équilibrée et esthétiquement agréable.
Original	Utilise le ratio d’aspect naturel de chaque photo. Les images ne sont pas recadrées — les photos aux proportions différentes conservent leur forme individuelle.

Note

Avec des ratios d’aspect fixes, les images sont recadrées pour remplir le cadre (object-fit: cover). Utilisez Original si vos photos ont intentionnellement des proportions différentes — par exemple lors d’un mélange de formats portrait et paysage.

Dans la mise en page carrousel, le ratio d’aspect de l’image principale agit comme la largeur de chaque image à hauteur fixe — avec « Original », des photos différentes auront des largeurs différentes.

Hauteur de la bande de vignettes (px)

S’affiche lorsque la mise en page verticale (vignettes sous l’image principale) est sélectionnée. Par défaut : 110 px.

Détermine la hauteur de la bande de vignettes horizontale. La largeur de chaque vignette individuelle est calculée automatiquement à partir de hauteur × ratio d’aspect ; le nombre de vignettes visibles simultanément est calculé à partir de la largeur de la galerie divisée par la largeur de la vignette.

Astuce

La valeur par défaut de 110 px correspond à la hauteur native du format d’image immomakler-gallery-thumb (195 × 110 px). Ainsi, les vignettes sont affichées sans mise à l’échelle à densité de pixels standard (1× DPR) et apparaissent donc parfaitement nettes. Des valeurs plus élevées fonctionnent techniquement, mais agrandissent légèrement les vignettes.

Largeur de la bande de vignettes (px)

S’affiche lorsque la mise en page horizontale (vignettes à droite de l’image principale) est sélectionnée. Par défaut : 200 px.

Détermine la largeur de la bande de vignettes verticale. La hauteur de chaque vignette individuelle est calculée automatiquement à partir de largeur ÷ ratio d’aspect ; le nombre de vignettes visibles simultanément est calculé à partir de la hauteur de la galerie divisée par la hauteur de la vignette.

Afficher les vignettes sur les appareils mobiles

Par défaut, les vignettes sont masquées sur les écrans étroits (≤ 768 px) — elles sont généralement trop petites pour être utiles. Activez cette option pour afficher les vignettes sur les appareils mobiles également.

Hauteur du carrousel / Unité de hauteur

Ces deux options ne s’appliquent qu’en mise en page carrousel.

• Hauteur du carrousel définit la valeur numérique de la hauteur (par défaut : 400).
• Unité de hauteur détermine comment la valeur est interprétée :

Unité	Description
px	Hauteur fixe en pixels (par défaut).
vw	Pourcentage de la largeur du viewport. S’adapte à la largeur du navigateur.
vh	Pourcentage de la hauteur du viewport. S’adapte à la hauteur du navigateur.
svh	Petite hauteur de viewport (mobile) : inclut la barre d’adresse dans le calcul.
lvh	Grande hauteur de viewport (mobile) : sans barre d’adresse.
dvh	Hauteur de viewport dynamique (mobile) : alterne entre svh et lvh selon la visibilité de la barre d’adresse.

Astuce

Pour les gabarits mobiles, nous recommandons svh ou dvh plutôt que vh. Le simple vh entraîne la disparition du carrousel derrière la barre d’adresse lors du défilement sur les navigateurs iOS.

Espacement entre les images (px)

Détermine l’espacement entre l’image principale et la bande de vignettes, ainsi qu’entre les vignettes individuelles. Valeur par défaut : 6 px.

Arrondi des coins

Les options Arrondi des coins (px) et Appliquer l’arrondi à s’appliquent aussi bien aux galeries Swiper que statiques.

• Arrondi des coins (px) : 0 (coins nets, par défaut) à 30 px.
• Appliquer l’arrondi à :
  • Chaque image individuellement : Les images principales et les vignettes reçoivent chacune des coins arrondis.
  • Uniquement les coins extérieurs de la galerie : Seuls les quatre coins extérieurs de l’ensemble de la galerie sont arrondis ; les images individuelles conservent des coins nets.

Résolution des images et srcset

La galerie Swiper utilise wp_get_attachment_image() et fournit donc automatiquement un srcset complet avec toutes les tailles d’images enregistrées. Le navigateur sélectionne la variante appropriée en fonction de la position d’affichage et de la densité de pixels de l’appareil (p. ex. 2× sur les écrans Retina). C’est pourquoi il n’y a pas d’entrée « dimensions en pixels » dans le Customizer pour la galerie Swiper — la sélection manuelle d’une taille n’aurait aucun effet sur le fichier réellement chargé par le navigateur.

Le facteur déterminant pour la qualité d’image est la résolution originale des photos téléversées. Si celles-ci sont suffisamment élevées, WordPress sert automatiquement la taille appropriée pour chaque classe d’appareil.

Pour les développeurs

Le comportement peut être davantage personnalisé via des hooks de filtre et des variables CSS — voir Bibliothèque de galeries : Personnaliser.

La galerie peut également être utilisée en dehors de la page de détail via le Shortcode de galerie.

Cela pourrait aussi vous intéresser

• Galerie d’images : Image statique
• Shortcode de galerie
• Bibliothèque de galeries : Personnaliser
• Traitement des images du bien immobilier