- Teil 1: Drupal 8 bringt frischen Wind …
- Teil 2: Kunstarchiv mit Drupal 8 – Benutzer
- Teil 3: Kunstarchiv mit Drupal 8 – Werke
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)
Innerhalb des Views-Slideshow Pakets befinden sich zwei Module, die nach der Installation aktiviert werden müssen. Anschliessend werden folgende Informationen angezeigt (/admin/modules).
Installation jQuery Cycle Dateien
Die JavaScript Dateien für jQuery Cycle kannst du von GitHub herunterladen (https://github.com/malsup/cycle).
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.
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
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.
Wähle in der Auswahlmaske dein Bildfeld aus.
Ü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.
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.
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.
Nach dem Speichern wird der Block auf allen Profilseiten zunächst dargestellt, hat aber noch viele Fehler.
- Die Überschrift Slideshow muss verschwinden (oder verändert werden)
- Nur die Werke des ausgewählten Künstlers sollen angezeigt werden
- Die Bildgrösse ist momentan die Originalgrösse des hochgeladenen Bildes
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.
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.
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.
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
- Beispiel auf seafolly.ch – https://seafolly.ch/user/8
- Drupal – https://drupal.org
- Views Slideshow Modul – https://www.drupal.org/project/views_slideshow
- jQuery Cycle – https://github.com/malsup/cycle
tl;dr: Ich zeige, wie du eine Slideshow in Drupal 8 erstellst
von
Schlagwörter:
Schreibe einen Kommentar