Очень часто нас не устраивает шаблон 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 темы мы добавляем следующие строчки:
Я не стал переносить js файлы в папке /js, css в папку /css, но вы можете это сделать, не забудьте тогда поправить пути в css файлах на картинки, которые я так полагаю вы положили в папку images.
Чтобы изменения применились нужно почистить кеш.
Теперь давайте создадим тип материала галерея и добавим в него поле изображение.
Создаем новый view, где выводим одно поле изображение из нового типа материала.
