Wie kann ich eine WordPress Galerie zu einer Masonry Gallery umgestalten?

Dieser Beitrag ist älter als zwei Jahre. Es kann also sein, dass auch der Inhalt - zumindest in Teilen - bereits veraltet ist.

Eine WordPress Galerie ist ja eigentlich eine feine Sache. Doch wie oft schon habe ich mich daran gestört, dass Bilder unterschiedlicher Größe die Ansicht ganz schön zerhacken. Oder wie es so schön auf Neudeutsch heißt: Die Galerie stellt ihre Elemente nicht als Masonry dar. Muss ich also tatsächlich mal wieder ein Plugin installieren, nur damit die Bilder ein bisschen hübscher angeordnet sind? Oder lässt sich eine Masonry Gallery nicht auch einfach mit ein bisschen CSS realisieren?

Was bedeutet Masonry?

WordPress Standard-Galerie
Ziemlich löchrig, die Standard-Galerie

Masonry heißt auf gut Deutsch Mauerwerk. Nun meint das aber nicht unbedingt eine Mauer aus immer gleich großen Steinen. Vielmehr geht es darum, dass die Mauer auch mit Steinen sehr unterschiedlicher Größe noch immer wie eine Mauer aussieht und nicht wie ein Löcherwerk. Übertragen auf die Welt des HTML bedeutet dies, dass sich jedes Element den Platz sucht und einnimmt, in den es hineinpasst.

Die WordPress Standard-Galerie kennt dieses Prinzip nicht. Wenn Sie eine Galerie anlegen und bestimmen, dass sie aus mehr als einer Spalte bestehen soll, gibt immer das höhere Bild auch die Höhe der Zeile an. Beispiel: Die Galerie besteht aus zwei Spalten. Nebeneinander erscheinen ein Bild mit 100 Pixeln Höhe und eines mit einer Höhe von 50 Pixeln. Die gesamte Zeile ist demnach 100 Pixel hoch; die nächste Zeile setzt erst darunter an. Es entsteht also unterhalb des 50 Pixel hohen Bildes eine freie Fläche von 50 Pixeln. Das ist nicht nur verschenkter Platz – es sieht auch unschön aus.

Der einzige Weg aus diesem Dilemma führt entweder über die Wahl des Thumbnails als Galerie-Bild (Thumbnails haben standardgemäß immer in einem Seitenverhältnis von 1:1, sprich: alle Bilder sind gleich hoch) – oder Sie nutzen die Möglichkeit der Darstellung als Masonry. Auf das Beispiel bezogen bedeutet dies: Die einzelnen Elemente verteilen sich dann gleichmäßig in den beiden Spalten.

Eine Masonry Gallery mit CSS definieren – am Beispiel Twenty Sixteen

Für die Darstellung der WordPress Standard-Galerie als Masonry Galerie braucht es nur die Änderung der Klasse .gallery. Mit column-count geben Sie die Anzahl der Spalten an, die gleichmäßig zu befüllen sind. Die Eigenschaft column-gap gibt die Größe des Spaltenabstandes an.

Da nicht jeder Browser die Eigenschaften column-count und column-gap versteht, braucht es für beide zusätzlich alternative Angaben, die dann auch Firefox, Safari und Chrome interpretieren können: -moz-… ist die Angabe, die Firefox versteht; Chrome und Safari hören auf -webkit-…

Im ganzen CSS-Satz lautet die Definition also wie folgt:

.gallery {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
-moz-column-gap: 0.5em;
-webkit-column-gap: 0.5em;
column-gap: 0.5em;
}

Für benutzerdefiniertes CSS stellt Twenty Sixteen keine Optionen zur Verfügung. Bei Themes, die das nicht bieten, ist es sinnvoll, mit dem WordPress Plugin Simple Custom CSS (oder einem Child-Theme) zu arbeiten, damit Ihre Anpassungen das nächste Theme-Update überstehen.

Eine WordPress Galerie erstellen

Eine WordPress Galerie zu erstellen ist ganz einfach. In der Beitragsbearbeitung (oder der Bearbeitung einer Seite) wählen Sie Dateien hinzufügen und dort links in der Auswahl Galerie erstellen. Nun können Sie aus den bereits in der Mediathek vorhandenen Bildern auswählen oder Sie laden die gewünschten Bilder hoch.

Screenshot: WordPress Galerie bearbeiten
Beim Bearbeiten einer Galerie können Sie unter anderem die Reihenfolge der Bilder festlegen

In der Folge zeigt WordPress Ihnen alle Ihre ausgewählten Elemente an, die Sie per Drag & Drop in die gewünschte Reihenfolge bringen und beschreiben können. In der rechten Spalte unter Galerie Einstellungen wählen Sie für Link zur Medien-Datei, als Spalten-Anzahl 1 und als Größe groß. Würden Sie hier als Spalten-Anzahl 2 einstellen, würde die neue CSS-Definition dafür sorgen, dass insgesamt 4 Spalten dargestellt werden; groß sieht besser aus als mittel; der Link zur Medien-Datei sorgt dafür, dass das Bild nach dem Klick in einem eigenen Fenster oder im Rahmen einer bestenfalls installierten Lightbox erscheint.

Ihre Masonry Galerie könnte dann ungefähr so aussehen:

WordPress Masonry Gallery
Dieselbe Galerie als Masonry Gallery

 


Alle Bilder: Britta Kretschmer

 

 

Ein Gedanke zu „Wie kann ich eine WordPress Galerie zu einer Masonry Gallery umgestalten?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Nach oben scrollen