Kategorien
Content Management Systeme Shared Hosting

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

Kategorien
Content Management Systeme seafolly.ch

Kunstarchiv mit Drupal 8 – Werke

Im dritten Teil des Kunstarchivs mit Drupal 8 geht es um die Werke. Jeder Benutzer soll beliebig viele Werke beschreiben können. Die einfachste Variante ist, einen neuen Inhaltstyp zu erzeugen und den Benutzern zu erlauben, Inhalte dieses Inhaltstyps zu erstellen, zu bearbeiten und zu löschen.

Neuer Inhaltstyp

Neue Inhaltstypen kannst du dir wie Tabellen vorstellen. Eine Tabelle voller Werke, jede Spalte ein Feld, jede Zeile ein Werk. Jeder Inhaltstyp hat mindestens einen Autor, einen Titel, einen Textbereich, beliebig viele Felder sowie Parameter ob beispielsweise Kommentare möglich sind oder nicht (/admin/structure/types/add).

Neuer Inhaltstyp Werke
Neuer Inhaltstyp Werke

Wie bereits bei den Profilfeldern (siehe Teil II), können auch bei Inhaltstypen Felder hinzugefügt werden. Der standardmässige Textbereich (Body) kann aus einem Inhaltstyp bei Bedarf entfernt werden, in unserem Fall passt er aber gut, denn dort kann die Beschreibung für das Werk erfolgen. Zusätzlich lege ich ein Feld Standort, ein Feld für weiterführende Links und ein Feld für Bilder an. Das Bildfeld existiert schon im Inhaltstyp Artikel und muss hier nur zugeordnet werden. Nach der Anlage ist der Inhaltstyp Werk unter /admin/structure/types/manage/werk/fields aufrufbar.

Felder im Inhaltstyp Werk
Felder im Inhaltstyp Werk

Ab jetzt können Daten eingegeben werden (/node/add/werk). Das Eingabeformular enthält die neuen Felder. Im Textbereich ist ein WYSIWYG Editor aktiv. Drupal hat unterschiedliche Textformate (einfaches HTML, eingeschränktes HTML, vollständiges HTML). Hier kann man konfigurieren, welche Benutzergruppe welche Tags und Zusatzfunktionen nutzen darf. Ich lasse alles bei den Standardeinstellungen.

Bearbeitungsformular Inhaltstyp Werk
Bearbeitungsformular Inhaltstyp Werk

Nach dem Speichern ist das Werk im „System“ und damit wird der Autor auch zum Eigentümer des Nodes. Damit das für „angemeldete Benutzer“ klappt, müssen sie die Rechte dazu erhalten. Ich setze die entsprechenden Checkboxen, damit Benutzer einen neuen Inhalt erzeugen und ihre eigenen Inhalte bearbeiten und löschen können. Jeder Inhaltstyp kann auch versioniert werden, dazu muss allerdings die entsprechende Checkbox in den Parametern des Inhaltstyps aktiviert sein.

Berechtigungen für Inhaltstyp Werk
Berechtigungen für Inhaltstyp Werk

Liste aller Werke

Wir wollen alle Werke auf einer Übersichtsseite darstellen. Dazu kannst du mit dem Ansichten (Views) Modul eine individuelle Ansicht erstellen (/admin/structure/views/add). Ich erzeuge eine neue Ansicht mit dem Namen Werke und dem Inhalt vom Typ Werk, sortiert nach Neueste zuerst. Ich hätte gern eine Seite, der Seitentitel soll Werke sein, der Pfad werke. Die Werke sollen in einer Tabelle angezeigt werden.

Neue Ansicht mit Daten des Inhaltstyps Werk
Neue Ansicht mit Daten des Inhaltstyps Werk

Nach einem Klick auf speichern und bearbeiten kommst du in die Ansichten Bearbeitungsmaske, die recht komplex daherkommt, aber keine Bange, es ist gar nicht so kompliziert :). Die Anzeige teilt sich in einen Anzeige- und einen Vorschaubereich (weiter unten). Der Anzeigebereich kann mehrere Seiten, Blöcke und auch andere Typen enthalten, momentan enthält er nur eine Seite (Page).

Ansicht bearbeiten
Ansicht bearbeiten

Wir müssen noch die Felder, die wir ausgeben wollen hinzufügen und einen Menülink definieren. Bei den Feldern ist momentan nur das Titelfeld zu sehen. Beim Hinzufügen musst du beim Bildfeld darauf achten, dass es sein kann, das mehrere Bilder pro Werk hochgeladen werden (es kommt auf die Konfiguration des Bildfeldes an). Wenn das so ist, dann solltest du in der Tabelle nur das Erste Bild einzeigen. Dafür gibt es in den Feldeinstellungen einen Bereich Multiple Field Settings.

Nur ein Bild anzeigen!
Nur ein Bild anzeigen!

Den Menulink legst du in den Seiteneinstellungen fest (Normaler Menüeintrag).

Menulink definieren
Menulink definieren

Nach dem Speichern sollte die Liste aller Werke angezeigt werden.

Liste aller Werke
Liste aller Werke

Ausser einer Tabelle kannst du auch ein Grid (Raster), eine HTML-Liste oder eine unformatierte Liste ausgeben. Durch einen Klick auf den Titel gelangt man in die Einzelansicht des Werks. Das Ansichten Modul ist die Basis für ein ganzes Universum von Zusatzmodulen. Beispielsweise könntest du, mit der entsprechenden Modul Erweiterung, mehrere Bilder als Slideshow darstellen oder ein RSS-Feed neuer Werke erstellen.

Das Projekt soll blühen, gedeihen und sich entwickeln. Du kannst gern deine Kunstwerke dort beschreiben und archivieren. Die weitere Entwicklung habe ich auf der Roadmap skizziert. Wir sind offen für weitere Ideen. Hier kannst du übrigens ein neues Benutzerkonto erstellen 🙂

Fazit

Bereits mit einer Core Drupal 8 Installation kommt man sehr weit bei der Erstellung komplexer Websites.


tl;dr: Drupal 8 besitzt bereits im Core die Möglichkeit massgeschneiderte Sichten auf Daten zu erstellen.