Drupal 8 – Slideshow im Benutzerprofil

Im vierten Teil des Kunstarchivs mit Drupal 8 zeige ich, wie die Werke, die die Künstler hochladen als Slideshow dargestellt werden können.

Jeder Benutzer kann beliebig viele Werke anlegen und zu jeden Werk können mehrere Bilder hochgeladen werden. Ein Werk ist ein Inhaltstyp in Drupal und die Bilder darin ein Feld. Manchmal ist es sinnvoll, wenn es mehrere Bilder zu einem Werk gibt, beispielsweise bei Installationen, Kunstprojekten oder Skulpturen, manchmal reicht zur Beschreibung eines Werks auch nur ein Bild.

Es wäre schön, eine Slideshow der Werke im Künstlerprofil zu haben und ich werde zeigen, wie du das einrichten kannst.

Einem Feld wird in Drupal ein Format zugeordnet, das dessen Anzeige im Browser steuert. Leider ist kein Slideshow Format in der Core Distribution verfügbar und so musst du dir anders behelfen.

Als Erweiterung für das Views Modul gibt es ein Slideshow Modul (Views Slideshow). Es nutzt das Cycle Plugin für jQuery. Eine mögliche Lösung ist, die Darstellung der Bilder in einen Block auszulagern, der abhängig vom aufgerufenen Werk und Künstler, die entsprechenden Bilder anzeigt.

Der Slideshow-Block kann dann über oder unterhalb des Hauptinhalts angezeigt und mit dem Views Modul konfiguriert werden.

Installation des Moduls Views Slideshow

Du kannst Module über die Drush Konsole oder per Browser im Adminbereich installieren und aktivieren.

Drush Befehle:

drush dl views_slideshow
drush en views_slideshow

Per Browser (/admin/modules/install)

Drupal 8 - Modul installieren

Innerhalb des Views-Slideshow Pakets befinden sich zwei Module, die nach der Installation aktiviert werden müssen. Anschliessend werden folgende Informationen angezeigt (/admin/modules).

Drupal 8 - Modul aktivieren

Installation jQuery Cycle Dateien

Die JavaScript Dateien für jQuery Cycle kannst du von GitHub herunterladen (https://github.com/malsup/cycle).

jQuery Cycle - Download

Du packst das Dateipaket aus und benennst das Verzeichnis von cycle-master nach jquery.cycle um. Dann erstellst du im Drupal Root ein Verzeichnis libraries und kopierst das jquery.cycle Verzeichnis dort hinein. Die Struktur sieht dann aus wie im folgenden Screenshot.

Drupal 8 - Libraries

Damit ist die Installation beendet und du kannst einen Slideshow-Block erstellen. Als Basis benötigst du mindestens einen Inhaltstyp mit einem Bildfeld, so wie ich ihn auf seafolly.ch nutze (Kunstarchiv mit Drupal 8 – Werke).

Slideshow Block erstellen

Um den Block zu erzeugen, musst die eine neue Ansicht hinzufügen (/admin/structure/views/add). Ich benutze die folgenden Parameter.

  • Ansichtsname: Slideshow
  • Anzeigen: Inhalt
  • Typ: Werk
  • Erzeuge einen Block: Check
  • Anzeigeformat: Slideshow
  • von: Felder

Elemente pro Block: 10
Drupal 8 - Slideshow Block anlegen

Nach einem Klick auf Speichern und Bearbeiten landest du in der Bearbeitungsmaske.
Dort musst du zusätzlich zum bestehenden Feld Title, das Feld, das die Bilder enthält, zuordnen. Klicke im Bereich Felder auf den Add -Button.

Drupal 8 - Views - Feld hinzufügen

Wähle in der Auswahlmaske dein Bildfeld aus.
Drupal 8 - Views - Feld hinzufügen- Auswahl

Übernehme zunächst die Standardwerte auf der folgenden Seite und füge das Feld hinzu. Wenn du nach unten scrollst, siehst du bereits eine Vorschau innerhalb der Bearbeitungsmaske aus allen Bildern aller Werke. Die Bilder sollten bereits automatisch wechseln.

Drupal 8 - Views - Vorschau

Der Block is nun in der Struktur fertig und kann zum Testen an die gewünschte Stelle positioniert werden.

Slideshow Block pro Künstler

Im Bereich Struktur -> Blocklayout kann der eben erstellte Block an die gewünschte Stelle platziert werden.
Drupal 8 - Slideshow Block plazieren

Der Block soll nur im Künstlerprofil angezeigt werden, daher musst du Sichtbarkeit mit dem Ausdruck /user/* einschränken. Der Ausdruck bezieht sich auf dem URL des Benutzerprofils.
Drupal 8 - Slideshow Block - Sichtbarkeit

Nach dem Speichern wird der Block auf allen Profilseiten zunächst dargestellt, hat aber noch viele Fehler.

  1. Die Überschrift Slideshow muss verschwinden (oder verändert werden)
  2. Nur die Werke des ausgewählten Künstlers sollen angezeigt werden
  3. Die Bildgrösse ist momentan die Originalgrösse des hochgeladenen Bildes

Drupal 8 - Slideshow Block im Profilbereich

Die Überschrift Slideshow verschwinden lassen

Die Überschrift eines Block kann ausgeblendet werden.
Einfach im Blocklayout (/admin/structure/block/list/bootstrap) den Slideshow Block konfigurieren und die Checkbox bei Titel anzeigen entfernen.

Nur die Werke des angezeigten Künstlers sollen angezeigt werden

Hierzu muss ein Bezug zur User-ID des Künstlers in die Blockansicht aufgenommen werden. Das geht mit einem sogenannten Kontextfilter innerhalb der Ansicht. Rufe den Slideshow Block zur Bearbeitung auf (/admin/structure/views/view/slideshow) und füge im Bereich Erweiterungen als Kontextfilter das Feld Inhalt: Erstellt von hinzu.

Drupal 8 - Slideshow Block - Kontextfilter

Das Feld stellt nun einen „Kontext“ bereit, der mit dem Wert der richtigen User-ID gefüllt werden muss. Um an den Wert der User-ID zu kommen, musst du den Vorgabewert User-ID from route context wählen.

Jetzt werden bei jedem Künstler „nur noch“ die Bilder seiner Werke als Slideshow angezeigt.

Die Bildgrösse ist momentan die Originalgrösse des hochgeladenen Bildes

Hier wird es nun sehr individuell. Grundsätzlich speichert Drupal das Original des hochgeladenen Bildes und erzeugt nach Bedarf eine passende Ausgabe. Diese passende Ausgabe kann natürlich auch umfassender bearbeitet werden (Grösse, Format, Wasserzeichen, etc). Je nach Template und anzeigendem Browser werden die Bilder unterschiedlich dargestellt. In meinem Fall benutze ich das Bootstrap Theme und die Bilder werden responsiv dargestellt. Grundsätzlich bietet sich ein einheitliches Ausgabeformat an, weil die Bilder im Original sehr gross und datenintensiv sind und auch die Möglichkeit besteht, dass die Künstler Bilder in unterschiedlichen Formaten (Quadratisch, Querformat, Hochformat) hochladen. Eine „richtige“ Lösung gibt es dabei nicht, nur unterschiedliche Herangehensweisen.

Generell lässt sich das Format eines Bildes in der Views-Bearbeitungsansicht des Blocks einstellen. Rufe den Slideshow Block zur Bearbeitung auf (/admin/structure/views/view/slideshow), klicke im Bereich Felder auf das Feld Inhalt: Bild und wähle das gewünschte Format aus.

Drupal 8 - Slideshow Block - Bildformat

Zweiter Test auf der Profilseite

Als Ergebnis ist die Überschrift verschwunden, die Bilder gehören zum Künstler und die Bildgrösse ist einheitlich. Aber, wenn zu einem Werk mehrere Bilder hochgeladen wurden, zeigt die Slideshow alle Bilder (untereinander) an.
Eine Lösung dieses Problems könnte beispielsweise sein, nur das erste Bild eines Werks anzuzeigen. Rufe dazu den Slideshow Block zur Bearbeitung auf (/admin/structure/views/view/slideshow), klicke im Bereich Felder auf das Feld Inhalt: Bild und gehe in den Bereich Multiple Field Settings.
Wähle im Optionsfeld Zeige n Werte eine 1 aus.

Drupal 8 - Slideshow Block - Nur das erste Bild

Bei der Gelegenheit kannst du auch gleich Bild verlinken mit Inhalt auswählen. Wenn dann jemand auf das Bild klickt, landet er auf der Detailseite des Werks.

Slideshow Parameter

Nachdem die Slideshow nun prinzipiell funktioniert, kannst du noch Parameter für die Anzeige setzen, beispielsweise einen anderen Überblendungseffekt. Rufe dazu den Slideshow Block zur Bearbeitung auf (/admin/structure/views/view/slideshow), klicke im Bereich Format auf das Feld Einstellungen (neben Slideshow).

Der Block im Profilbereich funktioniert nun wie gewünscht.

Fazit

Es ist erstaunlich, wie komplex die Anforderungen für ein „einfache“ Slideshow sind und es ist gleichermaßend faszinierend, wie so etwas über eine Browser Oberfläche in Drupal 8 konfiguriert werden kann.

Links


tl;dr: Ich zeige, wie du eine Slideshow in Drupal 8 erstellst

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