Masonry Wrapper
Masonry ist eine JavaScript grid layout library.
Anpassungen können im Imput-Feld "Column class" durchgeführt werden!
Der Standardwert col-sm-6 col-lg-4 mb-4 erzeugt ein Masonry mit 3 Spalten.
Wenn du ein Masonry mit 4 Spalten erzeugen möchtest, dann müsste die Eingabe z.B. so aussehen:col-sm-6 col-lg-3 mb-4
Filter nach Kategorie
Die Kacheln lassen sich im Browser nach Kategorie filtern – mit shuffle.js.
5.3.52 Neu: die Option Filter nach Kategorie (shuffle.js) im Masonry Wrapper.
Ist die Option gesetzt, steht über dem Raster eine Schaltflächenreihe – eine je Kategorie, dazu „Alle“. Ein Klick blendet die passenden Kacheln ein, shuffle.js ordnet sie neu an und schließt die Lücken.
| Filter nach Kategorie (shuffle.js) | Schaltet den Filter ein. Ab Werk aus – ohne Haken bleibt der Wrapper ein gewöhnliches Masonry. | shuffle |
| Kategorien für den Filter | Mehrfachauswahl aus den System-Kategorien. Die Reihenfolge hier ist die Reihenfolge der Schaltflächen. | shuffleCategories |
| Beschriftung über den Schaltflächen | Vorgabe: „Filtern“ | shuffleLabel |
| Beschriftung der Schaltfläche „alle“ | Vorgabe: „Alle“ | shuffleAllLabel |
Die Kategorie sitzt am Inhaltselement, nicht am Wrapper: Element öffnen, Reiter „Kategorien“. Eine ausgewählte Kategorie, die kein Element im Wrapper trägt, wird weggelassen – eine Schaltfläche, die zu null Treffern führt, ist nur im Weg. Ein Element ohne Kategorie erscheint nur unter „Alle“.
shuffle.js ersetzt masonry.js, solange der Filter aktiv ist. Beide ordnen die Kacheln an und würden um dieselben Positionen streiten, deshalb wird masonry.pkgd dann gar nicht erst geladen.
Die Bibliothek liegt in der Extension (EXT:t3sbootstrap/Resources/Public/JavaScript/shuffle.mjs) – kein CDN, keine weitere Einstellung. Nachgeladen wird sie erst auf einer Seite, die den Filter zeigt. Schlägt das fehl, bleiben die Schaltflächen bedienbar und blenden die Kacheln schlicht ein und aus.
Die Filterwerte stehen im Markup: data-t3sb-categories an der Kachel, data-t3sb-filter-value an der Schaltfläche. Eigenes CSS und eigene Skripte können sich daran halten.
Fehlt die Konfiguration, sagt der Wrapper es im Frontend: keine Kategorie ausgewählt, Wrapper ohne Inhalt, oder kein Element mit einer der gewählten Kategorien.
Beispiel
mit verschiedenen Content-Elementen:
Text & Media
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,L sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,L sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Text & Media
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,L sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Card
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,L sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Card
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,L sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,L sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Text
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,L sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Text & Media
Lorem ipsum dolor sit amet, consetetur sadipscing elitr,L sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.