Word­Press-Galerie im Masonry-Look darstellen

Word­Press bietet mit der Galerie ein nettes Feature, um mehrere Bilder hübsch darzustellen. Wenn aber hoch- und querformatige Fotos gemischt werden, entstehen unschöne Leerräume zwischen den Reihen. Mit ein wenig CSS-Code lässt sich das beheben und die Bilder erscheinen im hübschen Masonry-Stil.

Erstellen Sie zunächst eine Galerie mit den gewünschten Bildern aus Ihrer Word­Press-Mediathek.

Um der Galerie den Masonry-Look beizubringen, benötigen Sie folgende CSS-Zeilen. Fügen Sie diese Ihrem CCS-Stylesheet unter Design/Customizer/Zusätzliches CSS hinzu:

• In den Zeilen 2-4 definieren Sie, wie viele Spalten nebeneinander dargestellt werden sollen. In unserem Beispiel sind es deren 5, Passen Sie ihn nach Wunsch an – verwenden Sie aber in allen Zeilen den selben Wert.
  Hier böte es sich an, diesen Wert allenfalls mit einer Media-Query den verschiedenen Bildschirmgrössen anzupassen, auf welchen die Galerie angezeigt wird.
• In den Zeilen 5-7 wird dann festgelegt, wie weit auseinander die einzelnen Bild-Spalten angezeigt werden sollen. Diesen Wert haben wir hier überall auf 0px gesetzt. Auch diese Werte können Sie verändern.
• In den Zeilen 11-13 legen Sie weitere Ränder und Abstände fest, welche bei uns auf 0px stehen. Spielen Sie auch mit diesen Werten, bis die Darstellung dem entspricht, was Sie sich wünschen.

Easy. Oder?