Die minimale Lightbox: eines von 1000 WordPress Plugins reicht

Was ist eine Lightbox?

Im Webdesign hat sich die Bezeichnung Lightbox etabliert, wenn ein Bild, ein Video oder sonstiger Inhalt herausgehoben dargestellt wird:

• Losgelöst vom umgebenden Kontext
• Meistens in einer vergrösserten Ansicht (Zoom)
• Mehr oder weniger schwebend vor dem sonstigen Inhalt
• Oft eingerahmt, mit abgedunkeltem Hintergrund

Oft sieht man gleich eine ganze Galerie (Gallery) von Bildern, Videos usw. in einer Lightbox hervorgehoben vom Rest, mit Vorwärts- / Rückwärts-Buttons zum Durchblättern.

Mit dem guten, alten HTML allein ist das nicht zu machen.

Aber seit Lokesh Dhakar 2005 allen gezeigt hat, wie das in Javascript geht, gibt es Lösungen ohne Ende.

Allein für WordPress – gefühlt – ungefähr 1.000!

Was kann WordPress ohne Plugin?

WordPress überlässt das Feld weitgehend den Plugins, wenn es um schicke Lightboxen und Galerien geht. Ohne Plugin sieht’s eher schlicht aus, mit der hervorgehobenen Darstellung von Bildinhalten.

Hier mal ein Beispiel, wie das "vorne", im Frontend, für Benutzer aussieht, wenn sie auf ein Bild klicken.

Das Bild wird auf eine einstellbare Grösse gebracht und der Hintergrund einfach schwarz. Man darf beliebig darauf herumklicken. Passiert nichts.

Erst mit Betätigen des "Zurück" Buttons im Browser geht es zurück zur Ausgangsstellung.

Dito mobil, in der Darstellung auf einem Handy. Mit dem Unterschied, dass man mit zwei Fingern das Bild heranzoomen kann.

Achtung: Disclaimer.

Das Ganze ist in WordPress natürlich abhängig davon, welches Theme aktiv ist. In meinem Fall ist es GeneratePress.

Ach und: Überraschung!

Im Backend von WordPress sieht es gleich ganz anders aus, wie der folgende Ausschnitt aus einem Screenshot zeigt.

Wer im WP Backend z.B. auf Plugins > Installieren geht und dort zu irgendeinem Angebot auf weitere Details

• dem springt eine deutlich freundlichere Box entgegen
• mit dezent abgedunkeltem Hintergrund
• und einem "schliessen" Kreuzchen oben rechts

Hier darf man sogar überall auf den Hintergrund klicken und die Lightbox verschwindet wieder.

Warum nicht einfach und überall so???

Wie viele Lightbox- und Gallery-Plugins gibt es für WordPress?

Themes wie GeneratePress bringen keine Lightbox-Funktionalität mit. Das dürfte ein Grund sein, warum es für WordPress so dermassen viele Lightbox- und Gallery-Plugins gibt.

Zum Stichwort lightbox zeigt WordPress derzeit jedenfalls 1.036 Einträge mit installierbaren Plugins, verteilt auf 29 Seiten.

Die beliebtesten 9 Lightbox-Plugins zeigt das Titelbild zu diesem Beitrag, oben.

Auf Platz 6 ist mein aktueller Favorit zu finden, Lightbox for the Default Gallery & Image Block (…).

Mehr dazu, und warum, gleich …

Lightweight Lightbox-Plugins: schlank, schlanker, am schlanksten?

So weit ich weiss und mich erinnern kann 🙂 ist die ganze Lightbox-Geschichte eng mit jQuery verbunden. Diese Programmier-Bibliothek für Javascript (Library) gibt es ungefähr so lange schon, wie es Lightbox-Skripte gibt.

Und ausgerechnet dieses jQuery ist in den letzten Jahren in Verruf geraten. Unter Entwicklern gehört es schon länger zum guten Ton, auf den "Dinosaurier" möglichst zu verzichten, zugunsten leichterer Bibliotheken oder gleich der reinen Javascript-Programmierung.

Stellvertretend zwei Beispiele.

• Heise Online hat schon 2019 begonnen, jQuery kilobyte-weise von den Websites zu räumen (Link s. Quellen unten).
• Tom Usborne, der Chefentwickler von GeneratePress, GenerateBlocks und WP ShowPost wird regelmässig nach dem leichtesten aller leichten Lightbox-Plugins gefragt. Regelmässig ist die Antwort: Ohne jQuery geht’s nicht. Und wenn schon, dann mit dem Plugin WP Featherlight. Auf der eigenen Website setzt Tom auch auf eine Lösung mit jQuery, aber ohne Plugin, die Lity Library von Jan Sorgalla (Links s. Quellen unten).

Als bekennender Fanboy von Tom Usborne, seinem Team, seinem Theme und den meisten seiner Plugins musste ich das natürlich ausprobieren, mit Lity.

Leider nicht zu meiner Zufriedenheit.

Zu kompliziert aufzusetzen.

Zu wenig zu bieten.

Meiner Ansicht nach die eindeutig bessere Option ist Lightbox for the Default Gallery & Image Block (…), das WordPress-Plugin von Johannes Kinast.

Dieses Plugin basiert auf dem Skript baguettebox von Marek Grzybek aka feimosi.

(Links s. Quellen unten)

Lightbox for the Default Gallery & Image Block

Ok. Der Name. Also: eingängig ist anders. Gut zu merken, auch.

Und das in Graustufen gehaltene Thumbnail-Bildchen in der Teaser-Box?

Mehr so technisch.

Eher nicht so verführerisch.

Zugegeben 🙂

Aber das ist bei diesem Plugin Programm.

Hier steht leicht drauf. Sieht leicht aus. Und ist auch leicht drin:

• Pures Javascript
• Keine Abhängigkeiten, z.B. von jQuery
• Inklusive Bildbeschriftungen (Captions)
• Für unterschiedliche Bildschirmgrössen (responsive)
• Unterstützt Swipe-Gesten auf Touch-Screens
• Klinkt sich automatisch in die Standardblöcke für Bilder und Galerien ein

Also: Installieren und glücklich sein.

Und so sieht’s aus, zum Beispiel:

Einzustellen gibt es dazu: nichts!

Mit 2 kleinen Ausnahmen, was Beitragsbilder und Mediendateien betrifft.

Was ist mit Beitragsbildern (Featured Images)?

Beitragsbilder (Featured Images) sind in WordPress anders als normale Bilder (Images). Sie fungieren meistens als Link zum ganzen Beitrag (Post).

Das Beitragsbild zu einem Post wird im Gutenberg Block-Editor gesetzt:

• Dazu oben rechts aufs Zahnrad klicken, um die Einstellungen für den Beitrag und den aktuell ausgewählten Block zu sehen
• Dort auf den Beitrag-Tab wechseln und
• den Abschnitt Beitragsbild aufklappen.

Hier das (gezeigte) Beitragsbild auswählen, ersetzen oder entfernen.

Falls der Abschnitt Beitragsbild nicht sichtbar ist:

• oben gaaanz rechts aufs Drei-Punkte-Menü
• dort gaaanz unten auf Voreinstellungen
• im Popup auf Bedienfelder
• unter Dokument-Einstellungen darauf achten
• dass der Schieber auf Beitragsbilder

geschoben und somit aktiviert ist (z.B. blau markiert).

Ja. Nein.

Ich habe nie gesagt, dass mich die ganze WordPress User Experience jemals überzeugt hätte. Mit Gutenberg hat sich das nicht geändert. Aber was soll man machen? 🙂

Haben wir es dann also mal geschafft, das Beitragsbild zum Beitrag zu setzen, fungiert es, wie es soll, z.B. in Post Archive Übersichtsseiten mit

• Thumbnail (Beitragsbild) und
• Excerpt (Textauszug, Kurzfassung, z.B. die ersten 35 Wörter).

Was hat das mit der Lightbox zu tun?

Eben. Nichts.

Der Link ist ja schon besetzt.

Er kann nicht doppelt auch noch zur Verlightboxung des Thumbnails dienen.

Das ist erwartbar. Aber was ist, wenn das Beitragsbild auch im Beitrag selbst gezeigt wird?

Jetzt wird es skurril.

Beispiel: das Theme GeneratePress.

Unter Customizer > Layout > Blog kann ich für die Archive- und die Einzel-Darstellung diverse Optionen einstellen.

Ganz unten unter Beitragsbilder findet sich die Einstellung, ob Beitragsbilder angezeigt werden sollen.

Diesmal für Archive-, Beitrags- und normale Seiten getrennt.

Checke ich diese Checkboxen, sorgt das Theme brav dafür, dass auf den entsprechenden Seiten das jeweils zugeordnete Beitragsbild eingebaut ist.

Nur, jetzt, leider, ganz ohne Link oder mit einem Link auf denselben Beitrag. Und den kann ich nicht ändern.

Gut ok. Man ist ja flexibel.

Also hier bitte: alle Checkboxen auf ohne Haken.

Und mal schauen, was der Gutenberg-Editor noch so zu bieten hat.

Aaah! Tatsache! Da gibt es einen eigenen Block Beitragsbild.

Der hat auch ein Setting: möchte ich das Beitragsbild mit Link zum selben Beitrag – oder lieber ohne?

Äääh?!

Ich mag mir im Moment nicht ausmalen, unter welchen Umständen diese Funktion einen Sinn hätte …

Für mich zählt: dieser Block ist für meinen akuten Zweck unbrauchbar.

Vor allem ist er für das Lightbox-Plugin sowieso nicht erreichbar, weil es eben kein Standard-Image- und kein Standard-Galerie-Block ist.

Meine Lösung kann also nur sein:

• Beitragsbilder werden nirgends per Default eingefügt / angezeigt
• In der Regel ist mein Beitragsbild das erste Bild im Beitrag
• Das möchte ich auch so sehen
• Und zwar überall, frontend wie backend
• Deshalb ordne ich das Beitragsbild wie oben beschrieben zu
• Zusätzlich füge ich dasselbe Bild als normalen Bild-Block ein
• Am Anfang des Artikels, gleich nach dem Titel-Block

Et voilà.

Finally.

Eine einzige Plugin-Einstellung wäre dann aber vielleicht doch gar nicht so schlecht:

Das Lightbox-Plugin startet nur im Frontend. Die Backend-Darstellung im Editor unterscheidet sich deutlich und öffnet auf Klick keine Box.

Wenn das optional wäre, würde ich glatt noch mal eine Bewertung schreiben 🙂

Neuer Default: Bilder mit Mediendateien verlinkt

Das Wichtigste zum Schluss. So ein Lightbox-Plugin muss nicht nur leicht sein. Es muss auch bequem sein.

Das Plugin von Johannes Kinast macht das schon ganz hervorragend. Bis auf die Sache mit den Links zu den Mediendateien.

Wie Johannes in der FAQ richtig schreibt, wird das Plugin nur aktiv, wenn

• das betreffende Bild in einem Bild- oder Galerie-Block wohnt
• und das Link-Attribut auf Mediendatei gesetzt ist (s. Bild)

Leider, leider ist das in meinen WordPress-Installationen nicht der Default.

So praktisch es ist, für jedes Bild einzeln zu entscheiden, ob auf Klick die Lightbox anspringen soll, oder nicht.

Wenn wir davon ausgehen, dass den allermeisten Bildern eine Lightbox ausgezeichnet ansteht, vor allem in der mobilen Darstellung auf Handys usw.:

Da wäre es doch sehr sinnvoll, diese Bilder-Links standardmässig, per Default, auf Mediendatei zu setzen.

Da macht WordPress auch mit.

Leider nicht so zugänglich, wie ich mir das wünschen würde. Die Einstellung dafür findet sich nämlich nur in der Datei

../wp-admin/options.php

Immerhin ist diese Datei im Backend für eingeloggte Admin User verfügbar.

Am besten sucht man per [Strg] f nach image und landet wie im Bild gezeigt bei den drei Einstellungen, die hier relevant sind.

Im Feld image_default_align kann man sich nach Vorliebe für center, left oder right entscheiden.

Im Feld image_default_link_type tragen wir unbedingt file ein, um den Default-Link von Bildern auf Mediendatei zu setzen (aus reiner Bequemlichkeit, siehe oben 🙂 )

Und im Feld image_default_size trage ich large ein, damit die Lightbox genug Stoff zum Zoomen hat. Hier kann sparsamer auch medium oder small gewählt werden. Wenn einem dafür ein Grund einfällt, den ich mir gerade nicht vorstellen kann …

Und wem dieses Gefrickel zu kompliziert und umständlich ist, der kann sich mal wieder mit einem Code Snippet behelfen.

Einfach ins gleichnamige Plugin klicken und diese Zeile eintragen:

add_filter('option_image_default_link_type', fn () => 'file');

Der Trick ist nicht von mir, sondern vom Plugin-Autor höchstselbst, in diesem Support Thread mit mir.

Und so sieht das Code Snippet bei mir im Backend aus:

Also mal ehrlich: was will man jetzt noch mehr?!

🙂

Quellen

Heise Online: Technische Schulden: jQuery entfernen

Jan Sorgalla: Lity – lightweight, accessible and responsive lightbox

Marek Grzybek aka feimosi: baguettebox.js (GitHub)

WordPress Plugins: Lightbox for the Default Gallery & Image Block

WordPress Plugins: WP Featherlight – A Simple jQuery Lightbox