Masonry ist ein Raster-Layout-Stil, bei dem Inhalte in Spalten angeordnet werden. Das macht es zu einer beliebten Wahl für Bildgalerien, da sich Bilder unterschiedlicher Abmessungen ordentlich und ohne Lücken anordnen lassen.
Dies ist ein Beispiel für ein Masonry-Layout mit der Essential Portfolio-Vorlage (links).
DPG hat Masonry-Layouts bereits in mehreren Series-2-Vorlagen verwendet. Mit Series 3 haben wir Masonry mit den neuesten Webtechnologien neu geschrieben, um seine Funktionalität zu verbessern. Aus diesem Grund funktioniert Masonry in Series 3 etwas anders.
Was ist neu?
In Series 3 bietet die Essential Portfolio-Vorlage zwei verschiedene Masonry-Layouts – Masonry und Horizontal Masonry.
Wenn du die Funktionsweise von Masonry aus früheren Vorlagen gewohnt bist, fällt dir als erste Änderung vielleicht die Reihenfolge der Bilder auf der Seite beim Masonry-Layout auf. Lies weiter, um den Unterschied kennenzulernen.
Spaltenfüllung
Bei Masonry wählst du die Anzahl der Spalten, und die Gesamtzahl der Bilder im Set wird auf diese Spalten verteilt. Die Bilder werden durch die Breite der Spalte begrenzt, sodass Hochformatbilder größer dargestellt werden als Querformatbilder.
Wenn nicht alle deine Bilder exakt dieselben Abmessungen haben, ist der untere Rand der Galerie nicht perfekt gleichmäßig.
Bei Horizontal Masonry füllen Hochformatbilder 1 Spalte, während Querformatbilder 2 Spalten füllen. Die Höhe der Zeilen innerhalb der Spalten ist einheitlich, sodass Bilder mit unregelmäßigen Abmessungen (sehr hohe Hochformate, sehr breite Querformate) leicht zugeschnitten werden, um sich in das Raster einzufügen.
Wenn die Anzahl der Bilder im Set nicht alle Spalten-„Slots“ füllt, können am unteren Rand der Galerie Lücken entstehen.
Reihenfolge der Medien
Masonry verläuft in nach unten gerichteten Spalten. Wie das Beispiel links zeigt, beginnen die Bilder in der ersten Spalte und stapeln sich vertikal nach unten, bis sie das untere Ende erreichen; dann erscheint das nächste Bild oben in der zweiten Spalte und so weiter.
❗️Das ist der wesentliche Unterschied im Verhalten gegenüber dem Masonry aus Series 2, bei dem Bild 1 in Spalte 1 begann und Bild 2 dann in Spalte 2 erschien.
❗️Das bedeutet, dass die benutzerdefinierte Reihenfolge der Bilder bei diesem Layout im Admin schwer zu steuern sein kann, da das Raster sie dort in horizontalen Zeilen anzeigt.
Um Verwirrung zu vermeiden, ordnest du die Reihenfolge des Masonry-Layouts am besten über den Bereich Design an, wo du sie einfach per Klicken und Ziehen frei in eine eigene Reihenfolge über die Spalten hinweg bringen kannst.
Horizontal Masonry folgt hingegen einer horizontalen Reihenfolge. Du kannst es weiterhin im Bereich Design anordnen, aber die Reihenfolge bleibt in der Sets-Ansicht erkennbar gleich.
