Настроить слайдер с модулем адаптивных слайдшоу FlexSlider и модулем Views

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

Если вы выбираете слайдеры, то для друпал есть готовые модули: FlexSlider, Nivo Slider, Bx Slider, Views Slideshow Slider, bootstrap_carousel, Owl Carousel.

Среди них есть модули с готовой админской частью, легковесные, респонсивные, имеющие связь с другими модулями или без связи.

Также можно использовать и другие библиотеки слайдшоу, но если для них не написаны друпал-модули, вам придётся правильно настраивать работу таких библиотек на сайте вручную. Обычно это требует правильно назвать класс блока, в котором должны быть слайды выведены списком ul и подключить библиотеку.

Не все модули и не все библиотеки имеют адаптивные настройки, то есть не адаптируются под малые экраны. Но если этот критерий для вас важен, FlexSlider и Bxslider вам подойдут.

FlexSlider является респонсивным слайдером, который добавляет стиль просмотра в настройки Представлений Views. Использование этого модуля требует некоторых усилий по настройке сайта, но его преимущество в том, что он адаптивный и легковесный, не вызывает ошибок javascript.

FlexSlider может отображать не только слайды, он может "прокручивать" последние новости, анонсы или заголовки и любые другие поля.

1. Установка модуля

Установите модуль flexslider с помощью drush (через ssh) или с помощью Update Manager (через веб-интерфейс) или вручную закачав папку модуля на сервер папку /sites/all/modules.

Скачайте библиотеку FlexSlider2 отсюда https://github.com/woothemes/FlexSlider/ и закачайте в папку /sites/all/libraries
Файлы должны лежать так, чтобы были такие пути:
/sites/all/libraries/flexslider/jquery.flexslider-min.js
/sites/all/libraries/flexslider/jquery.flexslider.js
/sites/all/libraries/flexslider/flexslider.css
/sites/all/libraries/flexslider/images

Другие файлы и папки в папке библиотеки flexslider в принципе не нужны.

Включите модуль FlexSlider и FlexSlider Views Style и убедитесь, что на странице Отчёты - Отчёты о состоянии нет ошибок, и библиотека найдена.

flexslider modules

 

2. Настройка типа материалов

FlexSlider может работать с любыми материалами, но для удобства можно создать отдельный специальный тип материала "Слайд". При создании сразу отключите галку "Отображать на главной" и снимите галку "Главное меню", чтобы не предлагалось добавление ссылки в меню.

В типе материала "Слайд" добавьте два поля:

  1. Адрес URL (типа "Текстовая строка" - в это поле будем заносить url страниц сайта, на которые будут вести слайды)
  2. Слайд (Изображение) - в настройках укажите каталог slides, стиль предпросмотра - нет предпросмотра

slide field

Поле Body можно удалить. Машинные имена полей в дальнейшем будут использоваться в Представлении.

slide type fields

 

3. Создание материалов

Добавьте на сайт несколько материалов типа Слайд: указывайте url, на которые они должны указывать и загружайте картинки слайдов.

У меня получилось так:

slide1

slide 1 page

slide 2

 

4. Настройка Вида показа изображений

Если вы хотите защититься от возможных ошибок в форматах изображений, то можно настроить Вид показа изображений, чтобы все слайды приводились к одному размеру.
Например, если 1 слайд вы загрузили размера 1000х280, а другой 1010х280, то без дополнительных настроек стилей они будут "скакать", поэтому если у вас не гарантированы одинаковые размеры картинок, задайте для них Вид показа изображений и используйте его в Представлении при отображении картинок.

Этот шаг можно пропустить, если вы будете закачивать картинки с точными размерами слайдов.

FlexSlider добавляяет Вид показа изображений flexslider_full, котором можно настроить необходимый формат картинок, сделав масштабирование и обрезку с возможностью увеличения размеров.

Если в настройках flexslider_full тут /admin/config/media/image-styles/edit/flexslider_full нажать "Перекрыть по умолчанию", можно установить свои правила обработки картинок этого формата. Ну или можно не трогать этот и добавить новый стиль. Я добавил такую обработку:

mashtab

В итоге в первом действии картинки увеличиваются (разрешено увеличение размера), а во втором - обрезаются, если необходимо.
Так все картинки будут одинаковыми.

flexslider full style

 

5. Создание Представления Views

Создайте представление "Слайдшоу" по типу материалов: Слайд, указав нужное число слайдов, выбрав формат отображения: Flex Slider из Полей, создав Блок и продолжив настройки.

Первый шаг создания Представления показан на картинке:
slideshow views

Продолжите редактирование представления и убедитесь, что настройки правильные:
views slideshow2

1 - Формат - FlexSlider
2 - Показать - Поля
3 - добавьте новые поля
4 - также можно удалить заголовок представления, чтобы выводился только слайдер без заголовка

В настройках этого представления добавьте поля: Адрес URL, Слайд - эти поля мы создавали в типе материалов Слайд. Не путайте Адрес и "Адрес URL".

Адрес URL исключите из вывода и выберите формат отображения: Простой текст, так как нам нужна сама строка адреса, без обёрток. Заголовок тоже можно исключить из вывода, если есть. Но не удаляйте! Отметьте галку в настройках "Исключить из вывода".

views adres

Поле Заголовок можно либо совсем удалить, или если вы хотите, чтобы была подсказка на слайдах, то нужно исключить из вывода.
Настройки поля заголовок представлены на картинке:
views zagolovok

 

Перегруппируйте поля, чтобы Заголовок и Адрес были обязательно выше Слайда.

Первичные настройки поля Слайд показаны на картинке:
views slide

Слайд настройте так, чтобы сделать его ссылкой на адрес url, то есть в настройках этого поля нажмите: Перезаписать результаты - и отметьте галку "Заменить выводимое полем значение"

views slide2

Вставьте такую строку, исправив в ней токены:

<a href="[field___url]" title="[title]">[field__slide]</a>

В этой строке использованы токены, которые вы должны посмотреть на этой же странице в разделе "Подстановочные шаблоны".

views_tokeny

Выбрав токены, правильно вставьте нужную строку:

views slide

Посмотрите, что получилось и сохраните.

views slideshow ok

На скриншоте видна работа слайдшоу. Обратите внимание, что заголовок представления удалён, а также поля расставлены в порядке:
Заголовк
Адрес URL
Слайд.

Если изменить порядок полей, тогда токены могут не работать. Токены работают тогда, когда поле выведено до момента их использования.

 

7. Вывод блока в нужном регионе

Откройте Структура - Блоки и выведите блок Представление: Слайдшоу в нужный регион, также настройте блок, чтобы отображался только на нужных страницах, например на главной .

В теме Professional Responsive Theme и в других тоже определён регион Слайдшоу. Если у вас нет подходящего региона, тогда в следующем уроке вы узнаете как добавить регион и как отобразить этот регион только на главной.

В результате вы получите слайдшоу на главной.

 

8. Настройка стилей слайдшоу FlexSlider

В модуле FlexSlider легко задавать нужные стили. Например, можно убрать рамку слайда, изменить положение и размеры стрелок, также можно и сами стрелки изменить. Всё это выполняйте, открыв Фаербаг по кнопке f12.

flexslider firebug

Просматривайте в фаербаге html-код и изучайте стили. Например, на картинке выделен элемент div с id="flexslider-1" и классом flexslider. Если других слайдеров у вас не будет, тогда можно использовать .flexslider для задания стилей. Справа для класса .flexslider видны стили margin, border и т.д.

Вы можете задавать в файле стилей вашей темы свои новые настройки. Если изменений стилей не происходит, можете добавлять !important, например так можно убрать бордюр:

.flexslider {border:0 !important; margin:0 !important;}

Обычно директива !important не нужна. Чистите кеш при обновлении стилей.

Рубрика: