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. Перейдём к настройкам форматов фильтров и сортировки.

страница настройки views

Часть настроек была задана на первом этапе. Если возникла необходимость измененить параметры нужно кликнуть по названию параметра и в открывшемся окне изменить или удалить его. Нам пока ничего изменять и удалять не нужно, а вот добавить пару полей и критерии сортировки не помешает. Начнём с полей. Кликнем на кнопку 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

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

настроенный views

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

Читайте инструкции

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

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

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

Добавлено пользователем Пётр on пт, 03/14/2014 - 11:23

не много ли модулей для одного слпйдшоу

Для слайдшоу нужен только модуль views-slideshow. Что касается остальных то модуль views я поставил бы в любом случае. Очень полезный модуль. Не зря он в ядре восьмёрки. Оставшиеся два это модули которые сами по себе ничего не выводят но помогают другим и скорее всего понадобятся вам если не для слайдшоу так для чего нибудь ещё

Добавлено пользователем Nikola on пт, 03/14/2014 - 11:39

Статьи отмеченные sticky закрепляются наверху. Получается что одини и теже статьи будут крутиться в слайдшоу и идти сразу под ним.

У меня изменён вывод главной страницы, а слайд шоу выводиться только на главной, поэтому одинакового контента на одной странице не бывает.
В качестве метки могут быть термины таксономии. Создаёте словарь прикрепляете его к типу контента и в условиях фильтрации указываете чтобы выводился контент с определённым термином.

Добавлено пользователем Пётр on пт, 03/14/2014 - 12:05

Откуда взялся стиль front-slider. У меня нет ничего похожего

это стиль обработки изображения который вам нужно создать самому если вам не подходит ни один из стандартных стилей. Подробне про стили читайте здесь

Добавить комментарий

Содержимое данного поля является приватным и не предназначено для показа.