3.5.5.1. jQuery OwlCarousel opnemen in Drupal Views

In het vorige artikel hebben we een diavoorstelling gemaakt met behulp van Views Slideshow. Maar we hebben nog steeds een ongestylede paginering met kleine afbeeldingen.

In dit artikel bekijken we hoe we OwlCarousel kunnen toevoegen en CSS kunnen integreren via een extra bibliotheek.

In dit voorbeeld gebruiken we een aangepaste module om OwlCarousel te koppelen, maar de volgende keer zullen we de diavoorstelling stylen binnen de bestanden van het thema.

https://drupalbook.org/sites/default/files/inline-images/drupalbook_owlcarousel.zip

Je kunt lezen hoe je een diavoorstelling maakt in het vorige artikel:

3.5.5. Views slideshow – jQuery-diavoorstellingen en carrousels weergeven via Views.

Na het toevoegen van de aangepaste module krijgen we het volgende resultaat:

Allereerst moeten we de map voor onze module aanmaken in de map met alle modules:

/modules/custom

Maak vervolgens het informatiebestand van de module aan:

/modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.info.yml

Voor Drupal 8.8 en lager:

name: Drupalbook OwlCarousel
description: Voegt stijlen toe aan de Views-paginering
type: module
core: 8.x
package: Drupalbook

Voor Drupal 8.8 en hoger:

name: Drupalbook OwlCarousel
description: Voegt stijlen toe aan de Views-paginering
type: module
core_version_requirement: ^8 || ^9
package: Drupalbook

We zullen later meer leren over moduleontwikkeling in Drupal; voor nu bekijken we enkel hoe je een bibliotheek toevoegt aan een aangepaste module.

name – willekeurige naam van onze module
description – beschrijving van de module
type – geeft aan of het om een module of thema gaat
core – versie van Drupal waarvoor de module bedoeld is
package – groepeert modules binnen een bepaalde categorie

We kunnen onze module nu inschakelen. Maar eerst voegen we de OwlCarousel-bibliotheek toe, te downloaden van de jQuery OwlCarousel-site:

https://owlcarousel2.github.io/OwlCarousel2/

Ik heb de OwlCarousel-bibliotheek geplaatst in:

\modules\custom\drupalbook_owlcarousel\js\owlcarousel

Daarnaast heb ik een aangepast JavaScript-bestand toegevoegd waarin we de OwlCarousel-bibliotheek initialiseren:

\modules\custom\drupalbook_owlcarousel\js\drupalbook_owlcarousel.js

(function ($) {
  Drupal.behaviors.drupalBookOwlCarousel = {
    attach: function (context, settings) {
      $('.view-slideshow #widget_pager_bottom_slideshow-block_1').owlCarousel({
        items: 5,
        margin: 5,
        nav: true,
        responsiveClass: true,
        responsive: {
          0: {
            items: 3
          },
          600: {
            items: 4
          },
          1000: {
            items: 5
          }
        }
      });
      $('.view-slideshow #widget_pager_bottom_slideshow-block_1').addClass('owl-carousel');
    }
  };
})(jQuery);

OwlCarousel wordt toegepast op een algemene container die onze afzonderlijke afbeeldingen omsluit. We voegen de klasse owl-carousel toe aan deze container, zodat de standaard OwlCarousel-stijlen worden toegepast. In de responsive-instellingen kunnen we een verschillend aantal items per schermresolutie definiëren: van 0 tot 600px 3 elementen, van 600 tot 1000px 4 elementen, en vanaf 1000px 5 elementen. De afbeeldingsgroottes worden automatisch aangepast door OwlCarousel zelf.

We voegen ook een extra CSS-bestand toe waarin we de stijlen voor de diavoorstelling schrijven:

\modules\custom\drupalbook_owlcarousel\css\drupalbook_owlcarousel.css

.view-slideshow #widget_pager_bottom_slideshow-block_1 {
  max-width: 480px;
  position: relative;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-prev {
  position: absolute;
  left: 5px;
  top: 30px;
  opacity: 0.7;
  background: url(../images/little-left.png) center center no-repeat;
  width: 32px;
  padding-top: 32px;
  height: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
  border: 0;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-prev:hover {
  opacity: 1;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-next {
  position: absolute;
  right: 5px;
  top: 30px;
  opacity: 0.7;
  background: url(../images/little-right.png) center center no-repeat;
  width: 32px;
  padding-top: 32px;
  height: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
  border: 0;
}
.view-slideshow #widget_pager_bottom_slideshow-block_1 .owl-next:hover {
  opacity: 1;
}
.view-slideshow .views-slideshow-controls-bottom {
  max-width: 480px;
}
.views_slideshow_pager_field_item.active img {
  border: 1px solid #0000ff;
}
.views_slideshow_controls_text_pause {
  display: none;
}
.view-slideshow .view-content {
  position: relative;
  max-width: 480px;
}
#views_slideshow_controls_text_previous_slideshow-block_1 {
  position: absolute;
  top: 155px;
  left: 10px;
  z-index: 99;
}
#views_slideshow_controls_text_previous_slideshow-block_1 a {
  background: url(../images/left.png) center center no-repeat;
  width: 42px;
  padding-top: 42px;
  height: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
  border: 0;
}
#views_slideshow_controls_text_next_slideshow-block_1 {
  position: absolute;
  top: 155px;
  right: 10px;
  z-index: 99;
}
#views_slideshow_controls_text_next_slideshow-block_1 a {
  background: url(../images/right.png) center center no-repeat;
  width: 42px;
  padding-top: 42px;
  height: 0;
  overflow: hidden;
  display: block;
  text-decoration: none;
  border: 0;
}

Nu moeten we dit alles koppelen als een Drupal-bibliotheek:

Documentatie over het toevoegen van CSS/JS aan een module:
https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module

Maak hiervoor het bestand modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.libraries.yml aan:

drupalbook_owlcarousel:
  css:
    theme:
      js/owlcarousel/assets/owl.carousel.css: {}
      js/owlcarousel/assets/owl.theme.default.min.css: {}
      css/drupalbook_owlcarousel.css: {}
  js:
    js/owlcarousel/owl.carousel.min.js: {}
    js/drupalbook_owlcarousel.js: {}
  dependencies:
    - core/jquery

In dependencies vermelden we jQuery, aangezien deze bibliotheek jQuery vereist. We voegen ook de CSS/JS-bestanden van OwlCarousel toe: owl.carousel.css, owl.theme.default.min.css en owl.carousel.min.js.

Onze eigen bestanden drupalbook_owlcarousel.css en drupalbook_owlcarousel.js worden ná de OwlCarousel-bestanden geladen, zodat we de bibliotheek kunnen gebruiken in JavaScript en indien nodig CSS kunnen overschrijven.

Om de bibliotheek te koppelen, moeten we de module drupalbook_owlcarousel inschakelen. Voeg vervolgens nog een bestand toe om de bibliotheek te laden:

modules/custom/drupalbook_owlcarousel/drupalbook_owlcarousel.module

/**
 * hook_preprocess_views_view().
 */
function drupalbook_owlcarousel_preprocess_views_view(&$variables) {
  if ($variables['view']->storage->id() == 'slideshow') {
    $variables['#attached']['library'][] = 'drupalbook_owlcarousel/drupalbook_owlcarousel';
  }
}

We geven in de if-voorwaarde de naam van de view op. In de bibliotheeknaam vermelden we eerst de naam van de module (drupalbook_owlcarousel) en daarna, gescheiden door een schuine streep, de naam van de bibliotheek zoals gedefinieerd in het drupalbook_owlcarousel.libraries.yml-bestand. Voor het gemak heb ik de bibliotheek dezelfde naam gegeven als de module, maar in één module kunnen meerdere bibliotheken bestaan en de namen hoeven niet overeen te komen.

Leeg nu de cache, en onze stijlen en JavaScript zouden moeten werken. Mogelijk heb je andere selector-namen en moet je de CSS/JS-bestanden aanpassen. Als iets niet werkt, laat dan een reactie achter — we lossen het samen op.