6.9 Theming Views in Drupal. Erstellen einer Owl Carousel Diashow mit Thumbnails.

Sehr oft passt uns das Views-Template nicht, daher können wir die Templates für Views überschreiben. Leider gibt es keine Benutzeroberfläche, um im Views-Template nach der gewünschten Vorlage zu suchen, aber wir können Muster verwenden, um Templates neu zu definieren.

Mehr zu den Mustern in diesem Artikel:

6.6. Arbeiten mit Templates in Drupal. Was sind die Templates im Drupal-Core.

Besonders interessiert uns Folgendes:

Nachfolgend mögliche Template-Namen, die überschrieben werden können.

Name der View – foobar (Maschinenname)
Anzeigeformat – unformatted (unformatierte Liste, weitere mögliche Optionen hinzufügen)
Darstellungsstil – fields (Felder)
Anzeige-Name – page (Seite)

views-view--foobar--page.html.twig
views-view--page.html.twig
views-view--foobar.html.twig
views-view.html.twig

views-view-unformatted--foobar--page.html.twig
views-view-unformatted--page.html.twig
views-view-unformatted--foobar.html.twig
views-view-unformatted.html.twig

views-view-fields--foobar--page.html.twig
views-view-fields--page.html.twig
views-view-fields--foobar.html.twig
views-view-fields.html.twig

Das Owl Carousel 1.x Plugin unterstützt keine Thumbnails in der Galerie. Daher verwenden wir Owl Carousel Version 2.x, die Thumbnails unterstützt. Wenn du keine Lust hast, Templates neu zu definieren oder CSS-/JavaScript-Code zu schreiben, kannst du einfach das Views Slideshow Modul installieren:

https://www.drupal.org/project/views_slideshow

Oder das Flex Slider Modul:

https://www.drupal.org/project/flexslider

Damit kannst du Diashows schnell und ohne CSS- oder jQuery-Kenntnisse konfigurieren.

Wir werden das Überschreiben von Views-Templates und das Einbinden von jQuery-Bibliotheken üben.

Zum Start lade die Owl Carousel 2.x Bibliothek herunter und binde sie ein:

https://github.com/OwlCarousel2/OwlCarousel2

Vielleicht hast du Owl Carousel 1.x gefunden:

https://github.com/OwlFonk/OwlCarousel

Diese Version ist für uns ungeeignet, da sie keine Thumbnails unterstützt und zusätzlichen Code erfordert.

Kopiere den Ordner owl-carousel (der die Datei owl.carousel.min.js enthält) in den Ordner unseres Themes und binde die CSS- und JS-Dateien des Carousels ein. Füge die folgenden Zeilen in die .libraries.yml Datei deines Themes ein:

global-styling:
  version: 1.x
  css:
    theme:
      owl-carousel/owl.carousel.css: {}
      owl-carousel/owl.theme.css: {}    
      owl-carousel/owl.transitions.css: {}
      css/style.css: {}
      css/print.css: { media: print }
  js:
    js/custom.js: {}
    owl-carousel/owl.carousel.min.js: {}
  dependencies:
    - core/jquery

Ich habe die JS-Dateien nicht vom /js- oder /css-Ordner in den /css-Ordner verschoben, du kannst das aber tun. Denke dann daran, die Pfade zu Bildern in den CSS-Dateien anzupassen, die du vermutlich im /images-Ordner abgelegt hast.

Um die Änderungen anzuwenden, musst du den Cache leeren.

Jetzt erstellen wir den Inhaltstyp Galerie und fügen ihm ein Bildfeld hinzu.

Erstelle eine neue View, die ein einzelnes Bildfeld des neuen Inhaltstyps anzeigt.