8.9. Темизация Views Drupal 8. Создаем owl carousel слайдшоу с thumbnails.

Очень часто нас не устраивает шаблон Views, поэтому мы можем переопределить шаблоны для Views. К сожалению пока нет UI для поиска нужного шаблона во Views, но мы можем использовать паттерны для переопределения шаблонов.

Подробнее про темизацию Views смотрите в этом видео:

https://www.youtube.com/watch?v=EtnHgqAUYT4

https://www.youtube.com/watch?v=qE7LEIp3OQE

Подробнее о паттернах в этой статье:

8.6. Работа с шаблонами в Drupal 8. Какие есть шаблоны в ядре Drupal 8.

В частности нас интересует вот это:

Ниже возможные имена шаблонов для переопределения.
 
Имя вьюса - foobar (машинное имя)
Формат отображения - unformatted (неформатированный список, добавить возможные варианты)
Стиль отображения записи - fields
Имя дисплея - 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

Дело в том что у плагина Owl Carousel 1.x нет возможности выводить thumbnail'ы к галереи. Поэтому мы будем использовать Owl Carousel версии 2.x, там есть поддержка thumbnail'ов. Если вы не хотите разбираться в переопределение шаблонов, написание CSS, Javascript кода, то можете просто поставить модуль Views Slideshow:

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

Или модуль Flex Slider:

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

На них вы сможете быстро настроить слайдшоу без знания CSS, jQuery.

Мы же будем практиковаться в переопределение шаблонов Views и подключение jQuery библиотек.

Для начала скачаем и подключим библиотеку Owl Carousel 2.x:

https://github.com/OwlCarousel2/OwlCarousel2

Возможно вы нашли версию Owl Carousel 1.x:

https://github.com/OwlFonk/OwlCarousel

Она нам не подойдет, в ней нет поддержки thumbnail'ов, для нее нужно писать дополнительный код.

Скопируем папку owl-carousel (где лежит файл owl.carousel.min.js) в папку с нашей темой, теперь давайте подключим файлы карусели css и js. В файл .libraries.yml темы мы добавляем следующие строчки:

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

Я не стал переносить js файлы в папке /js, css в папку /css, но вы можете это сделать, не забудьте тогда поправить пути в css файлах на картинки, которые я так полагаю вы положили в папку images.

Чтобы изменения применились нужно почистить кеш.

Теперь давайте создадим тип материала галерея и добавим в него поле изображение.

Создаем новый view, где выводим одно поле изображение из нового типа материала.

0 Thanks