Ein Zeitstrahl für Inhalte in Drupal 8

Zeitstrahl

Zeitstrahl

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.

Installatron - Drupal 8
Installatron – Drupal 8

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.

Modul installieren - /admin/modules/install
Modul installieren – /admin/modules/install
Akiviertes Modul - /admin/modules
Akiviertes Modul – /admin/modules

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.

Neue Ansicht - Werke
Neue Ansicht – Werke

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.

Felder zuordnen
Felder zuordnen

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.

Ansicht - Vorschau
Ansicht – Vorschau

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.

Formatierung - Datum
Formatierung – Datum

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.

Einstellungen - Zeitleiste
Einstellungen – Zeitleiste

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.

Save

Autor: Hagen Graf

consultant, author, trainer, solution finder, web architect, developer, open source lover, visionary, orator, the good old webmaster. Able to simplify!

Kommentar verfassen