Utiliser le bloc galerie

Avec le bloc Gutenberg Galerie immobilière (immomakler/gallery), vous intégrez uniquement la galerie d’images d’un bien immobilier — indépendamment de la vue détaillée complète. Le bloc offre les mêmes options de mise en page et de conception que la galerie du Customizer, mais les définit par instance de bloc. Différentes pages peuvent ainsi afficher des galeries conçues différemment.

Prérequis

• WordPress avec l’éditeur Gutenberg (à partir de WordPress 5.0)
• WP-ImmoMakler (édition au choix)

Insérer le bloc galerie

1. Modifier un bien immobilier ou créer un template

   Ouvrez un bien immobilier existant dans l’éditeur ou créez un template basé sur des blocs pour le type de publication Bien immobilier (nécessite un thème de blocs ou l’éditeur de site).

2. Insérer le bloc

   Cliquez sur le symbole + et recherchez Galerie immobilière ou accédez à la catégorie Widgets. Insérez le bloc.

3. Choisir la source des images

   Définissez dans le panneau latéral Bien immobilier de quel bien proviennent les images (voir la section suivante).

4. Configurer la galerie

   Ajustez la mise en page, les options de slideshow ou statiques, les rapports d’aspect, les tailles et le design dans les panneaux latéraux. L’aperçu de l’éditeur se met à jour en direct.

5. Enregistrer et publier

   Enregistrez ou mettez à jour la page. La galerie est désormais disponible sur le front-end.

Choisir la source des images

Le panneau Bien immobilier détermine quelles images le bloc affiche.

Option	Description
Source → Bien immobilier actuel (Loop)	Le bloc affiche les images du bien dans le contexte duquel il est rendu — par exemple dans le template du type de publication Bien immobilier ou au sein d’une boucle de requête (par défaut).
Source → Sélection manuelle	Vous choisissez un bien immobilier précis. Un champ de sélection apparaît, dans lequel vous effectuez une recherche par titre du bien ou par ID externe du bien (objektnr_extern).
Sélection des images	Restreint les images affichées : Toutes les images, Uniquement les plans ou Sans les plans.

Note

La Sélection manuelle convient pour intégrer une galerie immobilière précise sur n’importe quelle page (p. ex. une landing page). La recherche dans le champ de sélection utilise à la fois le titre du bien et l’ID externe du bien.

Type de galerie et mise en page

Dans le panneau Type de galerie et mise en page, vous choisissez entre deux modes d’affichage fondamentaux :

Type de galerie	Description
Slideshow (Swiper)	Slideshow interactive avec barre de miniatures, options de carrousel et de lecture automatique. Pour plus de détails sur les mises en page, voir Galerie d’images : Slideshow.
Statique (grille)	Grille statique composée d’une image principale et de miniatures, qui s’ouvre via une lightbox. Pour plus de détails sur les mises en page, voir Galerie d’images : Image statique.

Selon le type de galerie choisi, les options de mise en page correspondantes ainsi que le panneau Options de slideshow ou Options statiques apparaissent.

Les panneaux de réglages

Le bloc regroupe toutes les options dans les panneaux latéraux suivants. La signification de chaque option est identique à celle de la galerie du Customizer — les pages liées les décrivent en détail.

Panneau	Pilote	Détails
Bien immobilier	Source et sélection des images	(voir ci-dessus)
Type de galerie et mise en page	Slideshow vs statique et la mise en page	Slideshow · Statique
Options de slideshow	Lecture automatique, effet et durée de transition, boutons fléchés, miniatures sur mobile	Slideshow
Options statiques	Mode d’aspect, comportement en cas de surplus d’images, animation au survol, nombre de miniatures	Statique
Rapports d’aspect	Rapport d’aspect de l’image principale et des miniatures	Slideshow
Tailles	Hauteur de la barre de miniatures, largeur de la colonne de miniatures, hauteur du carrousel ou de la galerie fixe	Slideshow
Espacements et coins	Espacement entre les miniatures, espacement entre les images principales, arrondi des coins, couleur des boutons fléchés	Slideshow

Astuce

Les valeurs définies dans le bloc ne s’appliquent qu’à cette unique instance de galerie et remplacent les valeurs par défaut globales du Customizer pour ce bloc. Si vous laissez une option inchangée, la valeur par défaut correspondante s’applique.

Aperçu et test

L’éditeur Gutenberg affiche un aperçu en direct de la galerie, rendu côté serveur, directement dans l’éditeur. Pour vérifier le résultat final :

1. Enregistrez ou publiez la page.
2. Ouvrez la page sur le front-end.
3. Vérifiez la navigation de la slideshow ou la lightbox ainsi que l’affichage sur les appareils mobiles.

Pour les développeurs

Le bloc utilise la même bibliothèque de galerie que la page détaillée. Le comportement peut être personnalisé via des hooks de filtre et des variables CSS — voir Bibliothèque de galerie : personnaliser. En dehors de l’éditeur de blocs, le shortcode de galerie est également disponible.

Cela pourrait aussi vous intéresser

• Galerie d’images : Slideshow avec miniatures
• Galerie d’images : Image statique
• Créer une page individuelle
• Bibliothèque de galerie : personnaliser