Bildergalerie: Slideshow mit Vorschaubildern

WP-ImmoMakler stellt seit Version 5.60 eine geteilte Galerie-Bibliothek bereit, die auf Swiper und Lightgallery basiert. Sie löst die frühere galleria.io-Slideshow ab und bietet vier Layout-Varianten, ein einheitliches Bedienkonzept auf Mobilgeräten und konsistente Anpassungsmöglichkeiten über den Customizer.

Galerie-Typ aktivieren

Navigieren Sie im Backend Ihrer Website (wp-admin) unter WP-ImmoMakler → Customizer → Bildergalerie → Präsentation der Immobilienbilder und wählen Sie Slideshow mit Vorschaubildern.

Folgende Optionen erscheinen anschließend in der Sektion Bildergalerie.

Bildauswahl

Bestimmt, welche Bilder der Immobilie in der Galerie erscheinen. Grundrisse werden beim Import (z. B. über OpenImmo) automatisch als solche erkannt und lassen sich hier getrennt behandeln.

Wert	Beschreibung
Alle Bilder (Standard)	Fotos und Grundrisse werden gemeinsam angezeigt.
Nur Grundrisse	Es werden ausschließlich die Grundriss-Bilder angezeigt.
Ohne Grundrisse	Es werden nur die Fotos angezeigt, Grundrisse bleiben ausgeblendet.

Die Option wirkt sowohl für die Slideshow- als auch für die statische Galerie. Sie entspricht der Bildauswahl, die auch in den Block-/Theme-Builder-Integrationen (Gutenberg, Elementor, Divi, WPBakery, Bricks) zur Verfügung steht — so können Sie etwa an einer Stelle die Fotos und an anderer Stelle nur die Grundrisse einer Immobilie zeigen.

Layout

Die Option Layout bestimmt die grundlegende Anordnung der Galerie. Die Benennung beschreibt dabei die Form der Galerie, nicht die Anordnung der Vorschauleiste:

Layout	Beschreibung
Vertikal	Hauptbild oben, Vorschauleiste darunter (Standard). Die Galerie ist insgesamt hoch/gestapelt — wirkt natürlich in schmalen Spalten und unter dem Header.
Horizontal	Hauptbild links, Vorschauleiste rechts daneben. Die Galerie ist insgesamt breit — passt zu Hero-Bereichen und Desktop-Templates mit voller Breite.
Ohne Vorschaubilder	Nur das Hauptbild mit Pfeil-Navigation. Geeignet, wenn die Galerie unter einer schmalen Spalte oder in einem Listing platziert wird.
Karussell	Hauptbild auf voller Breite mit angeschnittenen Vorder- und Hinterbildern (Peek-Effekt). Verwendet eine feste Höhe statt eines Seitenverhältnisses.

Hinweis

In früheren Versionen beschrieben “Horizontal” und “Vertikal” die Ausrichtung der Vorschauleiste (Horizontal = horizontale Reihe unten; Vertikal = vertikale Spalte rechts). Seit der Vereinheitlichung beschreibt die Bezeichnung die Galerie als Ganzes — eine Vertikale Galerie ist hoch und gestapelt, eine Horizontale Galerie ist breit. Bestehende Einstellungen werden automatisch migriert.

Pfeil-Buttons an den Vorschaubildern anzeigen

Aktiviert zusätzliche Pfeil-Buttons zum Blättern durch die Vorschauleiste: oben/unten beim horizontalen Layout, links/rechts beim vertikalen Layout. Praktisch, wenn die Vorschauleiste mehr Bilder enthält als gleichzeitig sichtbar sind.

Bilder automatisch wechseln (Autoplay)

Wenn aktiviert, wechseln die Bilder selbständig im eingestellten Sekundentakt. Beim Klick oder Wischen wird der Autoplay pausiert.

• Autoplay-Geschwindigkeit (Sekunden): Wartezeit zwischen den Bildwechseln. Standard 4 Sekunden, Bereich 1–30.

Tipp

Kunden, die von galleria.io migriert wurden (mit aktivem Autoplay in der Vorgänger-Version), übernehmen automatisch den Autoplay-Modus in der neuen Galerie, um die gewohnte Darstellung beizubehalten.

Übergangseffekt

Bestimmt, wie das Hauptbild beim Wechsel animiert wird.

Wert	Beschreibung
Schieben	Das Hauptbild wandert horizontal zum nächsten Bild (Standard). Klassischer Slider-Effekt.
Überblenden	Das Hauptbild blendet sanft in das nächste über (Cross-Fade). Wirkt ruhiger und eignet sich für Galerien, in denen die Aufmerksamkeit auf der Bildwirkung selbst liegen soll, statt auf der Slider-Mechanik.

Achtung

Im Karussell-Layout wird beim Überblenden der Vorschau-Anschnitt rechts und links unterdrückt — das Hauptbild wechselt dann auf voller Breite. Das ist eine technische Eigenheit der Überblendung (Swiper benötigt dafür slidesPerView: 1) und beabsichtigt: Karussell-Peek und Überblendung sind visuell unvereinbar.

Übergangsdauer (Millisekunden)

Wie schnell der Übergang zwischen den Bildern abläuft. Standardwert: 400 ms, Bereich 100–2000 ms.

• Kleinere Werte (100–200 ms) wirken sehr direkt — passend für schnelle, energische Slideshows.
• Größere Werte (≥ 800 ms) wirken weicher und ruhiger — geeignet in Kombination mit Autoplay und/oder dem Überblenden-Effekt.

Die Einstellung gilt sowohl für den Bildwechsel als auch für das Mitscrollen der Vorschauleiste beim Klick auf eine Vorschaubild — beide animieren mit demselben Tempo, sodass kein „Springen + Nachziehen”-Effekt entsteht.

Seitenverhältnis Hauptbild / Seitenverhältnis Vorschaubilder

Steuern das Seitenverhältnis (Aspect Ratio) der jeweiligen Bildbereiche.

Wert	Beschreibung
16:9	Breitformat — Standard für Diashows und Hero-Bilder.
3:2	Klassisches Foto-Format.
4:3	Standardformat.
1:1	Quadrat.
Goldener Schnitt (1,618:1)	Natürliche, ästhetisch ausgewogene Proportion.
Original	Verwendet das natürliche Seitenverhältnis jedes Fotos. Es wird nicht beschnitten — Bilder mit unterschiedlichen Proportionen behalten ihre individuelle Form.

Hinweis

Bei festen Seitenverhältnissen werden Bilder formatfüllend zugeschnitten (object-fit: cover). Verwenden Sie Original, wenn Ihre Fotos absichtlich unterschiedliche Proportionen haben — etwa bei einer Mischung aus Hoch- und Querformat.

Im Karussell-Layout wirkt das Seitenverhältnis des Hauptbilds als Breite jedes Bildes bei fester Höhe — bei “Original” haben unterschiedliche Fotos verschiedene Breiten.

Höhe der Vorschauleiste (px)

Wird angezeigt, wenn das vertikale Layout (Vorschaubilder unter dem Hauptbild) gewählt ist. Standard: 110 px.

Bestimmt die Höhe der horizontalen Vorschauleiste. Die Breite jedes einzelnen Vorschaubilds ergibt sich automatisch aus Höhe × Seitenverhältnis, die Anzahl der gleichzeitig sichtbaren Vorschaubilder aus der Galerie-Breite geteilt durch die Vorschaubild-Breite.

Tipp

Der Standardwert von 110 px entspricht der nativen Höhe des Bildformats immomakler-gallery-thumb (195 × 110 px). So werden die Vorschaubilder bei einfacher Pixeldichte (1× DPR) ohne Hochskalierung und damit gestochen scharf dargestellt. Höhere Werte funktionieren technisch, blasen die Vorschaubilder aber leicht auf.

Breite der Vorschauleiste (px)

Wird angezeigt, wenn das horizontale Layout (Vorschaubilder rechts neben dem Hauptbild) gewählt ist. Standard: 200 px.

Bestimmt die Breite der vertikalen Vorschauleiste. Die Höhe jedes einzelnen Vorschaubilds ergibt sich automatisch aus Breite ÷ Seitenverhältnis, die Anzahl der gleichzeitig sichtbaren Vorschaubilder aus der Galerie-Höhe geteilt durch die Vorschaubild-Höhe.

Vorschaubilder auch auf Mobilgeräten anzeigen

Standardmäßig werden die Vorschaubilder auf schmalen Bildschirmen (≤ 768 px) ausgeblendet — sie sind dort meist zu klein, um nützlich zu sein. Aktivieren Sie diese Option, um die Vorschaubilder auch auf Mobilgeräten zu zeigen.

Höhe des Karussells / Höheneinheit

Beide Optionen wirken nur im Karussell-Layout.

• Höhe des Karussells legt den numerischen Höhenwert fest (Standard: 400).
• Höheneinheit bestimmt, wie der Wert interpretiert wird:

Einheit	Beschreibung
px	Feste Pixel-Höhe (Standard).
vw	Prozent der Viewport-Breite. Skaliert mit der Browser-Breite.
vh	Prozent der Viewport-Höhe. Skaliert mit der Browser-Höhe.
svh	Kleine Viewport-Höhe (mobil): rechnet die Adressleiste mit ein.
lvh	Große Viewport-Höhe (mobil): ohne Adressleiste.
dvh	Dynamische Viewport-Höhe (mobil): wechselt zwischen svh und lvh, je nachdem, ob die Adressleiste sichtbar ist.

Tipp

Für mobile Templates empfehlen wir svh oder dvh statt vh. Reines vh führt auf iOS-Browsern dazu, dass das Karussell beim Scrollen unter die Adressleiste verschwindet.

Abstand zwischen Bildern (px)

Bestimmt den Abstand zwischen Hauptbild und Vorschauleiste sowie zwischen den einzelnen Vorschaubildern. Standardwert: 6 px.

Rundung der Ecken

Die Optionen Rundung der Ecken (px) und Rundung anwenden auf wirken für Swiper- und Static-Galerien gleichermaßen.

• Rundung der Ecken (px): 0 (scharfe Ecken, Standard) bis 30 px.
• Rundung anwenden auf:
  • Jedes Bild einzeln: Haupt- und Vorschaubilder erhalten jeweils abgerundete Ecken.
  • Nur die äußeren Ecken der Galerie: ausschließlich die vier äußeren Ecken der gesamten Galerie sind abgerundet, einzelne Bilder behalten scharfe Ecken.

Bildauflösung und srcset

Die Swiper-Galerie verwendet wp_get_attachment_image() und liefert damit automatisch ein vollständiges srcset mit allen registrierten Bildgrößen aus. Der Browser wählt anhand der Anzeigeposition und der Pixeldichte des Geräts (z. B. 2× auf Retina-Displays) die passende Variante. Daher gibt es im Customizer keinen “Pixelmaße”-Eintrag für die Swiper-Galerie — eine manuelle Größenwahl wäre für die vom Browser tatsächlich geladene Datei wirkungslos.

Für die Bildqualität ausschlaggebend ist die Original-Auflösung der hochgeladenen Fotos. Sind diese ausreichend hoch, liefert WordPress automatisch die passende Größe für jede Geräteklasse aus.

Für Entwickler

Das Verhalten lässt sich über Filter-Hooks und CSS-Variablen weiter anpassen — siehe Galerie-Library: Anpassen.

Die Galerie kann auch außerhalb der Detailseite über den Galerie-Shortcode eingesetzt werden.

Das könnte Sie auch interessieren

• Bildergalerie: Statisches Bild
• Galerie-Library: Shortcode
• Galerie-Library: Anpassen
• Verarbeitung der Immobilien-Bilder