Galerie-Library: Anpassen

Die geteilte Galerie-Bibliothek (\ImmoMakler\Frontend\Gallery\) lässt sich an zwei Stellen anpassen, ohne den Plugin-Code zu verändern:

1. Filter-Hooks — modifizieren die Bildauswahl, das Optionen-Array oder die Lightbox-Konfiguration zur Laufzeit.
2. CSS-Variablen — überschreiben Farben, Abstände und Bedienelement-Größen pro Galerie-Instanz.

Filter-Hooks

immomakler_gallery_image_collection

Verändert die aufgelöste Bildersammlung vor dem Rendern. Wirkt einheitlich auf alle Einsatzorte: Divi-Modul, Bricks-Tag, Shortcode und die Legacy-Skin-Templates.

Signatur:

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

Beispiel — Bilder umkehren:

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

Verändert das Optionen-Array, das an das Preset übergeben wird, nachdem Caller-Werte mit den Preset-Standardwerten zusammengeführt wurden. Geeignet, um Optionen wie loop, autoplay, space_between zentral zu erzwingen.

Signatur:

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

Beispiel — autoplay für alle Karussell-Presets aktivieren:

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
);

immomakler_lightgallery_options

Verändert die Optionen, die an lightGallery() im Browser übergeben werden — z. B. plugins, speed, licenseKey, strings. Wirkt sowohl auf die neue Galerie-Bibliothek als auch auf die Legacy-Skin-Templates (das ist der gleiche Filter, den die alte Lightgallery-Klasse seit Jahren bereitstellt).

Signatur:

apply_filters( 'immomakler_lightgallery_options', array $options )

Beispiel — den Download-Button aktivieren:

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

lightGallery-Plugins aktivieren

Der Key plugins enthält die Liste der aktiven lightGallery-Plugins. WP-ImmoMakler liefert für alle lightGallery-Plugins ein fertiges Script mit. Sie müssen das jeweilige Script also nicht selbst per wp_enqueue_script() einbinden — es genügt, das passende Token in plugins einzutragen:

Token	Plugin	Standardmäßig aktiv
lgZoom	Zoom	✓
lgThumbnail	Vorschaubilder (Thumbnails)	✓
lgFullscreen	Vollbild	✓
lgAutoplay	Automatische Wiedergabe (Slideshow)	—
lgMediumZoom	Medium-Zoom	—
lgRotate	Drehen / Spiegeln	—
lgShare	Teilen (Social Media)	—
lgHash	Deep-Linking per URL-Hash	—
lgPager	Seiten-Punkte (Pager)	—
lgComment	Kommentare	—
lgRelativeCaption	Relative Bildunterschrift	—
lgVideo	Video (YouTube, Vimeo, HTML5)	—
lgVimeoThumbnail	Vimeo-Vorschaubilder (benötigt lgVideo)	—

WP-ImmoMakler lädt automatisch genau die JavaScript-Dateien, die zu den tatsächlich in plugins eingetragenen Tokens gehören: Fügen Sie ein Token hinzu, wird das passende Plugin-Script geladen; entfernen Sie eines, entfällt das Script.

Hinweis

Die Tokens oben sind die Plugins, für die WP-ImmoMakler ein Script mitliefert. Eine Beschreibung der einzelnen Plugins und ihrer Optionen finden Sie in der lightGallery-Dokumentation. Zusätzliche eigene lightGallery-Plugins können Sie weiterhin verwenden — registrieren und laden Sie deren Script dann selbst und ergänzen Sie das Token in plugins.

Beispiel — automatische Wiedergabe (Slideshow) aktivieren:

add_filter(
    'immomakler_lightgallery_options',
    function ( $options ) {
        $options['plugins'][]         = 'lgAutoplay'; // Autoplay-Plugin aktivieren
        $options['slideShowAutoplay'] = true;         // Slideshow beim Öffnen automatisch starten
        $options['slideShowInterval'] = 1500;         // Zeit zwischen den Bildern (in ms)
        $options['progressBar']       = true;         // Fortschrittsbalken anzeigen
        return $options;
    }
);

Bereits das Hinzufügen von lgAutoplay blendet den Button zum Starten/Stoppen der Wiedergabe in der Lightbox-Werkzeugleiste ein; slideShowAutoplay startet die Wiedergabe zusätzlich automatisch beim Öffnen. Die vollständige Liste der Autoplay-Optionen (slideShowAutoplay, slideShowInterval, progressBar, forceSlideShowAutoplay, autoplayControls) finden Sie in der lightGallery-Dokumentation.

Filter: Steuer-Bereich der Static-Galerie erweitern

Die Static-Galerie rendert unten rechts einen Steuer-Bereich (.immomakler-gallery__controls), in dem standardmäßig der “Alle N Fotos anzeigen”-Pillen-Button erscheint (wenn nicht alle Fotos in das Vorschau-Raster passen und die Customizer-Option Wenn mehr Fotos als Vorschauplätze auf “Button” steht).

Über den Filter immomakler_gallery_static_controls_items lassen sich beliebige weitere Aktionen einfügen — typisch sind Anker-Links zu Grundriss, Video oder Virtueller Rundgang-Abschnitten der Detailseite.

Signatur:

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

Jedes Item ist ein assoziatives Array mit den folgenden Feldern:

Feld	Pflicht	Beschreibung
modifier	✓	BEM-Modifier-Suffix für die CSS-Klasse (z. B. floorplan → .immomakler-gallery__controls-item--floorplan).
href	✓	Anker-Ziel: # für Lightbox-Trigger, #abschnitt-id für interne Links.
label	✓	Sichtbarer, übersetzter Text.
data_attributes	optional	attr-name => value-Paare, gerendert als data-<name>="<value>". Verwenden Sie immomakler-gallery-lightbox-index, um einen Lightbox-Trigger zu verkabeln.
aria_label	optional	Screenreader-Text (überschreibt das sichtbare Label).
icon_svg	optional	Roher SVG-Markup. Wird in einem __controls-item-icon-Span vor dem Label ausgegeben.

Beispiel — “Grundriss anzeigen”-Link hinzufügen, wenn ein Grundriss-Anker auf der Seite existiert:

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
);

Hinweis

Das icon_svg-Feld wird unescaped ausgegeben — es ist als Entwickler-Schnittstelle gedacht, nicht für Kunden-Input. Geben Sie hier nur statisches, vertrauenswürdiges SVG-Markup an.

CSS-Variablen

Die eingebauten Presets verwenden CSS Custom Properties auf der Wrapper-Klasse .immomakler-gallery. Damit können Sie Farben, Abstände und Bedienelement-Größen pro Galerie-Instanz oder global überschreiben — ohne Selektoren mit hoher Spezifität schreiben zu müssen.

Variable	Standard	Beschreibung
--immomakler-gallery-primary-color	#af1615	Akzentfarbe (Pfeile, aktive Vorschau, Lightbox-Bedienelemente).
--immomakler-gallery-primary-color-inverted	#fff	Kontrastfarbe zur Akzentfarbe (z. B. Pfeil-Icon auf farbigem Button).
--immomakler-gallery-main-aspect	4 / 3	Seitenverhältnis des Hauptbildes.
--immomakler-gallery-thumb-aspect	3 / 2 (vertikal) / 4 / 3 (horizontal)	Seitenverhältnis der Vorschaubilder.
--immomakler-gallery-gap	8px (horizontal) / 10px (vertikal)	Abstand zwischen Bildern. Wirkt sowohl auf den CSS-Grid-Gap der Vorschauleiste als auch auf Swipers spaceBetween — der Loader liest die berechnete Variable beim Initialisieren aus, sodass eigene CSS-Overrides (z. B. responsive Media-Queries) den Abstand zwischen Vorschaubildern konsistent halten.
--immomakler-gallery-thumbs-width	200px (vertikal)	Breite der Vorschauleiste im vertikalen Layout.
--immomakler-gallery-nav-button-size	30px	Größe der Pfeil-Buttons.
--immomakler-gallery-nav-opacity	0.8	Deckkraft der Hauptbild-Pfeile (im Ruhezustand).
--immomakler-gallery-thumb-default-opacity	0.6	Deckkraft inaktiver Vorschaubilder.
--immomakler-gallery-thumb-nav-opacity	0.5	Deckkraft der Vorschauleisten-Pfeile (vertikales Layout).
--immomakler-gallery-thumb-nav-height	20px	Höhe der Vorschauleisten-Pfeil-Buttons (vertikales Layout).
--immomakler-gallery-carousel-height	400px	Höhe der Galerie im Karussell-Layout.

Beispiel — Akzentfarbe und Hauptbild-Verhältnis global setzen:

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

Tipp

Die Customizer-Einstellungen unter WP-ImmoMakler → Bildergalerie setzen diese Variablen automatisch über wp_add_inline_style. Eigene CSS-Regeln auf .immomakler-gallery überschreiben die Customizer-Werte. Per-Instance-Anpassungen — etwa wenn Sie zwei Galerien auf einer Seite unterschiedlich stylen wollen — funktionieren über Container-Klassen Ihres Templates.

Das könnte Sie auch interessieren

• Galerie-Shortcode
• Bildergalerie: Slideshow
• Bildergalerie: Statisches Bild
• Immobilienbilder-Verarbeitung: Individuelle Anpassung der Bildgrößen
• Anpassungen updatesicher umsetzen