Slideshow на Drupal с текстом и картинками

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

Основные требования и необходимые модули для слайд шоу.

Требований будет три.

1. Каждый слайд содержит картинку, заголовок и несколько слов из начала статьи.
2. Располагается между хедером и основным содержимым.
3. Простое добавление статей в слайд-шоу.

С требованием разобрались теперь будем думать как и чем всё это сделать.

1. .Модуль Views https://drupal.org/project/views. Данный модуль поможет нам создавать запросы к базе данных используя удобный интерфейс. Другими словами нужно будет просто тыкать в кнопки и смотреть на результат. В нашем случае Views поможет нам вывести нужный контент.
2. Модуль Views slideshow https://drupal.org/project/views_slideshow. Добавляет формат вывода SlideShow.
3. Модуль Ctools http://drupal.org/project/ctools. Необходим для работы Views slideshow.
4. Ещё один модуль от которого зависит Views slideshow - Libraries API http://drupal.org/project/libraries. В установке модуля Libraries API есть один нюанс. Для него нужно в папке /sites/all создать папку libraries.

У тех кто делал сайт по урокам webonlife.ru модуль CTools уже установлен. CTools обеспечивал работу модуля Meta Tag.

В нормальном виде слайдер состоит из двух частей - картинка слева, заголовок с текстом справа. Желательно чтобы эти части были равны. Для этого делаем размер выводимой картинки равный половине слайдера минус поля и отступы. У меня под весь блок слайдов есть 960px. Картинка шириной в 450px вполне подойдёт. Определившись с размерами настроим стиль для картинок.  Для тех кто забыл как это делается читать эту статью.

Слайдшоу с помощью Views.

После включения модуля Views у нас должен появиться новый пункт в меню. Переходим  Structure - Views - Add new view. Перед нами страница добавления новой вьюшки.

Обязательно укажем название и отметим что нам нужно сделать блок а не страницу. В выпадающем списке Show выбираем content. Тип контента на ваше усмотрение можете оставить All. Я поставил Article. Переходим к настройкам блока. В Display format выбираем Slideshow of fields. Эти настройки можно будет поменять на следующем этапе. Жмём Continue & edit и оказываемся на странице тонкой настройки. Не будем останавливаться на display name и title. Перейдём к настройкам форматов фильтров и сортировки.

Часть настроек была задана на первом этапе. Если возникла необходимость измененить параметры нужно кликнуть по названию параметра и в открывшемся окне изменить или удалить его. Нам пока ничего изменять и удалять не нужно, а вот добавить пару полей и критерии сортировки не помешает. Начнём с полей. Кликнем на кнопку Add как показано на скрине. В окне добавления полей выбираем Content: teaser_image и Content: Body. teaser_image - это поле которое я добавил к типу материал Article. У вас оно возможно будет называться по другому. Подробнее о типах контента и полях читать здесь. Body - поле которое изначально присутствует во всех типа контента. Жмём Apply. После выбора полей нам предложат настроить их вид. Начнём с текста.

Снимаем отметку с Create a label, если не хотим чтобы наше поле подписывалось. Выбираем формат Summary or trimmed а ниже указываем количество знаков текста. Следующим у нас идёт поле с картинками.

Обратите внимание на image style. Нужно выбрать стиль который был создан для слайдера.

Теперь подумаем о том как нам выводить в слайдшоу только нужный контент. На данный момент, согласно заданным фильтрам, у нас выводятся пять последних опубликованных статей. Это не совсем то что нужно. Нам необходимо добавить какую-нибудь метку к статьям по которой views будет их выделять и помещать в слайдшоу. Такая метка уже есть. При создании статьи в настройках публикации мы можем указать чтобы статья закреплялась в верху списков(Sticky at top of lists).

Теперь нужно рассказать views что мы используем эту метки для добавления статей в slideshow. В разделе filter criteria жмём add. Выбираем Content: Sticky и далее отмечаем Sticky Yes. Должно получиться как на скрине ниже.

Отметим несколько статей и посмотрим что получилось. Оценить полученные результаты можно на той же странице где мы настраивали views. К великому удивлению оно не работает. Наша вьюха показывает одну статью и ничего не крутиться. В разделе настроек FORMAT жмём ссылку Settings напротив Slideshow и всё встаёт на свои места.

Такое случается когда абсолютно уверен в себе и не читаешь инструкцию перед установкой. Чтобы наши слайды заработали нужно в папке site/all/libraries создать папку jquery.cycle. Теперь переходим по адресу http://malsup.com/jquery/cycle/ и скачиваем файл jquery.cycle.all.js и закачиваем на сайт в ранее созданную папку jquery.cycle

Заработало! Жмём кнопку Save. На этом пока остановимся. Большую часть работы мы сделали, осталась подогнать внешний вид под наши требования. В основном это мелкие детали, но их достаточно много поэтому предлагаю немного передохнуть, и уже с новыми силами со следующего поста доделать слайд шоу.

На сегодня всё. Всем удачи.