Utiliser le bloc Galerie photos "Grille"

Avec le bloc Gutenberg Galerie photos « Grille » (immomakler/gallery-grid), vous intégrez les images d’un bien immobilier en mise en page de grille alternée — indépendamment de la vue détaillée complète. Quatre photos forment un bloc, dans lequel la disposition (grande image à gauche / grande image à droite) alterne automatiquement. Le bloc correspond en termes de fonctionnalités et de rendu au widget Elementor du même nom.

Prérequis

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

Insérer le bloc

1. Ouvrir une page ou un template

   Dans le backend de votre site (wp-admin), ouvrez une page, un article ou un template basé sur des blocs pour le type de publication Bien immobilier (requiert un thème de blocs ou le Site Editor).

2. Insérer le bloc

   Cliquez sur le symbole + et recherchez Galerie photos Grille, ou naviguez vers la catégorie Widgets. Insérez le bloc.

3. Configurer le bloc

   Ajustez les options dans le panneau latéral Mise en page. L’aperçu de l’éditeur se met à jour en temps réel après chaque modification.

4. Enregistrer et publier

   Enregistrez ou mettez à jour la page. La grille est immédiatement disponible dans le frontend.

Options de configuration

Toutes les options se trouvent dans le panneau latéral Mise en page.

Ratio d’aspect du bloc

Définit le ratio d’aspect global d’un bloc de 4 photos.

Valeur	Proportion
4:3	Format paysage classique
3:2	Format paysage photographique
2:1	Panorama (par défaut)
Nombre d’or	1,618:1
1:1	Carré

Répartition de la hauteur de ligne

Contrôle comment la hauteur totale du bloc est répartie entre la rangée supérieure et la rangée inférieure.

Valeur	Répartition
1:1	Les deux rangées de même hauteur
2:1	Rangée supérieure deux fois plus haute (par défaut)
Nombre d’or	Rangée supérieure plus haute selon le nombre d’or

Espacement

Espace entre les images individuelles à l’intérieur d’un bloc et entre les blocs. Configurable en px (par défaut : 20 px), em, rem, vw ou vh.

Limiter le nombre d’images

Restreint le nombre total d’images affichées.

Valeur	Description
Illimité	Toutes les images disponibles sont affichées (par défaut)
4 / 8 / 12 / 16	Seules les N premières images sont affichées

Filtre d’images

Restreint quelles images de la médiathèque du bien sont affichées.

Valeur	Description
Toutes les images	Affiche toutes les images du bien (par défaut)
Toutes sauf plans	Masque les plans
Plans uniquement	Affiche uniquement les images de plans

Note

Le filtrage est basé sur le champ méta gruppe des pièces jointes. Les plans doivent être marqués avec la valeur GRUNDRISS lors de l’import ou manuellement.

Mise en page de la grille en détail

Chaque bloc contient exactement quatre photos dans une grille CSS à 4 colonnes. La disposition change à chaque bloc :

• Blocs impairs (1er, 3e, …) : Image 1 en haut à gauche (2 colonnes de large), image 2 à droite (2 colonnes, sur les deux rangées), images 3 et 4 en bas à gauche, chacune 1 colonne de large.
• Blocs pairs (2e, 4e, …) : Image 1 à gauche (2 colonnes, sur les deux rangées), image 2 en haut à droite (2 colonnes de large), images 3 et 4 en bas à droite, chacune 1 colonne de large.

Si un bien a moins de quatre images (ou si le dernier groupe est incomplet), seules les images disponibles sont placées — les cellules de grille restantes restent vides.

Astuce

Pour un rendu le plus équilibré possible, un nombre d’images divisible par 4 est recommandé, p. ex. 8, 12 ou 16 images par bien. Cela peut être facilement imposé avec le paramètre Limiter le nombre d’images.

Aperçu dans l’éditeur

L’éditeur Gutenberg affiche un aperçu en temps réel rendu côté serveur de la grille directement dans l’éditeur. Si aucun bien n’est disponible dans le contexte de la page (p. ex. sur une page ordinaire), le bloc se replie sur un bien d’exemple.

Cela pourrait aussi vous intéresser

• Utiliser le bloc Galerie — galerie d’images en Slideshow ou grille statique
• Créer une page de détail — vue détaillée complète comme template de blocs
• Galerie d’images : Slideshow avec vignettes
• Galerie d’images : Image statique