Tutorial: Eine Masonry Galerie in Contao 5 erstellen

1. Vorbereitung

1. Lade dir das Script von der Website herunter: Download Masonry
2. Lade dir zusätzlich das Script ImagesLoaded herunter: Download ImagesLoaded
3. Verschiebe beide Dateien in deinen Script-Ordner (in unseren Contao Themes ist das unter /files/theme/js)

2. Script laden und konfigurieren

Nun können wir die Scripte laden. Ich verwende dafür ein Template js_masonry.html5, damit ich dieses später im Seitenlayout auswählen kann:

<?php
// /templates/theme/js_masonry.html5

// *
// * Erdmann & Freunde
// * erdmann-freunde.de/
// *
// * Masonry-Script: https://masonry.desandro.com/
// * ImagesLoaded-Script: https://imagesloaded.desandro.com/

// *
?>

<script src="/files/theme/js/masonry.js"></script>
<script src="/files/theme/js/masonry.imagesloaded.js"></script>

Und nachdem die Scripte geladen werden, kann ich diesen die notwendigen Optionen übergeben. Ich möchte, dass das Script nicht grundsätzlich für alle Galerien verwendet wird, sondern nur bei Galerie-Elementen, die den Selektor gallery--masonry haben.

Außerdem muss ich dem Script noch mitteilen, was die Elemente sind, die im Masonry-Layout angeordnet werden sollen. Im Fall der Galerie sind das die Listen-Elemente, die auch gleichzeitig zur Berechnung der Breiten verwendet werden sollen.

Zu guter Letzt müssen wir noch einen kleinen Fix einbauen, der verhindert, dass die Bildgrößen falsch berechnet werden und sich überlappen. Dafür verwenden wir das Script ImagesLoaded. Dieses Script hat die Aufgabe, nach jedem geladenen Bild das Masonry-Layout zu prüfen und die Bilder entsprechend anzuordnen.

<script>
document.querySelectorAll('.gallery--masonry').forEach(gallery => {
  const msnry = new Masonry(gallery, {
    itemSelector: 'li',
    columnWidth: 'li',
    percentPosition: true
  });

  imagesLoaded(gallery).on('progress', () => {
    msnry.layout();
  });
});
</script>

Unser komplettes Template sieht am Ende so aus:

<?php
// /templates/theme/js_masonry.html5

// *
// * Erdmann & Freunde
// * erdmann-freunde.de/
// *
// * Masonry-Script: https://masonry.desandro.com/
// * ImagesLoaded-Script: https://imagesloaded.desandro.com/

// *
?>

<script src="/files/theme/js/masonry.js"></script>
<script src="/files/theme/js/masonry.imagesloaded.js"></script>

<script>
document.querySelectorAll('.gallery--masonry').forEach(gallery => {
  const msnry = new Masonry(gallery, {
    itemSelector: 'li',
    columnWidth: 'li',
    percentPosition: true
  });

  imagesLoaded(gallery).on('progress', () => {
    msnry.layout();
  });
});
</script>

Masonry-Galerie gestalten

Nachdem das Script geladen und konfiguriert ist, fehlt nur noch ein wenig CSS, damit die Masonry Galerie auch wirklich wie ein Masonry-Layout aussieht.

Ich verwende für dieses Tutorial die bestehende _media.scss unseres Contao Themes SIRIUS.

Da SIRIUS auf dem Nutshell Framework basiert und zusätzlich eigene Anweisungen für Galerien enthält, muss ich ein paar Anweisungen überschreiben:

// *
// * Erdmann & Freunde
// * SIRIUS Contao Theme
// * erdmann-freunde.de/themes/sirius
// *

//
// COMPONENTS/MEDIA
// --------------------------------------------------

// …

.gallery--masonry {
  --gallery-background: transparent;

  margin: 0 calc(-1 * var(--grid-gutter-half));

  ul {
    display: block; 
  }

  li {
    padding: var(--grid-gutter-half);
    width: 100%;

    @include media-query(screen-sm) {
      width: 50%
    }

    @include media-query(screen-lg) {
      width: 33.3334%
    }

    @include media-query(screen-xl) {
      width: 25%
    }
  }
}

Zur Erklärung: Ich entferne den farbigen Hintergrund für Galerien über die Variable und setze außerdem einen negativen Margin links und rechts, damit ich jedem Bild wiederum einen Innenabstand geben kann.

Da Galerien im Nutshell Framework außerdem standardmäßig über display: grid definiert werden, muss ich die Anweisung überschreiben.

Zu guter Letzt gebe ich noch für unterschiedliche Breakpoints verschiedene Breiten an. Auf kleinen Bildschirmen sollen alle Elemente untereinander stehen (100% Breite), ab dem Small-Viewport soll das Layout zweispaltig sein, ab dem Large-Viewport dreispaltig und ab dem ExtraLarge-Viewport vierspaltig.

Wenn du weder eines unserer Themes, noch das Nutshell Framework verwendest, kannst du hier einfach mit Media Queries arbeiten.

Zum Schluss füge ich nun noch die Klasse gallery--masonry zu meinem Galerie-Element hinzu, das als Masonry dargestellt werden soll.

Tipp: Optional könntest du die Anweisungen noch so erweitern, dass die Zahl der Bilder pro Reihe Einfluss auf die Darstellung hat. Denn pro Option setzt Contao eine zusätzliche CSS-Klasse.  „5 Bilder pro Reihe“ setzt die Klasse content-gallery--cols-5.