Kirby CMS: Eine Galerie mit einem responsiven Masonry-Grid erstellen

Mit Hilfe des Kirby Gallery Plugins von Tim Oetting möchte ich euch zeigen, wie man eine Galerie als Masonry-Grid ausgeben lassen kann. Wem Masonry jetzt nichts sagt, kann sich auf der Masonry Seite die Beispiele anschauen. Im Wesentlichen handelt es sich um eine Javascript Library, die automatisch ein optimal aufgeteiltes Grid erzeugt.

Masonry Library

Das Kirby Gallery Plugin stellt nur die Funktionalität im Backend zur Verfügung. Für das Frontend müssen wir die Ausgabe der Bilder komplett selbst erstellen. Damit können wir die Galerie dann direkt als Masonry-Grid konfigurieren. Nach der Installation des Gallery-Plugins ladet ihr zunächst die aktuellste Masonry Library von masonry.desandro.com runter, sowie die imagesLoaded und bindet sie in euer Kirby Layout ein. Ich mache das über die js-Snippet in der footer.php (und binde gleichzeitig auch jQuery ein):

  <?php echo js(array(
      'assets/js/jquery-2.1.0.min.js',
      'assets/js/masonry.pkgd.min.js',
      'assets/js/imagesloaded.pkgd.min.js'
  )) ?>

Durch die Verwendung von imagesLoaded wird sichergestellt, dass Masonry nicht anfängt das Grid zu bauen, bevor alle Bilder geladen sind, was Fehler im Grid vermeidet.

Anschließend initialisiere ich Masonry per jQuery:

$('.gallery-grid').imagesLoaded(function(){  
    $('.gallery-grid').masonry({
        columnWidth: '.grid-sizer',
        itemSelector: '.grid-item',
        percentPosition: true,
        gutter: 10
    });
});

Wie man sieht wird die Masonry Funktion erst ausgeführt, wenn imagesLoaded abgeschlossen ist. Anschließend gebe ich Masonry folgende Optionen mit:

  • columnWidth: Über ein HTML-Element mit der Klasse .grid-sizer wird die Breite der Spalten angegeben. Dazu gleich mehr im Markup- und CSS-Teil
  • itemSelector: Wählt alle HTML-Elemente einer Klasse aus, die als Grid angeordnet werden sollen
  • percentPosition: Gibt an, dass die Breite später in Prozent definiert wird für ein fluides Layout
  • gutter: Steuert den Abstand (rechts/links) zwischen den Bildern in px. Ich wollte 10px Abstand zwischen den Bildern haben. Ohne einen definierten Wert grenzen die Bilder direkt aneinander.

Markup

Je nachdem, wie und wo ihr die Galerie einsetzen möchtet, müsst ihr ein eigenes Kirby-Template mit Blueprint anlegen. Ich habe für Blogposts das Template article.gallery.php angelegt. Das Markup für die Galerie ist folgendes:

<div class="gallery-grid">
    <div class="grid-sizer"></div>
    <?php foreach($page->pictures()->yaml() as $image): ?>
       <?php if($img = $page->image($image)): ?>
          <div class="grid-item">
            <a href="<?= $img->url() ?>" class="swipebox">
              <img src="<?php echo thumb($img, array('width'=>'500'))->url() ?>" alt="<?= $page->title()->html() ?>" />
            </a>
          </div>
       <?php endif ?>
    <?php endforeach ?>
</div>

Das .gallery-grid div gilt als Wrapper für die Galerie. Darin befindet sich ein leeres div mit der .grid-sizer Klasse, welches die Breite der Spalten per CSS bestimmt. Anschließend gebe ich über eine foreach Schleife alle Bilder der Galerie einzeln aus. Jedes Bild wird in ein .grid-item div gewrappt. Um die Bilder nicht in voller Auflösung zu laden, nutze ich Kirbys Thumbnailfunktion. Anmerkung: Ich nutze Swipebox als Lightbox und habe die Thumbnails daher entsprechend verlinkt.

CSS

Die CSS-Anweisungen sind recht übersichtlich:

.grid-item {
  margin-bottom: 10px;
}

.grid-item img {
  vertical-align: top;
}

.grid-sizer,
.grid-item { 
  width: calc(25% - 10px);
}

@media screen and (max-width: 599px) {
  .grid-sizer,
  .grid-item {
    width: calc(100% - 10px);
  }
}

Zuerst bekommen die einzelnen Bilder einen margin-bottom von 10px, um ihn mit dem horizontalen Abstand, den ich durch die gutter Option gesetzt habe, gleichzusetzen. Diese Werte sind beide optional. Wichtig ist nur, dass ihr zwar den Abstand nach unten per CSS definieren könnt, nicht aber den horizontalen Abstand, da sonst Masonry zerschießt. Anschließend folgt die eigentliche Größenberechnung. Hier bekommt sowohl das .grid-sizer Element, als auch das .grid-item eine Breite zugewiesen. Ich möchte eine prozentbasierte Breite angeben, bin aber durch den pixelbasierten gutter Wert auch darauf angewiesen diesen absoluten Wert zu berücksichtigen. Daher verwende ich die CSS calc()-Funktion. Für ein vierspaltiges Grid weise ich dem Element über calc(25% - 10px) 25% Breite zu (100:4, ihr wisst schon) und ziehe 10px ab. Hier könnte man bei Bedarf noch ein Fallback für Browser einbauen, die calc() nicht unterstützen. Für eine andere Spaltigkeit könnt ihr den Prozentwert einfach anpassen. Bei der responsiven Anpassung mach ich mich es hier sehr einfach. Bis zu einer Viewportbreite von 600px bleibt die Galerie vierspaltig und erst darunter wird sie dann einspaltig. Hier könnte man auch noch weitere Breakpoints für eine Drei- oder Zweispaltigkeit setzen. Damit ist die Galerie dann auch schon einsatzbereit.