Bibliothèque de galerie : Personnaliser

La bibliothèque de galerie partagée (\ImmoMakler\Frontend\Gallery\) peut être personnalisée à deux endroits sans modifier le code du plugin :

1. Hooks de filtre — modifient la sélection d’images, le tableau d’options ou la configuration de la lightbox au moment de l’exécution.
2. Variables CSS — remplacent les couleurs, les espacements et les tailles des éléments de contrôle par instance de galerie.

Hooks de filtre

immomakler_gallery_image_collection

Modifie la collection d’images résolue avant le rendu. S’applique uniformément à tous les contextes d’utilisation : module Divi, tag Bricks, shortcode et les templates skin hérités.

Signature :

apply_filters(
    'immomakler_gallery_image_collection',
    \ImmoMakler\Frontend\Gallery\Image_Collection $collection,
    int $post_id,
    string $source // 'all' | 'floorplans' | 'non_floorplans'
)

Exemple — inverser les images :

add_filter(
    'immomakler_gallery_image_collection',
    function ( $collection, $post_id, $source ) {
        if ( ! $collection instanceof \ImmoMakler\Frontend\Gallery\Image_Collection ) {
            return $collection;
        }
        $reversed = array_reverse( $collection->all() );
        return new \ImmoMakler\Frontend\Gallery\Image_Collection( $reversed );
    },
    10,
    3
);

immomakler_gallery_options

Modifie le tableau d’options transmis au preset après que les valeurs de l’appelant ont été fusionnées avec les valeurs par défaut du preset. Permet d’imposer centralement des options telles que loop, autoplay, space_between.

Signature :

apply_filters(
    'immomakler_gallery_options',
    array $options,
    string $preset_id,
    int $post_id,
    string $source
)

Exemple — activer l’autoplay pour tous les presets de carrousel :

add_filter(
    'immomakler_gallery_options',
    function ( $options, $preset_id, $post_id, $source ) {
        if ( in_array( $preset_id, [ 'horizontal_thumbs', 'vertical_thumbs' ], true ) ) {
            $options['autoplay'] = true;
        }
        return $options;
    },
    10,
    4
);

Exemple — désactiver la navigation au clavier :

Par défaut, les presets de slideshow peuvent être pilotés avec les touches fléchées (ainsi que Page précédente / Page suivante) dès que la galerie se trouve dans la zone visible. Lorsque la lightbox est ouverte, les touches fléchées ne contrôlent que la lightbox. L’option keyboard désactive la navigation au clavier :

add_filter(
    'immomakler_gallery_options',
    function ( $options, $preset_id, $post_id, $source ) {
        $options['keyboard'] = false;
        return $options;
    },
    10,
    4
);

immomakler_lightgallery_options

Modifie les options transmises à lightGallery() dans le navigateur — par exemple plugins, speed, licenseKey, strings. S’applique aussi bien à la nouvelle bibliothèque de galerie qu’aux templates skin hérités (c’est le même filtre que la classe Lightgallery existante met à disposition depuis des années).

Signature :

apply_filters( 'immomakler_lightgallery_options', array $options )

Exemple — activer le bouton de téléchargement :

add_filter(
    'immomakler_lightgallery_options',
    function ( $options ) {
        $options['download'] = true;
        return $options;
    }
);

Activer les plugins lightGallery

La clé plugins contient la liste des plugins lightGallery actifs. WP-ImmoMakler fournit un script prêt à l’emploi pour tous les plugins lightGallery. Vous n’avez pas besoin d’inclure vous-même le script correspondant via wp_enqueue_script() — il suffit d’ajouter le token approprié dans plugins :

Token	Plugin	Actif par défaut
lgZoom	Zoom	✓
lgThumbnail	Vignettes (Thumbnails)	✓
lgFullscreen	Plein écran	✓
lgAutoplay	Lecture automatique (Slideshow)	—
lgMediumZoom	Medium Zoom	—
lgRotate	Pivoter / Retourner	—
lgShare	Partager (réseaux sociaux)	—
lgHash	Deep-linking par hash d’URL	—
lgPager	Points de page (Pager)	—
lgComment	Commentaires	—
lgRelativeCaption	Légende relative	—
lgVideo	Vidéo (YouTube, Vimeo, HTML5)	—
lgVimeoThumbnail	Vignettes Vimeo (nécessite lgVideo)	—

WP-ImmoMakler charge automatiquement exactement les fichiers JavaScript correspondant aux tokens réellement renseignés dans plugins : en ajoutant un token, le script du plugin correspondant est chargé ; en le supprimant, le script est omis.

Note

Les tokens ci-dessus correspondent aux plugins pour lesquels WP-ImmoMakler fournit un script. Une description de chaque plugin et de ses options est disponible dans la documentation lightGallery. Vous pouvez continuer à utiliser des plugins lightGallery personnalisés supplémentaires — enregistrez et chargez vous-même leur script, puis ajoutez le token dans plugins.

Exemple — activer la lecture automatique (Slideshow) :

add_filter(
    'immomakler_lightgallery_options',
    function ( $options ) {
        $options['plugins'][]         = 'lgAutoplay'; // Activer le plugin autoplay
        $options['slideShowAutoplay'] = true;         // Démarrer le diaporama automatiquement à l'ouverture
        $options['slideShowInterval'] = 1500;         // Durée entre les images (en ms)
        $options['progressBar']       = true;         // Afficher la barre de progression
        return $options;
    }
);

Il suffit d’ajouter lgAutoplay pour afficher le bouton lecture/pause dans la barre d’outils de la lightbox ; slideShowAutoplay lance également la lecture automatiquement à l’ouverture. La liste complète des options d’autoplay (slideShowAutoplay, slideShowInterval, progressBar, forceSlideShowAutoplay, autoplayControls) est disponible dans la documentation lightGallery.

Filtre : étendre la zone de contrôle de la galerie statique

La galerie statique affiche une zone de contrôle (.immomakler-gallery__controls) en bas à droite, où le bouton pilule “Afficher tous les N photos” apparaît par défaut (lorsque toutes les photos ne tiennent pas dans la grille de vignettes et que l’option Customizer Si plus de photos que d’emplacements de vignettes est réglée sur “Bouton”).

Le filtre immomakler_gallery_static_controls_items permet d’ajouter des actions supplémentaires — typiquement des liens d’ancrage vers les sections Plan, Vidéo ou Visite virtuelle de la page de détail.

Signature :

apply_filters(
    'immomakler_gallery_static_controls_items',
    array $items,
    \ImmoMakler\Frontend\Gallery\Image_Collection $images,
    int $post_id
)

Chaque item est un tableau associatif avec les champs suivants :

Champ	Obligatoire	Description
modifier	✓	Suffixe de modificateur BEM pour la classe CSS (p. ex. floorplan → .immomakler-gallery__controls-item--floorplan).
href	✓	Cible d’ancrage : # pour un déclencheur lightbox, #id-section pour des liens internes.
label	✓	Texte visible et traduit.
data_attributes	optionnel	Paires nom-attribut => valeur, rendues sous forme de data-<nom>="<valeur>". Utilisez immomakler-gallery-lightbox-index pour connecter un déclencheur lightbox.
aria_label	optionnel	Texte pour les lecteurs d’écran (remplace le label visible).
icon_svg	optionnel	Balisage SVG brut. Affiché dans un span __controls-item-icon avant le label.

Exemple — ajouter un lien “Afficher le plan” lorsqu’un ancrage de plan existe sur la page :

add_filter(
    'immomakler_gallery_static_controls_items',
    function ( array $items, $images, int $post_id ): array {
        if ( ! has_floorplan( $post_id ) ) {
            return $items;
        }
        $items[] = [
            'modifier' => 'floorplan',
            'href'     => '#grundriss',
            'label'    => __( 'Grundriss anzeigen', 'mein-theme' ),
            'icon_svg' => '<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="..."/></svg>',
        ];
        return $items;
    },
    10,
    3
);

Note

Le champ icon_svg est rendu sans échappement — il est conçu comme interface développeur, pas pour les saisies des clients. Ne fournissez ici que des balises SVG statiques et fiables.

Modules Swiper inclus

Les presets de slideshow s’appuient sur Swiper. WP-ImmoMakler ne fournit pas Swiper complet, mais seulement le noyau avec ces modules :

Module	Usage
Navigation	Boutons fléchés
Pagination	Compteur d’images (p. ex. « 3 / 20 »)
A11y	Libellés pour les lecteurs d’écran
Thumbs	Bande de vignettes
Autoplay	Changement automatique des images
EffectFade	Effet de transition « Fondu »
Keyboard	Navigation au clavier avec les flèches
Manipulation	Ajout d’images à l’exécution

Les presets personnalisés que vous enregistrez via l’action immomakler_gallery_register_presets ne peuvent utiliser que ces modules. Les options Swiper des autres modules, comme effect: 'coverflow' ou mousewheel, restent sans effet.

La copie de Swiper de WP-ImmoMakler est disponible sous window.immomakler.Swiper et n’occupe pas la variable globale window.Swiper. D’autres plugins avec leur propre Swiper, comme Elementor Pro, et WP-ImmoMakler ne se gênent ainsi pas mutuellement.

Variables CSS

Les presets intégrés utilisent des propriétés CSS personnalisées sur la classe wrapper .immomakler-gallery. Cela vous permet de remplacer les couleurs, les espacements et les tailles des éléments de contrôle par instance de galerie ou globalement — sans avoir à écrire des sélecteurs à haute spécificité.

Variable	Par défaut	Description
--immomakler-gallery-primary-color	#af1615	Couleur d’accentuation (flèches, vignette active, contrôles de la lightbox).
--immomakler-gallery-primary-color-inverted	#fff	Couleur de contraste de la couleur d’accentuation (p. ex. icône flèche sur bouton coloré).
--immomakler-gallery-main-aspect	4 / 3	Rapport d’aspect de l’image principale.
--immomakler-gallery-thumb-aspect	3 / 2 (vertical) / 4 / 3 (horizontal)	Rapport d’aspect des vignettes.
--immomakler-gallery-gap	8px (horizontal) / 10px (vertical)	Espacement entre les images. Agit à la fois sur le gap de la grille CSS de la bande de vignettes et sur le spaceBetween de Swiper — le loader lit la variable calculée lors de l’initialisation, de sorte que les overrides CSS personnalisés (p. ex. les media queries responsive) maintiennent l’espacement entre les vignettes de manière cohérente.
--immomakler-gallery-thumbs-width	200px (vertical)	Largeur de la bande de vignettes dans la mise en page verticale.
--immomakler-gallery-nav-button-size	30px	Taille des boutons de navigation (flèches).
--immomakler-gallery-nav-opacity	0.8	Opacité des flèches de l’image principale (au repos).
--immomakler-gallery-thumb-default-opacity	0.6	Opacité des vignettes inactives.
--immomakler-gallery-thumb-nav-opacity	0.5	Opacité des flèches de la bande de vignettes (mise en page verticale).
--immomakler-gallery-thumb-nav-height	20px	Hauteur des boutons de flèche de la bande de vignettes (mise en page verticale).
--immomakler-gallery-carousel-height	400px	Hauteur de la galerie dans la mise en page carrousel.
--immomakler-gallery-image-position	center	object-position de toutes les images recadrées (images principales, vignettes, tuiles). Le réglage Cadrage lors du recadrage la définit via les classes immomakler-gallery--image-position-top (center top) et immomakler-gallery--image-position-bottom (center bottom). Des valeurs personnalisées comme center 70% sont possibles.
--immomakler-gallery-slide-background	#fff	Arrière-plan derrière les images pour les effets de transition « Fondu » et « Aus- und Einblenden ». Visible uniquement derrière des images comportant des zones transparentes, comme des plans enregistrés en PNG. Sur les sites sombres, définissez-le par exemple sur la couleur d’arrière-plan de la page.

Exemple — définir la couleur d’accentuation et le rapport d’aspect de l’image principale globalement :

.immomakler-gallery {
    --immomakler-gallery-primary-color: #1a73e8;
    --immomakler-gallery-primary-color-inverted: #ffffff;
    --immomakler-gallery-main-aspect: 16 / 9;
}

Astuce

Les réglages du Customizer sous WP-ImmoMakler → Galerie d’images définissent automatiquement ces variables via wp_add_inline_style. Vos propres règles CSS sur .immomakler-gallery remplacent les valeurs du Customizer. Les personnalisations par instance — par exemple si vous souhaitez styliser différemment deux galeries sur une même page — fonctionnent via les classes de conteneur de votre template.

Cela pourrait aussi vous intéresser

• Shortcode de galerie
• Galerie d’images : Slideshow
• Galerie d’images : Image statique
• Traitement des images de biens immobiliers : Ajustement individuel des tailles d’image
• Rendre les personnalisations compatibles avec les mises à jour