Gutenberg Gallery-Block mit Lightbox ausstatten

Mir gefällt der standardmäßig mitgelieferte Gallery-Block von Gutenberg sehr gut. So gut, dass ich eigentlich keinen Grund sehe, auf ein extra Gallery-Plugin zu setzte. Leider gibt es ein großes Manko: Standardmäßig wird keine Lightbox mitgeliefert. Die vielen schönen Bilder wollen die Besucher natürlich gerne im Vollbild anschauen und das ist sonst nur mit viel vor und zurück klicken möglich.

Umsetzung

Zum Glück kann man eine Lightbox aber relativ einfach mit etwas JavaScript nachrüsten. Ich habe mich für BaguetteBox.js (Danke an René Hesse für den Tipp) entschieden. Keine Abhängigkeit von jQuery und nur 3,2kb gezipped groß!

Damit BaguettBox.js die Bilder in der Gallery in der Lightbox darstellt kann, reicht eine Zeile zusätzliches JavaScript aus:

baguetteBox.run('.wp-block-gallery');

Zusätzlich kann man auch noch die Bildbeschreibung abgreifen und in der Lightbox anzeigen lassen:

var options = {
	captions: function (element) {
		var figcaption = element.parentElement.getElementsByTagName('figcaption')[0];
		if (figcaption) {
			return figcaption.textContent;
		}
		return false;
	},
};
baguetteBox.run('.wp-block-gallery', options);

Plugin downloaden

Ich habe das ganze in einem kleinen Plugin realisiert. Es registriert die zwei JavaScript- & CSS-Datein ein, lädt sie aber nur, wenn im Content der aktuellen Seite auch eine Guteberg Gallery gefunden worden ist.

Ihr könnt das Plugin bei Github herunterladen und in eurer WordPress-Installation hochladen & aktivieren:

Klickt dazu einfach in der Github Repository auf Clone or download und wählt Download ZIP aus oder folgt einfach diesem Link zu zip-Datei.

Achtung

Es ist nur möglich die Lightbox anzuzeigen, wenn in Gutenberg bei der Gallery Link zur Medien-Datei ausgewählt ist. Sonst findet BaguetteBox.js keinen Link zur Bilddatei, die es in der Lightbox anzeigen lassen soll.

Noch nicht perfekt

Ein paar Sachen stören mich etwas:

1. Die Erkennung, ob der Gallery-Block in dem Post eingebunden ist, erfolgt über den the_content filter und sucht einfach im Content nach wp-block-gallery. Besser wäre ein Filter oder Action, die nur ausgelöst wir wenn der Block eingebunden ist.
2. Leider fügt Gutenberg als Link zur Medien-Datei nicht den Link mit der Vollständigen Auflösung ein sondern die gleiche URL wie sie im src-Attribut verwendet wird. Meistens in einer reduzierten Auflösung aber immerhin meistens Groß. Für meine eigenen Seiten verwende ich aktuell einen Workaround per JavaScript, der Auflösung z.B. Bali-840x560.jpg aus dem href-Attribut entfernt → Bali.jpg:

document.querySelectorAll( '.wp-block-gallery a' ).forEach( function (element) {
	element.href = element.href.replace( /(-\d{2,4}x\d{2,4})+(?=\.\w{3,4}$)/g, '' );
} );

Falls ihr Verbesserungsvorschläge habt, hinterlasst gerne ein Kommentar.

In Aktion

Hier das Plugin in Aktion mit Bildern von meiner Reise nach Bali: