Как установить модули views slideshow и flexslider для Drupal

​

Рассмотрим, как установить и настроить модуль views slideshow на drupal 7. После чего установим дополнительный модуль flexslider для придания гибкости слайдеру при различных разрешениях дисплея.

Первым делом необходимо установить следующие модули:

1. Views (7.x-3.5)
2. Views Slideshow (7.x-3.0)
3. Chaos tool suite (7.x-1.2)
4. Libraries (7.x-2.0)
5. Link Field (7.x-1.0)
6. Token (7.x-1.4)

Установка модулей для слайдера

В Drupal 7 модули можно устанавливать через раздел администрирования. Несмотря на то, что многие пользуются старым и проверенным способом установки через директорию самой папки с сайтом yoursitename/sites/all/modules , я привык копировать ссылку на нужный модуль с сайта drupal.org и осуществлять установку через раздел администрирования модули/установить новый модуль.

После установки вышеперечисленных модулей переходим на страницу всех модулей  последовательно их включаем:

(1) Views (2) Views UI (3) Views Slideshow (4)Chaos tools (5) Link (6) Libraries (7) Token

Создание кэшированных изображений

В Drupal 7 кэшированные изображения являются частью встроенного функционала под названием Стили изображений. Итак, давайте создадим стили изображений для слайдера. В этом уроке я использую изображения размером 920*480 пикс (вы можете выбрать любой размер в зависимости от ваших потребностей).

Настраиваем Стили изображений:

Перейдите в раздел мультимедиа/стили изображений и нажмите ссылку Добавить стиль. Вводим название стиля, например, “images_for_slider”.

В открывшемся окне выбираем эффект. Я выбрал “Изменение размера”. Нажимаем кнопку Добавить. В открывшемся окне вводим нужные размеры для наших изображений: ширина – 920 пикс., высота – 480 пикс (вы вводите нужные вам размеры). Добавляем данный эффект, после чего нажимаем кнопку Обновить стиль.

Создаём новый тип материала

Давайте добавим новый тип материала. Переходим в административном меню в раздел Структура/Типы материалов/Добавить тип материала:

1. Добавляем имя, например Main slider.
2. Краткое описание, например Responsive-слайдер в верхней части сайта.
3. Настройки формы можно оставить по умолчани.
4. Настройки публикации. Я отметил пункты Опубликовано и помещено на главную страницу.
5. Настройки отображения. Я выключил пункт Показывать автора и дату публикации.
6. Настройки комментариев. Закрываем возможность комментирования.
7. Настройки меню я оставил по умолчанию.
8. Нажимаем Сохранить и добавить поля.

Создание новых полей

В данном примере я создал два поля – поле для изображения и поле для ссылки. Поле для изображения мы будем использовать для загрузки нашего изображения к слайдеру и поле для ссылки для возможности перехода к соответствующему материалу. Настройка поля для изображения:

В пункте Добавить новое поле вводим:

1. Название поля для изображения, например Slider Image.
2. Выбираем тип поля – изображение.
3. Виджет – изображение.
4. Далее нажимаем Сохранить. В открывшемся окне оставляем настройки по умолчанию и нажимаем Сохранить настройки поля.

Настройки параметров созданного поля Slider_Image вы можете определить для себя сами. Я отметил пункт Обязательное поле, а также указал отдельный каталог slider_images, в котором будут храниться изображения для слайдера. Нажимаем Cохранить.

Настройка поля для ссылки

Настройки аналогичные предыдущему пункту. Имя поля - Slider Link. Тип поля – ссылка, виджет – link. В настройках поля оставляем всё как есть. В результате у вас должно получиться следующее:

Управление отображением

Убираем метку с поля Slider Image, а также определяем ссылку Slider Link как скрытую.

Создание содержимого для слайдера

Заходим в раздел Cодержимое/Добавить содержимое/Main Slider. Указываем название, загружаем первое изображение, вводим атрибуты alt и title для изображения, а также имя ссылки и путь к нужному материалу. Настройки комментариев - закрыть возможность комментирования, в настройках публикации должен быть выбран только один пункт отображать. Остальные настройки можно оставить по умолчанию. Далее нажимаем сохранить и по такой же схеме добавляем остальные изображения. В данном уроке у меня их 3.

Создание нового представления для слайдера

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

1. Добавляем название представления, например Main slider
2. Можно указать дополнительное описание дополнительное описание для данного представления
3. Показать – содержимое, типа – Main slider
4. Уберите отметку Создать страницу и выберите Создать блок
5. Формат отображения – Слйд-шоу из поля
6. Элементов на страницу – 3 и нажимаем Продолжить редактирование

Настройка отображения

В разделе поля необходимо добавить ссылку на содержимое. Нажимаем Добавить и выбираем из списка Содержимое: Slider Link (эта та самая ссылка из типа материалов Main slider). В настройках убираем создать метку и включаем исключить из вывода (эта ссылка отображаться не будет, она нам нужна как вспомогательная для определения url материала).

Далее по аналогии добавляем поле для изображения - Содержимое: Slider Image. (Ссылка Slider Link должна стоять перед полем с изображением!) В настройкаx убираем создать метку, средство форматирования – изображение, стиль изображения – images_for_slider(мы создали этот стиль ранее), изображение как ссылка – содержимое. Чуть ниже заходим в подраздел Перезаписать результаты. Включаем здесь пункт Выводить это поле в виде ссылки. Теперь нужен сам путь. А откуда его взять? Вот тут нам и пригодится та ссылка, что мы сделали невидимой! Она нам и предоставит этот путь. Чуть ниже кликните на подстановочные шаблоны, скопируйте вариант [field_slider_link] и вставьте это значение в поле путь ссылки. Кстати, данную возможность по распознаванию ссылок нам предоставил модуль Token, который мы установили в самом начале.

Критерии фильтрации

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

Формат – настройки слайдшоу

Выбираем отображать в виде маркированного списка. Классы строк и классы полоски можно выключить. Класс обертки можно оставить как есть. Тип слайдшоу – цикл.

Чтобы настроить опции цикла необходимо скачать плагин jquery.cycle.all.min.js. Скачать его можно здесь http://malsup.com/jquery/cycle.

Для установки скачанного плагина на сайт необходимо в папке site/all создать папку libraries а в ней папку jquery.cycle. Именно в эту папку и надо скопировать скачанный скрипт.

Теперь появится возможность настрить опции цикла слайдшоу. Эффект можно выбрать любой, я выбрал fade. Остальные настройки можно изменять в зависимости от ваших потребностей.

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

Давайте уберём название Main Slider над слайдером и скроем ссылки для каждой картинки. Идём в Блоки и в поле Название блока ставим ⟨none⟩ (для отображения слайдера только на главной странице здесь же в текстовом поле настроек отображения ставим ⟨front⟩).

Для избавления от пока ненужных ссылок на страницы от слайдера в представлении main slider - Содержимое: заголовок - исключить из вывода (можно и удалить если вам впоследствии не нужна будет ссылка в ввиде отдельной кнопки).

Установка Flex Slider

Наш слайдер уже сейчас прекрасно работает. Давайте сделаем его адаптивным к разным разрешениям дисплея, то есть сделаем его responsive. Для этого устанавливаем модуль Flex Slider отсюда http://drupal.org/project/flexslider.

После установки и включения модуля (я выбрал все его пункты) заходим в созданное представление main slider. Находим пункт формат – слайдшоу – настройки. В настройках меняем Тип слайдшоу на Flex Slider. Поле Option Set оставляем Default, поле Caption Field – нет.

Нажимаем Cохранить. Смотрим…упс! Не работает! Потому что надо установить библиотеку flex. Скачать можно отсюда https://github.com/woothemes/FlexSlider. Переименовываем скачанную папку в flexslider и копируем ее в папку libraries ( site/all/libraries/). Чистим кэш.

Всё! Resonsive-slider готов! Настроить эффекты и временные задержки можно в разделе Конфигурация – мультимедиа – Flex Slider.​

Хотелось бы еще отметить пару нюансов по стилевому отображению слайдера. Для отображения нужный ширины слайдера и его центровки по горизонтали необходимо поправмить файл flexslider_img.css находится он здесь sites/all/modules/flexslider/assets/css/flexslider_img.css:

.flex-nav-container {
  float: none;
  position: relative;
  max-width: 920px; /* выбираем максимально возможную ширнину слайдера */
  margin: 30px auto;
}

Теперь слайдер отцентрировани по горизонтали и полностью адаптивный ко всем возможным разрешениям дисплея.