Drupal 8: Слайдшоу с модулем Views Slideshow

Drupal: 
Уровень сложности: 

Слайдшоу написаны на JavaScript, что само собой увеличивает риск возникновения ошибок и нагрузку на браузер пользователя. В настоящее время два модуля слайдшоу, портированные на Drupal 8, неудобны в настройках: Views Slideshow, Jssor Slider, не говоря уже о таком гиганте как Nivo Slider (на 8-ке не использовался, по опыту семёрки - у Nivo Slider очень плохая адаптивность и тяжёлый JavaScript).

 

Как работает Views SlideShow

Этот модуль использует библиотеку jquery (встроенную в ядро Drupal 8) и библиотеку jquery.cycle. После установки этого модуля в Представлениях появляется Формат отображения - Слайдшоу. чтобы создать слайдер, нужно создать Представление с Форматом отображения Слайдшоу, вывести Представление в блок и разместить блок в нужном регионе шаблона сайта.

 

Установка Views Slideshow

Скачайте архив для 8-й версии отсюда https://www.drupal.org/project/views_slideshow и распакуйте в папку modules в корне сайта.
Создайте в корне сайта папку libraries (если ещё нет), скачайте необходимую библиотеку jquery.cycle отсюда http://jquery.malsup.com/cycle и распакуйте архив в папку libraries. При необходимости переименуйте имя распакованной папки на jquery.cycle, убедитесь, что нужный скрипт доступен по адресу: /libraries/jquery-cycle/jquery.cycle.all.js.

 

Создание Представления "Слайдшоу"

Создайте Тип материала "Слайд" с полями: Слайд (типа Изображение) и Ссылка (типа Ссылка, машинное имя - url). И добавьте несколько материалов типа Слайд, то есть загрузите слайды на сайт, и указывайте в поле Ссылка адреса нужных страниц, на которые должен переходить посетитель при клике по слайду. Также для удобства можно добавить поле Позиция (типа Число(целое)), чтобы управлять позицией каждого слайда относительно других, то есть сортировать по полю Позиция. На картинке - поля Типа содержимого "Слайд".

тип слайд поля

Далее создайте Представление "Слайдшоу" с выводом материалов типа Слайд, создав блок, отобразив Поля.
В настройках этого представления установите Формат отображения - Слайдшоу.

vews slideshow creating view
Первый шаг создания Представления "Слайдшоу".

 

Настройки полей представления Слайдшоу

Поле Заголовок нужно сделать скрытым - Исключить из вывода. Не отмечайте для Заголовка чекбокс "Ссылается на Содержимое".
поле заголовок в представлении слайдшоу

Добавьте поле Ссылка, в настройках сделайте его скрытым и отметьте чекбоксы "Только URL" и "Показать URL как обычный текст".
настройка представления слайдшоу поле ссылка

Добавьте поле Слайд и в разделе "Перезаписать результаты" отметьте "Вывести это поле как пользовательскую ссылку" - в поле вставьте токен поля Ссылка (в данном примере это поле имеет машинное имя url, но ваши токены вы можете просмотреть чуть ниже при редактировании поля в спойлере "Подстановочные шаблоны"):
представление слайдшоу поле слайд

Также если вы хотите, можно настроить параметр "Текст в Title", указав в нём токен поля заголовок, чтобы ваши слайды содержали атрибут title тега <img>, но это уже лишнее СЕО.

Добавьте критерий сортировки - Позиция и переместите его на первое место, чтобы ваши слайды сортировались не по дате добавления, а по специально созданному полю Позиция.

В итоге настройки Представления "Слайдшоу" выглядят так:

слайдшоу настройки представления views slideshow

 

Вывод блока Слайдшоу

Откройте страницу Структура - Схема блоков /admin/structure/block и в нужном регионе разместите блок Слайдшоу. Вы можете для этого блока ограничить видимость только страницей <front>.
У вас появится слайдшоу.
Но в нём не будет элементов управления.

 

Элементы управления - стрелки и постраничный навигатор

Редактируйте Представление "Слайдшоу" и на строке "Формат: Слайдшоу" нажмите Настройки. Помимо прочих там есть настройки элементов управления.

Выберите в разделе Виджеты - Снизу Widgets "Элементы управления" - так у вас появятся ссылки Вперёд и Назад на слайдах. Чтобы правильно разместить их и сделать картинками, предлагаю картинки и CSS:

arrarr

Картинки нужно положить в папку images вашей темы.

Следующий CSS-код добавьте в файл css/style.css вашей темы. В CSS адреса картинок указаны так: ../images/arrow_left.png, ../images/arrow_right.png.

  1. #block-views-block-slaidsou-block-1 {max-height:450px;overflow:hidden;}
  2. #block-views-block-slaidsou-block-1 .view-content {position: relative; max-width:1170px; margin: 0 auto;}
  3. #block-views-block-slaidsou-block-1 .view-content div {}
  4. #block-views-block-slaidsou-block-1 .view-content .views-row {margin: 0 !important;padding: 0 !important;border-bottom:0 !important;}
  5. .view-id-slaidsou a {width:100%;}
  6. .view-id-slaidsou img {display:block;padding:0; margin:0;border:0; width:100%;}
  7. .view-id-slaidsou .views_slideshow_slide a {position:relative; display: inline-block;}
  8.  
  9.  
  10. #block-views-block-slaidsou-block-1 .views-slideshow-controls-bottom {position: absolute; bottom: 40%;z-index: 10;width:100%;}
  11. #block-views-block-slaidsou-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_pause {display:none;}
  12. #block-views-block-slaidsou-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_previous {float:left;left:2%;}
  13. #block-views-block-slaidsou-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_previous a {font-size:0; display:inline-block;
  14. height: 67px; width:36px; background: url(../images/arrow_left.png) no-repeat;background-size:100%;opacity: 0.4;}
  15. #block-views-block-slaidsou-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_next {float:right;right:2%;}
  16. #block-views-block-slaidsou-block-1 .views-slideshow-controls-bottom .views_slideshow_controls_text_next a {font-size:0; display:inline-block;
  17. height: 67px; width:36px; background: url(../images/arrow_right.png) no-repeat;background-size:100%;opacity: 0.4;}

Скорее всего, в этом коде придётся менять имена классов. Для этого изучайте html-код слайдшоу с помощью FireBug.

Данное слайдшоу адаптируется под малые экраны, но не умеет адаптироваться при изменении размера экрана без перезагрузки страницы.