6.9 Views-theming in Drupal. Een Owl Carousel-diavoorstelling maken met miniaturen.

Heel vaak voldoet de standaard Views-template niet aan onze wensen, dus kunnen we de templates voor Views overschrijven. Helaas heeft Views geen gebruikersinterface om de juiste template te vinden, maar we kunnen wel gebruikmaken van patronen om templates te herdefiniëren.

Meer over patronen lees je in dit artikel:

6.6. Werken met templates in Drupal. Wat zijn de templates in de core van Drupal.

In het bijzonder zijn we geïnteresseerd in het volgende:

Hieronder staan de mogelijke bestandsnamen van templates die je kunt overschrijven.

Naam van de view — foobar (machine name)
Weergaveformaat — unformatted (niet-geformatteerde lijst, voeg eventueel opties toe)
Weergavestijl — fields
Naam van de weergave — page

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

De plugin Owl Carousel 1.x heeft geen mogelijkheid om miniaturen in de galerij weer te geven. Daarom gebruiken we Owl Carousel versie 2.x, die wel ondersteuning biedt voor miniaturen. Als je geen zin hebt om templates te herdefiniëren of eigen CSS- en JavaScript-code te schrijven, kun je eenvoudig het module Views Slideshow installeren:

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

Of het Flex Slider-module:

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

Met deze modules kun je snel diavoorstellingen configureren zonder kennis van CSS of jQuery.

Wij gaan oefenen met het overschrijven van Views-templates en het koppelen van jQuery-bibliotheken.

Om te beginnen downloaden en activeren we de Owl Carousel 2.x-bibliotheek:

https://github.com/OwlCarousel2/OwlCarousel2

Misschien heb je ook Owl Carousel 1.x gevonden:

https://github.com/OwlFonk/OwlCarousel

Deze versie is voor ons niet geschikt, omdat ze geen miniaturen ondersteunt — daarvoor zou extra code geschreven moeten worden.

Kopieer de map owl-carousel (waar het bestand owl.carousel.min.js zich bevindt) naar de map van ons thema. Vervolgens voegen we de CSS- en JS-bestanden van de carousel toe. Voeg de volgende regels toe aan het bestand .libraries.yml van je thema:

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

Ik heb de JS-bestanden niet verplaatst naar de map /js en de CSS-bestanden niet naar /css, maar dat kun je wel doen — vergeet dan niet de paden in de CSS-bestanden aan te passen naar de juiste afbeeldingslocaties (meestal in de map images).

Om de wijzigingen toe te passen, moet je de cache leegmaken.

Maak nu een inhoudstype “Galerij” aan en voeg er een afbeeldingsveld aan toe.

Maak vervolgens een nieuwe view aan waarin we het veld afbeelding van dit nieuwe inhoudstype tonen.