Extra Block Types (EBT) - New Layout Builder experience❗

Extra Block Types (EBT) - styled, customizable block types: Slideshows, Tabs, Cards, Accordions and many others. Built-in settings for background, DOM Box, javascript plugins. Experience the future of layout building today.

Demo EBT modules Download EBT modules

❗Extra Paragraph Types (EPT) - New Paragraphs experience

Extra Paragraph Types (EPT) - analogical paragraph based set of modules.

Demo EPT modules Download EPT modules

Scroll

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

18/11/2019, by Ivan

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

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

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

9.10. Слайдшоу для Drupal 8

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

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 смотрите в этом видео:

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

9.10. Слайдшоу для Drupal 8