Masonry - das Pinterest-Modul

Holger Weischenberg | Di, 29. Mär. 2016 - 15:33

Rasterfari my content gallery

Falls ihr auf eurer Website eine Bilder- oder Content-Sammlung aufbauen wollt, die auf einem flexiblen Raster basiert, gibt es bereits seit geraumer Zeit dafür ein Drupal-7-Modul namens Masonry. Das Modul bindet die JavaScript-Library von David DeSandro ein. Seit kurzem steht ebenso ein Release Canidate für Drupal 8 zur Verfügung, dessen grundlegende Installation und Konfiguration (in Views) ich im Folgenden nachvollziehe.

Als erstes wechseln wir zur Modulverwaltung:

meineseite.de/admin/modules/install

Hier installieren wir die wesentlichen Module und Abhängigkeiten:

Wenn die Module aktiviert sind, muss folgendes Verzeichnis angelegt werden: sites/all/libraries. In diesen Ordner wird das Masonry Plugin hochgeladen: https://npmcdn.com/masonry-layout@3.3.2/dist/masonry.pkgd.min.js.
Das JavaScript-Plugin sollte sich dann in /sites/all/libraries/masonry/masonry.pkgd.min.js befinden.

Als weitere Abhängigkeit sollte das Plugin imagesLoaded mittels Libraries bereitgestellt werden: http://imagesloaded.desandro.com/imagesloaded.pkgd.min.js (im Verzeichnis: /sites/all/libraries/imagesloaded/imagesloaded.pkgd.min.js).

Der Link zu den dem Masonry-Plugin öffnet übrigens einen neuen Tab, in dem lediglich das JavaScript erscheint. Erstellt einfach im Editor eurer Wahl eine leere Datei (die „masonry.pkgd.min.js“ genannt wird) und fügt den entsprechenden Code ein.

Jetzt sollte das Modul einsatzbereit sein und es kann eine neue View erstellt werden. Falls es etwas nicht funktioniert, prüft im Statusbericht, ob die JavaScript-Plugins erkannt werden.

meineseite.de/admin/reports/status

Unter Struktur könnt ihr eine neue View erstellen:

meineseite.de/admin/structure/views/add

Da ich auf meiner neuen Drupal-8-Site die von Masonry bereit gestellten Bilder auf der Startseite anzeigen möchte, lege ich in der neuen View eine Seite an (natürlich kann man auch einen Block erzeugen). Eigentlich könnte ich auch die bereits vorhandene View für die Startseite anpassen, innerhalb dieses kurzen Tutorials ist aber sinnvoll eine neue Abfrage zu erstellen.

  1. Zuerst wird ausgewählt, in welchem Inhaltstyp die Bilder eimgebunden sind (ich nutze hier den in der Basisinstallation vorhandenen Typ "Artikel", da ich zu entsprechenden Blogbeiträgen verlinken möchte).
  2. Als nächste wesentliche Einstellung muss das Anzeigeformat ausgewählt werden: Masonry.
  3. Da ich ausschließlich ein in einem Feld hinterlegtes Bild ausgeben möchte, wähle ich im Dropdown „Felder“ aus. Natürlich kann man auch "Inhalt" auswählen und z.B. eine Sammlung von Teasern in einem Grid bereitstellen.
  4. Einen Pager benötige ich erst einmal nicht. Später können ältere Beiträge z.B. mittels Filtereinstellung ausblenden oder man installiert ein Plugin, das neue Einträge während des Scrollens bereitstellt (für Drupal 8 Views Load More).

Bitte Bild anklicken, um den gesamten Ausschnitt anzuzeigen.

In der neu generierten Views-Datenbankabfrage nehme ich noch minimale Anpassung vor. Ich lösche das voreingestellt Feld, das Inhaltstitel ausgibt und füge ein neues Feld hinzu, das die im Inhaltstyp "Artikel" angehängte Bilder bereitstellt.

Jetzt ist die Masonry-View bereits funktionfähig, dass sich die Bilder im Vorschaubereich überlagern, kann ignoriert werden. Unter Format/Einstellungen sind noch einige Anpassungen möglich und der sehr übersichtliche Stylesheet des Moduls lässt sich leicht entsprechend der eigenen Vorstellungen anpassen. Als erster Überblick sollte dies aber ausreichend sein.

Für Drupal 7 ist übrigens noch das zusätzliche Modul Masonry Fields verfügbar, das meines Erachtens jedoch vollständig durch Views ersetzt werden kann - eine Portierung zu Drupal 8 ist scheinbar nicht angedacht.

Desweiteren gibt es das Sub-Modul Masonry Search, das für beide aktuellen Versionen des CMS vorliegt. Das Modul bietet die Möglichkeit Suchergebnisse als Grid anzeigen zu lassen.

Eine Alternative zu Masonry ist z.B. Mason, das allerdings ausschließlich für Drupal 8 bereit steht (Alpha-Version).

Auf meiner Portfolio-Site könnt ihr euch Masonry in Aktion anschauen, allerdings in der Version für Drupal 7.

Für Hinweise auf Fehler und auch für Ergänzungen kann der Kommentarbereich verwendet werden - ich freue mich wie ein Schneekönig über jeden Beitrag.

Bug Report

In der aktuellen Version für Drupal 8 gibt es einen Bug. Eingeloggt als Admin funktioniert alles wie vorgesehen, wenn man sich ausloggt und die Site als Gast besucht, wird allerdings alles in einer Row dargestellt. Der Entwickler hat innerhalb kürzester Zeit einen Patch bereitgestellt. Falls man die aktuelle RC2 (22. Februar 2016) Version noch nicht installiert hat, kann man auf die DEV zurückgreifen, die diesen Patch bereits enthält.

drupal.org/node/2696293

Module