Drupal Logo

Drupal 7: Slideshow erstellen mit Views Slideshow

In diesem Artikel lernst Du, wie man eine Slideshow an Hand einiger Module in Drupal 7 realisieren kann. Inklusive Videotutorial!

Plugins:

Schritt 1: Module installieren und aktivieren

Nachdem Du das jQuery Plugin runtergeladen hast (rechtsklick auf den Quelltext, dann speichern unter), verschiebst Du es in sites/all/libraries/jquery.cycle/jquery.cycle.all.js. Der Ordner libraries und jquery.cycle müssen manuell von Dir erstellt werden. Zusätzlich kannst Du jetzt alle runtergeladenen Module für Drupal installieren und aktivieren.

Schritt 2: Bildstil hinzufügen

Einen neuen Bildstil kannst Du unter Konfiguration – Medien – Bildstile festlegen. Nachdem klicken auf Stil hinzufügen legst Du den Namen für den neu erstellten Bildstil fest (slide_full_size in unserem Fall). Als Effekt wählst Du „Größe Ändern“ aus. Dort werden die Maße des Slider bzw. der einzelnen Bilder festgelegt. Ich empfehle beim erstellen des Sliderbildes immer genau diese Maße zu verwenden.

Schritt 3: Neuen Inhaltstyp erstellen

Unter Struktur – Inhaltstypen können neue erstellt werden. In unserem Fall nennen wir diesen „Slider Startseite“. In der Beschreibung geben wir für andere Autoren an, für was dieser Inhaltstyp gedacht ist. In der Beschriftung des Titelfeldes geben wir „none“ in <> an. In den Veröffentlichungseinstellungen reicht es den Haken bei Veröffentlicht zu setzen. In den Anzeigeeinstellungen entfernst Du den Haken bei Datum- und Autorinformation anzeigen. Die Kommentarfunktion sollte man auf jeden Fall unter Einstellungen für Kommentare deaktivieren. Dazu einfach die Ausgeblendet Option unter Standard-Kommentareinstellung für neue Inhalte verwenden. Bei den Menüeinstellungen sollte kein Haken gesetzt sein. Nach Abschließen dieser Einstellungen den Button „Speichern und Felder hinzufügen“ klicken.

Schritt 3.1: Felder bearbeiten

Als nächstes löschst Du den Body (das eigentliche Feld für den ganzen Text). Das Feld „Slider Image“ wird hinzugefügt. Der entsprechende Feldtyp ist Bild. Eine weiteres Feld, welches wir benötigen wird mit dem Modul „Link Field“ ermöglicht. Dort lautet der Feldtyp Link. Den Link benötigen wir, falls das Slider Bild auf irgendeine Seite verweisen soll. In Feldoptionen stellen wir unter „Link Title“ – „No title“ ein.

Schritt 3.2: Anzeige verwalten

Bei dem Bild Feld in unserem erstellten Inhaltstyp verstecken wir die Beschriftung. An dem kleinen Rädchen rechts wählen wir unseren zu vor kreierten Bildstil aus. Im Linkfield wird sowohl die Beschriftung, als auch das Format versteckt.

Schritt 4: View erstellen

Unter Struktur – Views kann man einen neuen View erstellen. Der Name soll in unserem Fall „Slider Startseite“ heißen, angezeigt wird der Content/Inhalt vom Typ „Slider Startseite“ (Name des Inhaltstyp) und sortiert wird das ganze mit newest first – neustes zu erst. Erstellen möchten wir keine Seite sondern einen Block (Create Block). Blocktitel kann auch hier „Slider Startseite“ lauten. Display format wollen wir „Slideshow of fields“. Unter Items per Page wählst Du die gewollte Anzahl von Slides, die du angezeigt haben möchtest. Bestätigt wird das ganze mit „Continue and Edit“.

Schritt 4.1:

Zunächst entfernst Du das title field. Das Link field wird hinzugefügt und bekommt als Fiter Content/inhalt verpasst. No label wird ausgewählt und der Haken sollte bei exclude gesetzt sein. Als nächstes fügen wir das Sliderimage hinzu. Dieses soll auch ohne label – no label sein. Der Bildstil/Imagestil sollte der vorher erstellte sein (slide_full_size in unserem Fall). Das Bild soll mit nichts verlinkt sein/link to nothing.
!Wichtig: In den Rewrite Results wählen wir die Option: „Output this field as a link“ und fügen folgendes ein: „[field_slider_link]“.

Schritt 5: Format Settings

Hier können wir die Übergangseffekte verändern und einige Events aktivieren, wie beispielsweise das Anhalten des Sliders während die Maus darauf zeigt (Standartgemäß aktiviert). Hier können wir prinzipiell erstmal die default Werte lassen.

Schritt 6: Slider auf der Startseite anzeigen lassen

Unter Struktur – Blöcke finden wir den von Views neu hinzugefügten Block Slider Startseite. Diesen platzieren wir im Inhaltbereich (Abweichungen je nach Theme) und wählen die erweiterten Einstellungen. In dem Feld Blocktitel geben wir none in <> an, da wir keine Überschrift für den Slider wollen. In den unteren Optionen wählen wir „Nur die aufgelisteten Seiten“ aus und schreiben in das Textfeld front auch in <>.
Nun sollte Euer Slider auf der Startseite angezeigt werden.

Video:

Über den Autor:

Mein Name ist Fabian Geier, Gründer von SourceBlogging, Läufer und WordPress-Enthusiast. Du findest mich vor allen Dingen auf meiner Webseite.