8.9. Темизация Views Drupal 8. Создаем owl carousel слайдшоу с thumbnails.
Очень часто нас не устраивает шаблон Views, поэтому мы можем переопределить шаблоны для Views. К сожалению пока нет UI для поиска нужного шаблона во Views, но мы можем использовать паттерны для переопределения шаблонов.
Подробнее про темизацию Views смотрите в этом видео:
4.5.5.1. Подключаем jQuery OwlCarousel к Drupal 8 Views
Подробнее о паттернах в этой статье:
8.6. Работа с шаблонами в Drupal 8. Какие есть шаблоны в ядре Drupal 8.
В частности нас интересует вот это:
View Name - foobar (machine name)
Display format - unformatted (unformatted list, add possible options)
Display Style - fields
Display Name — 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, где выводим одно поле изображение из нового типа материала.
Скриншот вью.
Теперь если вы посмотрите на вывод представления, то
Подробнее про темизацию Views смотрите в этом видео: