Eine Gallery für den Blog

Unser Blog braucht eine Gallery. Wir wollen Bilder als einen Slider in den Content unseres Blogbeitrages einbinden. Das fertige Beispiel soll wie folgt aussehen:

Anstatt ein Plugin zu installieren, bauen wir die Gallery selber. Dies ist kein grosser Aufwand. Wir erstellen zuerst ein Fieldset für unsere Gallery. Dazu loggen wir uns im Backend von Statamic ein und navigieren auf "Fieldset" -> "Create Fieldset" und erstellen unsere Gallery.

Als nächstes fügen wir ein Field zu unserem Fieldset hinzu. Als Fieldtype wählen wir den Replicator. Ein Replicator kann mehrere Felder beinhalten und wiederholt diese. So können Listen von Elementen erstellt werden. Es eignet sich also bestens für die Slides unserer Gallery. Diese kann unendlich viele Slides beinhalten, die wiederum ein Bild und eine Beschreibung enthalten:

Nun fügen wir im Replicator ein Set "Slide" hinzu, welches ein Textfeld (description) und ein Asset Feld (image) beinhalten. Wir speichern das Fieldset.

Um das Fieldset nun in unserem Blog einsetzen zu können, müssen wir es in unserem Bard aktivieren. Dazu öffnen wir die Blueprint der Posts Collection und editieren unseren Inhalt (Bard Fieldtype). Wir können hier unser Fieldset verlinken. Dazu fügen wir ein neues Set hinzu und verlinken unsere Gallery. Nun nur noch speichern - et voilà:

Fügen wir nun einen neuen Beitrag hinzu, dann enthält unser Editor ein grosses Plus. Dieses zeigt an, dass ein oder mehrere Sets zur Verfügung stehen. Wir können nun unsere Gallery auswählen und diese befüllen. Es dauerte nur wenige Minuten, den Editor so zu erweitern, dass wir eine Gallery einfügen können. Wir mussten dazu noch nicht einmal Code schreiben (wir hätten auch den Code bearbeiten können), sondern konnten das Resultat zusammenklicken.

Fieldset ausgeben

Wir haben den Editor erweitert und müssen nun das Markup der Gallery bestimmen. Bis jetzt waren die Daten im Inhalt einfacher Text. Neu ist es ein Array, das den Text und unser neues Gallery-Set enthält. Entsprechend müssen wir die Ausgabe des Inhalts anpassen. Aktuell verwenden wir den {{ content }} im /resources/views/posts/show.antlers.html und resources/views/defaut.antlers.html. Wir passen zuerst unsere /resources/views/defaut.antlers.html an und binden diese anschliessend als Partial in unsere /resources/views/posts/show.antlers.html ein.

Unsere default.antlers.html soll neu durch das Array von Content iterieren und je nach Type ein Partial einbinden. Der Type repräsentiert den Type des verwendeten Sets. Unser Text hat den Type "text" und kann einfach ausgegeben werden:

{{ content }}
    {{ if type == "text" }}
        {{ text }}
    {{ else}}
        {{ partial src="partials/{type}" }}
    {{ /if }}
{{ /content }}

Im Anschluss modifizieren wir unser /resources/views/posts/show.antlers.html und ersetzen unser {{ content }} Statement durch {{ partial:default }}. Wir binden also unser gerade modifiziertes Default-Antlers ein.

Gallery Partial

Im Default-Antlers wird je nach Type ein entsprechendes Partial geladen. Ein Partial für die Gallery gibt es noch nicht. Dazu legen wir eine Datei in /resources/views/partials/_gallery.antlers.html an. Wir planen unsere Gallery mit Swiper JS umzusetzen:

<div class="swiper">
    <div class="swiper-wrapper">
        {{ slides }}
            <div class="swiper-slide">
                <figure>
                <img src="{{ image }}" alt="{{ image:alt }}">
                <figcaption class="bg-black text-white text-center ">{{ description }}</figcaption>
                </figure>
            </div>
        {{ /slides }}
    </div>
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
</div>

Die Datei legt das Markup unserer Gallery fest. Wir orientieren uns hier an den Vorgaben von Swiper. Wir können also semantisch korrekte Komponenten bauen und im Frontend kontrolliert ausgeben. Wir müssen uns nicht um Datenbankabfragen kümmern, sondern können einfach über Antlers auf die Inhalte der Komponente zugreifen.

Damit unsere Gallery funktioniert müssen wir noch Swiper laden und einbauen. Wir fügen swiper mittels yarn zu unserem projekt hinzu yarn add swiper. Danach müssen wir unsere Gallery noch initialisieren. Dazu fügen wir folgendes JavaScript in unsere `/resources/js/site.js` ein:

import Swiper from 'swiper/bundle';
import 'swiper/css/bundle';

const swiper = new Swiper('.swiper', {
    loop: true,
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
});

Das wars. Wir haben eine Gallery zu unserem Blog hinzugefügt. Die Gallery wird als Slider dargestellt und mittels swiper gesteuert. Über den gesamten Prozess haben wir die Kontrolle. Wir kontrollieren das Javascript, das Markup und auch das Css. So lassen sich angepasste Blöcke bauen, die ganz ohne (rum)hacken auskommen.