Gallery Library: Customising

The shared gallery library (\ImmoMakler\Frontend\Gallery\) can be customised in two ways without modifying the plugin code:

1. Filter hooks — modify the image selection, the options array, or the lightbox configuration at runtime.
2. CSS variables — override colours, spacing, and control sizes per gallery instance.

Filter hooks

immomakler_gallery_image_collection

Modifies the resolved image collection before rendering. Applies uniformly across all usage contexts: Divi module, Bricks tag, shortcode, and the legacy skin templates.

Signature:

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

Example — reverse image order:

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

Modifies the options array passed to the preset after caller values have been merged with the preset defaults. Suitable for centrally enforcing options such as loop, autoplay, or space_between.

Signature:

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

Example — enable autoplay for all carousel presets:

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

Example — disable arrow key navigation:

By default, the slideshow presets can be operated with the arrow keys (as well as Page Up / Page Down) as soon as the gallery is within the visible area. When the lightbox is open, the arrow keys control only the lightbox. The keyboard option switches off keyboard navigation:

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

immomakler_lightgallery_options

Modifies the options passed to lightGallery() in the browser — e.g. plugins, speed, licenseKey, strings. Applies to both the new gallery library and the legacy skin templates (this is the same filter that the old Lightgallery class has provided for years).

Signature:

apply_filters( 'immomakler_lightgallery_options', array $options )

Example — enable the download button:

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

Activating lightGallery plugins

The plugins key contains the list of active lightGallery plugins. WP-ImmoMakler ships a ready-made script for all lightGallery plugins. You do not need to enqueue the respective script yourself via wp_enqueue_script() — simply add the appropriate token to plugins:

Token	Plugin	Active by default
lgZoom	Zoom	✓
lgThumbnail	Thumbnails	✓
lgFullscreen	Full screen	✓
lgAutoplay	Autoplay (Slideshow)	—
lgMediumZoom	Medium Zoom	—
lgRotate	Rotate / Flip	—
lgShare	Share (Social Media)	—
lgHash	Deep-linking via URL hash	—
lgPager	Page dots (Pager)	—
lgComment	Comments	—
lgRelativeCaption	Relative caption	—
lgVideo	Video (YouTube, Vimeo, HTML5)	—
lgVimeoThumbnail	Vimeo thumbnails (requires lgVideo)	—

WP-ImmoMakler automatically loads exactly the JavaScript files corresponding to the tokens actually listed in plugins: adding a token loads the matching plugin script; removing one omits the script.

Note

The tokens above are the plugins for which WP-ImmoMakler ships a script. For a description of the individual plugins and their options, see the lightGallery documentation. You can still use additional custom lightGallery plugins — register and load their script yourself and add the token to plugins.

Example — enable autoplay (Slideshow):

add_filter(
    'immomakler_lightgallery_options',
    function ( $options ) {
        $options['plugins'][]         = 'lgAutoplay'; // Activate autoplay plugin
        $options['slideShowAutoplay'] = true;         // Start slideshow automatically on open
        $options['slideShowInterval'] = 1500;         // Time between images (in ms)
        $options['progressBar']       = true;         // Show progress bar
        return $options;
    }
);

Simply adding lgAutoplay shows the play/pause button in the lightbox toolbar; slideShowAutoplay additionally starts playback automatically on open. The complete list of autoplay options (slideShowAutoplay, slideShowInterval, progressBar, forceSlideShowAutoplay, autoplayControls) can be found in the lightGallery documentation.

Filter: extending the Static gallery controls area

The Static gallery renders a controls area in the bottom-right corner (.immomakler-gallery__controls), which by default contains the “Show all N photos” pill button (when not all photos fit in the thumbnail grid and the Customiser option When there are more photos than thumbnail slots is set to “Button”).

The filter immomakler_gallery_static_controls_items allows arbitrary additional actions to be inserted — typically anchor links to floor plan, video, or virtual tour sections of the detail page.

Signature:

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

Each item is an associative array with the following fields:

Field	Required	Description
modifier	✓	BEM modifier suffix for the CSS class (e.g. floorplan → .immomakler-gallery__controls-item--floorplan).
href	✓	Anchor target: # for a lightbox trigger, #section-id for an internal link.
label	✓	Visible, translated text.
data_attributes	optional	attr-name => value pairs, rendered as data-<name>="<value>". Use immomakler-gallery-lightbox-index to wire up a lightbox trigger.
aria_label	optional	Screen reader text (overrides the visible label).
icon_svg	optional	Raw SVG markup. Output in a __controls-item-icon span before the label.

Example — add a “Show floor plan” link when a floor plan anchor exists on the 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

The icon_svg field is output unescaped — it is intended as a developer interface, not for customer input. Only provide static, trusted SVG markup here.

Included Swiper Modules

The slideshow presets run on Swiper. WP-ImmoMakler does not ship the complete Swiper build, only the core plus these modules:

Module	Purpose
Navigation	Arrow buttons
Pagination	Image counter (e.g. “3 / 20”)
A11y	Screen reader labels
Thumbs	Thumbnail strip
Autoplay	Automatic image changes
EffectFade	“Fade” transition effect
Keyboard	Arrow key navigation
Manipulation	Adding images at runtime

Custom presets that you register via the immomakler_gallery_register_presets action can only use these modules. Swiper options from other modules, such as effect: 'coverflow' or mousewheel, have no effect.

WP-ImmoMakler’s copy of Swiper is available at window.immomakler.Swiper and does not occupy the global window.Swiper variable. This keeps other plugins that ship their own Swiper — such as Elementor Pro — from conflicting with WP-ImmoMakler.

CSS variables

The built-in presets use CSS custom properties on the wrapper class .immomakler-gallery. This allows you to override colours, spacing, and control sizes per gallery instance or globally — without writing high-specificity selectors.

Variable	Default	Description
--immomakler-gallery-primary-color	#af1615	Accent colour (arrows, active thumbnail, lightbox controls).
--immomakler-gallery-primary-color-inverted	#fff	Contrast colour for the accent colour (e.g. arrow icon on a coloured button).
--immomakler-gallery-main-aspect	4 / 3	Aspect ratio of the main image.
--immomakler-gallery-thumb-aspect	3 / 2 (vertical) / 4 / 3 (horizontal)	Aspect ratio of the thumbnails.
--immomakler-gallery-gap	8px (horizontal) / 10px (vertical)	Spacing between images. Applies to both the CSS grid gap of the thumbnail strip and Swiper’s spaceBetween — the loader reads the computed variable at initialisation time so that custom CSS overrides (e.g. responsive media queries) keep the gap between thumbnails consistent.
--immomakler-gallery-thumbs-width	200px (vertical)	Width of the thumbnail strip in the vertical layout.
--immomakler-gallery-nav-button-size	30px	Size of the arrow buttons.
--immomakler-gallery-nav-opacity	0.8	Opacity of the main image arrows (at rest).
--immomakler-gallery-thumb-default-opacity	0.6	Opacity of inactive thumbnails.
--immomakler-gallery-thumb-nav-opacity	0.5	Opacity of the thumbnail strip arrows (vertical layout).
--immomakler-gallery-thumb-nav-height	20px	Height of the thumbnail strip arrow buttons (vertical layout).
--immomakler-gallery-carousel-height	400px	Height of the gallery in carousel layout.
--immomakler-gallery-slide-background	#fff	Background behind the images for the “Fade” and “Aus- und Einblenden” transition effects. Only visible behind images with transparent areas, such as floor plans saved as PNG. On dark sites, set it to the page’s background colour, for example.

Example — set accent colour and main image ratio globally:

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

Tip

The Customiser settings under WP-ImmoMakler → Image Gallery set these variables automatically via wp_add_inline_style. Custom CSS rules on .immomakler-gallery override the Customiser values. Per-instance customisation — for example when you want to style two galleries on the same page differently — works via container classes in your template.

You might also be interested in

• Gallery Shortcode
• Image Gallery: Slideshow
• Image Gallery: Static Image
• Property Images Processing: Custom Image Size Adjustments
• Implementing customisations in an update-safe way