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

Главные вкладки

levmyshkin 16 августа 2019 в 9:54

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

Видео:
https://www.youtube.com/watch?v=EtnHgqAUYT4

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

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

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

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

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

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

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

/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 подключается к общему

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

Также я подключил дополнительный 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...

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

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 файлы. Если у вас что-то не получается то пишите в комментариях, будем разбираться.

Атрибуция

Абраменко Иван

Автор