4.5.5.1. Подключаем jQuery OwlCarousel к Drupal 8 Views

В прошлой статье мы сделали слайдшоу с помощью Views Slideshow. Но у нас остался незастилизованный пагинатор с маленькими картинками.

В этой статье мы разберем как добавить OwlCarousel и добавить CSS с помощью дополнительной библиотеки. В приложение к статье приложены файлы модуля:

http://drupalbook.ru/sites/default/files/drupalbook_owlcarousel.zip

В этой статье мы используем кастомный модуль для подключения OwlCarousel, но в следующий раз мы будет стилизовать слайдшоу в файлах темы офомления.

Как создать slideshow вы можете посмотреть в предыщем видео:

4.5.5. Views slideshow - вывод jQuery-слайдшоу и каруселей через Views

В результате добавления кастомного модуля у нас получится вот такое слайдшоу:

Views slideshow

Сначала нужно создать папку нашего модуля в папке всех модулей:

/modules/custom

Дальше создаем файл информации о модуле

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

name: Drupalbook OwlCarousel
description: Adds styles to Views pager
type: module
core: 8.x
package: Drupalbook

Подробнее о разработке модулей на Drupal 8 мы разберем позже, сейчас мы просто разберем как добавить библиотеку в кастомный модуль.

name - Произвольное имя для нашего модуля
description - произвольное описание нашего модуля
type - здесь мы указываем тип module/theme в зависимости от того что мы создаем тему или модуль
core - указываем для какой версии друпала модуль
package - группируем модули функциональности

Теперь мы уже можем включить наш модуль. Но для начала давайте добавим библиотеку OwlCarousel, cайт плагина jQuery OwlCarousel:

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

Я положил библиотеку OwlCarousel сюда:
\modules\custom\drupalbook_owlcarousel\js\owlcarousel

Также я добавил кастомный файл javascript, в котором мы будем инициализировать библиотеку OwlCarousel

\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 подключается к общему <div> тегу, который оборачивает наши отдельные изображения. Также я добавил класс owl-carousel для этого общего div'a, это нужно чтобы применились стандартные стили OwlCarousel. Также обратите внимание, что в дополнительном массиве опций responsive, мы може указать отдельно разное количество элементов на слайде для каждого из разрешений экрана от 0 до 600 пикселей 3 элемента, от 600 до 1000 пикселей 4 элемента, от 1000 пикселей и выше 5 элементов. Размеры картинок при этом будут автоматически подгонятся самим плагином OwlCarousel.

О том как работать с jQuery в 8ом друпале:

http://drupalbook.ru/drupal/88-rabota-s-javascriptjquery-v-drupal-8-chto-takoe-behaviors

Также я подключил дополнительный CSS файл, в него мы будем писать стили для слайдшоу: стрелочки, размеры, отступы.

\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;
}

И теперь нам нужно все это делао подключить как библиотеку Drupal 8:

Создание библиотек для 8го друпала:

https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module

http://drupalbook.ru/drupal/89-temizaciya-views-drupal-8-sozdaem-owl-carousel-slaydshou-s-thumbnails

Для этого я создал файл

modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.libraries.yml

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

В зависимостях нужно указать jQuery, на случай если это будет единственная библиотека, которая требует jQuery. Также мы должны подключить CSS/JS библиотеки OwlCarousel: owl.carousel.css, owl.theme.default.min.css, owl.carousel.min.js

Наши CSS/JS drupalbook_owlcarousel.css, drupalbook_owlcarousel.js мы подключаем после файлов OwlCarousel, чтобы можно было использовать библиотеку в javascript и переопределить если будет нужно CSS стили.

Теперь чтобы наша библиотека подключилась нужно включить модуль drupalbook_owlcarousel. А также добавить еще один файл с подключение библиотеки:

modules\custom\drupalbook_owlcarousel\drupalbook_owlcarousel.module

<?php

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

Имя view мы указыем в условии if, а в название библиотеки мы сначала указываем имя модуля где находится библиотека drupalbook_owlcarousel, а потом через косую черту указываем название библиотеки из файла drupalbook_owlcarousel.libraries.yml. Для удобства я назвал библиотеку также как и наш модуль, но в одном модуле может быть несколько библиотек и не всегда имя библиотеки совпадает с именем модуля.

Теперь чистим кеш и наши стили и javascript должны применится. Возможно у вас другие названия селекторов и вам нужно будет поменять CSS/JS файлы. Если у вас что-то не получается то пишите в комментариях, будем разбираться.