Der Galerie-Block des WordPress Blockeditors lässt nicht allzu viele alternative Gestaltungsmöglichkeiten zu. Wir möchten nun dennoch unkompliziert ein sogenanntes Masonry-Grid bekommen und erklären, was dafür nötig ist. Gleich vorweg, wir arbeiten hier nur mit einer Zusatzklasse am Standard WordPress Gallerie-Block und etwas CSS für die Darstellung. Es wird also explizit kein Javascript verwendet, was die „Puristen“ des Webs sicher erfreut.
Wenn wir nun Inhalte wie Bildergalerien, Teaser-Boxen oder dynamische Elemente optisch auflockern und gleichzeitig effizient anordnen möchte, stoßen wir schnell auf das sogenannte Masonry-Prinzip. Masonry-Grid steht für das „Mauerwerk-Raster“, um es ins deutsche zu holen, wenngleich das eher weniger im Sprachgebrauch genutzt wird. Das Mauerwerk beschreibt also die versetzte Darstellung der Bilder. Statt starrer Zeilen und Spalten orientiert sich dieses Layout an einer organischen, lückenoptimierten Struktur, ähnlich dem Aufbau eines Mauerwerks. Gerade bei unterschiedlich hohen Elementen, welche sonst lästig im einheitlichen Aufbau sind, entfaltet es seine volle Wirkung. Die Umsetzung bringt jedoch Herausforderungen mit sich: Während klassische CSS-Raster schnell an ihre Grenzen stoßen, greifen viele Lösungen auf JavaScript zurück. In diesem Beitrag zeigen wir einen Ansatz, welcher mit einer modernen Variante aufwartet und obendrein mit reinem CSS auskommt.
- Als erstes benötigst du ein Gallery-Block, in dem du deine Bilder einfügst.
- Dieser braucht die Klasse „
.dwp-masonry„. - Den Rest erledigt das nachfolgende CSS.
Die weiteren im CSS genannten Klassen wie „.columns-“ werden durch dem Galerie-Block von WordPress erzeugt. Wir nutzen diese Klassen gleich mit und damit ist sichergestellt, dass du weiterhin die Spalten deiner Galerie im Backend steuern kannst und das Grid genauso dargestellt wird. Auch die Funktion der zufälligen Reihenfolge kannst du weiterhin festlegen.
Hier nun das CSS, welches du in deinem Child-Theme (oder auch im Customizer) unterbringen kannst.
.dwp-masonry.columns-default {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
}
.dwp-masonry {
display:block !important;
}
.dwp-masonry .wp-block-image {
width:100% !important;
margin-bottom:var(--wp--style--unstable-gallery-gap) !important;
}
.dwp-masonry.columns-1 {
-webkit-columns: 1;
-moz-columns: 1;
columns: 1;
}
.dwp-masonry.columns-2 {
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
.dwp-masonry.columns-3 {
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
}
.dwp-masonry.columns-4 {
-webkit-columns: 4;
-moz-columns: 4;
columns: 4;
}
.dwp-masonry.columns-5 {
-webkit-columns: 5;
-moz-columns: 5;
columns: 5;
}
.dwp-masonry.columns-6 {
-webkit-columns: 6;
-moz-columns: 6;
columns: 6;
}
.dwp-masonry.columns-7 {
-webkit-columns: 7;
-moz-columns: 7;
columns: 7;
}
.dwp-masonry.columns-8 {
-webkit-columns: 8;
-moz-columns: 8;
columns: 8;
}
Das ist also eine schnelle und effiziente Möglichkeit, dein WordPress Galerie-Block als Masonry-Grid darzsutellen. Es reicht bereits eine Klasse und ein wenig CSS und du kannst dir zusätzliche Plugins oder gar JavaScript sparen. 🙂
Hier noch ein Beispiel, wie es dann aussehen kann.
Beide Beispiele nutzen exakt die gleichen Bilder und Reihenfolge, lediglich die Klasse „.dwp-masonry“ wurde im Galerie-Block für den CSS-Masonry-Stil ergänzt.
Standard-Galerie im 5er-Raster (ohne Extras)
Standard-Galerie im 5er-Raster mit Masonry-Stil