Eine Bildergalerie sollte eine Standard-Funktion in jedem CMS sein, aber ich muss sagen: Die Galerie, die WordPress in den Editor Gutenberg gebaut hat, funktioniert nicht richtig. Bilder sind oft entweder komisch abgeschnitten, es fehlen also Teile. Oder sie sind in der Größe komisch versetzt mit Leerräumen. Großansichten lassen sich nicht durchwischen, sondern nur schließen und das nächste Bild öffnen. Es gibt verschiedene Konzepte, wie eine Galerie statt dessen aussehen könnte:
Typen von Galerien
Die verschiedenen Arten, wie eine Galerie aussehen kann, richten sich mehr nach dem Zweck und weniger den Bildern. Manche Designs sind geeignet, um wenige Bilder gut sichtbar zu machen. Andere dienen eher dazu, viele mittelmäßige Bilder so zu versenken, dass sie die restliche Seite nicht stören.
Grid

Ein Beispiel für ein Grid ist die Galerie, die in WordPress eingebaut ist. Sie kachelt die Bilder in ein festes Raster. Nur die letzte Zeile wird mit den verbleibenden Bildern aufgefüllt. Das sieht sehr aufgeräumt aus. Zweispaltige und dreispaltige Galerien lassen sich abwechseln, so dass unterschiedlich große Bilder eine visuelle Hierarchie erzeugen.
Der Nachteil dieser Galerie ist, dass alle Bilder einer Reihe das gleiche Seitenverhältnis haben müssen. Die Kreativität ist sehr eingeschränkt.
Ausgerichtet (Justified)

Sehr ähnlich wie das Grid funktioniert die Justified-Galerie. Die Bilder können in einem festen Raster angeordnet sein, aber wenn Bilder ein anderes Seitenverhältnis haben, wird das berücksichtigt. Diese Galerie ist denke ich besonders häufig zu finden. Charakteristisch ist, dass die Zeilen unterschiedlich hoch sind, weil sich die Höhe aus den Breiten ergibt. Es gibt aber auch Justified Galerien, die zu den Seiten ausgefranst sind. Die Anordnung muss man sich vorstellen wie beim Text-Schreiben: Ist die Zeile mit Bildern voll, kommt das nächste Bild in die Zeile darunter.
Flattersatz Unterschiedliche Höhen
Masonry

Masonry hieß die erste Umsetzung dieser Galerie in Javascript, aber mittlerweile gibt es viele Versionen dieser Idee. Die Bilder sind ordentlich angeordnet im Raster der Webseite, egal welches Seitenverhältnis sie haben. Auf den ersten Blick wirkt die Galerie also aufgeräumt. Allerdings lässt sie sich schlecht mit den Augen durchsuchen, da keine Zeilen existieren.
Der Hauptgrund für diese Galerie ist wahrscheinlich, etwas anders machen zu wollen und aufzufallen. Bilder im Querformat bekommen im Masonry kaum Fläche, wärend sie bei Justified besonders groß sind.
Squared

Einfach die Bilder in Quadrate zuschneiden ist die Antwort, wenn der Designer die Bilder hasst. Instagram wurde mit dieser Galerie groß. Sie eignet sich für beliebige Fotos von Benutzerinnen, die ungeprüft veröffentlicht werden müssen und in einer langen Seite wenig auffallen sollen.
Slider (Karussell)

Einen Slider baut der Designer ein, wenn er sowohl die Bilder hasst als auch die Besucher. Oft entstehen Slider aus Vorgaben von Komitees, in denen nach langen Verhandlungen ein schlechter Kompromiss gefunden wurde. Wenn sich zum Beispiel in einer sozialen Organisation Marketing, Fundraising, Kampagnen-Redaktion und Projekt-Abteilungen um die Platzierung auf der Startseite streiten, wird oft ein Slider gefordert, in dem alles irgendwie zu sehen ist. Ob die Präsentation für die Besucher ansatzweise verständlich wird, ist völlig egal.
Ein anderer Nutzen von Slidern ist das Generieren von Klicks. Bei jedem Umschalten auf das nächste Bild wird eine neue Werbung eingeblendet. Die Bilder werden nicht mehr übersichtlich dargestellt, sondern sind nur noch Karrotten fürs Klickvieh.
Slider funktionieren, wenn unnötige Bilderstrecken von Usern kommen und versenkt werden müssen, um die Seite nicht zu sprengen. Daher haben alle Sozialen Netzwerke Slider. Sobald es eine Redaktion gibt, sind sie nicht nötig: User sind vertikales Scrollen gewöhnt, die Galerie kann einfach lang nach unten gehen.
Amazon und Facebook haben eine spezielle Form von Slidern, die etwas besser funktionieren: Es werden nur wenige Bilder angezeigt, aber über eine Schaltfläche lassen sich alle weiteren Bilder gut durchklicken.
Beispiel Amazon Beispiel Facebook
Tiles

Eigentlich sind Tiles auch wieder nur Kacheln. Aber diesmal geht es um den Gesamteindruck. Die Seite soll super aufgeräumt aussehen mit einem gleichmäßigen vertikalen Raster ohne Lücken. Hochformat bleibt Hochformat, Querformat bleibt Querformat. Dafür werden die Bilder gnadenlos umsortiert und leicht beschnitten. Hier geht es nicht um die perfekte Darstellung des einzelnen Fotos, sondern um den Gesamteindruck. Stellt euch einen Bericht über eine Reise vor. Die Reportage-Fotos müssen nicht in ihrem exakten Zuschnitt wiedergegeben werden, sondern die Reise soll als Ganzes wirken.
Und in WordPress?
Ich habe ein paar Anforderungen formuliert, die ein Galerie-Plugin meines Erachtens mindestens erfüllen muss. Die Punkte sind nicht willkürlich nach Geschmack gewählt, sondern entsprechen der optimalen Umsetzung in WordPress. Wenn ein Plugin nicht alles erfüllt, ist es veraltet oder schlecht programmiert.
- Die Galerie muss sich direkt in Gutenberg zusammenbauen lassen. Es ist nicht mehr nötig, die Galerien auf speziellen Seiten zentral zu erstellen und auf den Seiten nur noch einzubinden.
- Die Galerie muss sich mit einem Klick im Editor in die Standard-Galerie von WordPress wandeln lassen. Wenn das nicht geht, müsste die Redaktion für immer beim Plugin bleiben, und so ein Lock-In kommt für mich nicht in frage.
- Die Bilder müssen in verschiedenen Auflösungen angeboten werden. HTML bietet das Attribut srcset, mit dem der Browser entscheidet, welche Größe bei der aktuellen Bandbreite und Bildschirmgröße optimal ist. Ein Handy mit schmalem Internet wird also das selbe Bild in geringer Qualität schnell laden, der Rechner mit 4K-Display dagegen die perfekt scharfe Ansicht. WordPress speichert die Bilder extra dafür in vielen verschiedenen Auflösungen.
- Wenn die Galerie Bilder in groß als Lightbox darstellen kann, müssen auch die großen Bilder in verschiedenen Auflösungen angeboten werden.
Meow
Nach den ganzen harten technischen Vorgaben konnte ich nur ein Plugin finden, das die Anforderungen überhaupt erfüllt. Der Meow Gallery Block kann alle besprochenen Galerie-Typen anzeigen bis auf Justified im Flattersatz. Der Editor für Galerien ist sehr aufgeräumt, der Redaktion werden die Einstellungen leicht gemacht. Die Haupt-Navigation im Backend wird leider mit einer kleinen bunten Werbung zugeklumpt.
Meow Gallery bringt keine Großansicht der Bilder mit, dafür muss Meow Lightbox zusätzlich installiert werden. Das Lightbox-Plugin reißt sich nicht nur die Meow Gallery, sondern auch die normalen Gutenberg-Galerien und einzelne Bilder unter den Nagel und baut sie in eine große Lightbox ein. Der Browser bekommt verschiedene Auflösungen zur Auwahl angeboten, so dass sich jedes Gerät die Qualität zieht, die optimal passt.
Nachteile: Die Meow Gallery legt sich im Modus Justified auf eine einstellbare Zeilenhöhe fest. Die ist auf kleinen Bildschirmen viel zu groß, so dass fast alle Bilder untereinander in einer endlosen Liste erscheinen. Auf großen Bildschirmen dagegen wird die untere Zeile fast nie gefüllt, weil Meow nicht auf die Idee kommt, die Zeilenhöhe zu vergrößern bis es passt. Das Design ist also nur so lala. Das Gute allerdings: Meow arbeitet mit einfachstem CSS, und das lässt sich anpassen. Ich konnte die Galerie umbauen, bis sie mir etwas besser gefiel.