Bitte beachte, dass sich diese Dokumentation auf die neuste Version dieser Erweiterung bezieht. Wenn eine ältere Version eingesetzt wird, kann diese abweichen. Die jeweils passende Dokumentation befindet sich im Dokumentation-Verzeichnis der Erweiterung.
Masonry erstellen
Wechsel in das Listen-Modul und aktiviere den Masonry Daten-Container im Seitenbaum. Hier klickst Du auf Datensatz hinzufügen und erstellst einen Masonry-Datensatz.
In diesem Datensatz vergibst Du als erstes einen Titel, so dass Du den Masonry-Datensatz wieder erkennen kannst. Auf dem Tab Items hast Du jetzt die Möglichkeit beliebig viele Items in Deinem Masonry zu erstellen - mehr dazu im nächsten Abschnitt. Auf dem Tab Grid gutter kannst Du den Abstand zwischen Deinen Masonry-Items festlegen. Dieser Abstand wird in Pixeln angegeben. Des Weiteren hast Du die Möglichkeit den Abstand je nach responsiver Auflösung unterschiedlich groß zu gestalten.
Masonry-Items
Masonry-Items sind die unterschiedlichen Blöcke Deines Masonry. Jedes Masonry kann beliebig viele Masonry-Items enthalten - folgende Typen sind vorkonfiguriert vorhanden:
- Default: Dieses ist das Standard Masonry-Item und enthält alle Datenfelder.
- QR-Code: In diesem Masonry-Item wird eine URL als QR-Code angezeigt.
- Owl-Carousel: In diesem Masonry-Item kann eine Slideshow/Bildslider angezeigt werden.
- Background-Image: Dieses Masonry-Item zeigt ein Hintergrundbild an.
- HTML: Mit diesem Masonry-Item können einfach HTML-Inhalte angezeigt werden.
Jedes Masonry-Item hat die folgenden Felder:
Template: Über die Template-Auswahlbox können verschiedene Fluid-Varianten des Masonry-Items bereitgestellt werden.
Description: Das Beschreibungsfeld ist für interne Informationen vorgesehen.
Responsive settings: Über die responsive Settings wird angegeben, wie groß ein Masonry-Item in jeweiligen responsiven Stufen ist. Generell wird (ähnlich wie bei Bootstrap) zwischen den folgenden Auflösungen unterschieden:
- Extra small devices (portrait phones)
- Small devices (landscape phones)
- Medium devices (tablets)
- Large devices (desktops)
- Extra large devices (large desktops)
In jeder dieser responsiven Stufen muss nun die Breite und die Höhe angegeben werden. Dabei orientieren wir uns wieder am Konzept von Bootstrap - das heißt wir unterteilen die komplette Breite in ein 12er Grid. Somit kann das kleinste Masonry-Item 1/12 der gesamten Breite klein sein. Die Höhe eines Masonry-Items orientiert sich ebenfalls am 12er Grid und kann immer um 1/12 wachsen.
Nach dem Du das Masonry-Objekt erstellt hast, kannst Du es mit Hilfe eines Masonry-Inhaltselements auf beliebigen Seiten platzieren.
TYPO3 Masonry
Diese Erweiterung enthält ein vollständig konfigurierbares Masonry-Inhaltselement.