Für die Darstellung von Inhalten in einer zeitlichen Abfolge, beispielsweise für einen Lebenslauf, eignen sich besonders gut grafisch aufbereitete horizontale oder vertikale Zeitstrahlen und Zeitleisten (time line). In diesem Blogbeitrag möchte ich die Erstellung eines einfachen vertikalen Zeitstrahls in Drupal 8 zeigen.
Vor mehr als zwei Jahren habe ich als Beispiel für eine Drupal 8 Site die seafolly.ch Site erstellt (seafolly.ch – wir starten eine Kunstgalerie). Dort kannst du dich registrieren und deine Kunstwerke hochladen. Bisher war die Darstellung der hochgeladenen Werke ein einfache Tabelle. Diese Tabelle soll zu einem Zeitstrahl werden.
Voraussetzungen
Um das Beispiel nachvollziehen zu können, benötigst du eine Drupal 8 Installation mit ein paar Inhalten. Als Novatrend Kunde kannst du dir das Drupal 8 einfach und schnell über unseren Installatron Service installieren
ACHTUNG: Seit November 2017 benutzen wir das Tool Softaculous. Im Beitrag Automatisierte Installation mit Softaculous beschreibe ich die grundlegenden Vorgehensweisen.
Modul „A Simple Timeline“ installieren
Der einfache vertikale Zeitstrahl wird vom Modul A Simple Timeline erzeugt. Installiere und aktiviere es über die Benutzeroberfläche oder auf der Kommandozeile mit Hilfe von Drush.
Konfiguration
Damit etwas angezeigt werden kann, benötigst du Inhalte mit einem Datum. Das kann das Erstellungsdatum des Inhalts sein oder auch der Inhalt eines zusätzlichen Datumsfeldes. In der Standard Drupal 8 Installation existieren zwei Inhaltstypen (Artikel, einfache Seite). Der Artikel-Typ passt gut zum Beispiel, weil er bereits ein Bild enthält und du als Datum das Erstellungsdatum nutzen kannst.
Hier im Beispiel nehme ich den in seafolly.ch existierenden Inhaltstyp mit dem Namen Werke. Die Erstellung wird im Beitrag Kunstarchiv mit Drupal 8 – Werke ausführlich beschrieben.
Ansicht „Werke“
Eine Liste von Inhalten heißt in Drupal Ansicht (View). Eine neue Ansicht erstellt du über Struktur -> Ansicht -> Neue Ansicht hinzufügen (/admin/structure/views/add). Die Ansicht benötigt einen Namen (Werke), eine Aussage über die Datenquelle (Inhalt, Typ Werk) und eine Sortierung (Neueste zuerst). Ich erstelle eine neue Seite mit Titel (Werke), dem Pfad (werke) und – ganz wichtig – dem Anzeigeformat Single Timeline das aus Feldern erzeugt werden soll.
Danach klicke ich auf Speichern und Bearbeiten.
In der folgende Ansicht ordne ich die Felder zu, die ich darstellen will. In meinem Beispiel sind das Titel, Bild, Textkörper, Erstellt von und Erstellung.
Bereits jetzt sehe ich in der Vorschau im unteren Bereich des Ansichtenformulars die vertikale Zeitleiste und kann nach und nach die Eigenschaften der Felder meinen Wünschen anpassen.
Als Sortierkriterium habe ich das Erstellungsdatum des Werks genommen (Feld Erstellung). Damit nur der Monat in der Ausgabe steht, habe ich dem Feld Erstellung eine benutzerdefinierte Formatierung gegeben. Das F steht für den ausgeschriebenen Monat, das Y für die vierstellige Jahreszahl. Die Buchstaben (Das F für den Monat steht für Full ) stammen aus dem PHP Datumsformat und sind hier erklärt.
Die Formatierung der Zeitleiste erfolgt über den Link Einstellungen (rechts neben Format Simple Timeline in der Ansichtsbearbeitung). Im sich öffnenden Fenster können die Position, die Marker und die CSS Klassen zur Formatierung verändert werden.
Das war alles! Die Zeitleiste ist fertig und kann über den konfigurierten URL aufgerufen werden. Das Drupal Modul ist übrigens eine Anpassung des WordPress – Posts Timeline Plugins.
Links
tl;dr: „A simple Timeline“ ist ein Anzeigeformat für Ansichten in Drupal 8 und stellt Inhalte als vertikalen Zeitstrahl dar.
Schreibe einen Kommentar