Как стать автором
Обновить

How-to: Как создать красивый и функциональный баннер ротатор средствами Drupal 7

Время на прочтение 6 мин
Количество просмотров 16K
Обычно я не пишу статьи на тему как использовать те или иные готовые модули для реализации некоторой функциональности. Гораздо больше меня интересует непосредственно создание модулей, взаимодействие с ядром, работа с различными API и т.п. «программистские» и архитектурные вещи.
Но, на этот раз, по многочисленным просьбам трудящихся я все таки решил написать один How-to.

Итак, речь в настоящей статье пойдет о том, как готовыми средствами Drupal 7 и парой шаблонов реализовать баннер-ротатор наподобии того, что встроен в один из моих ресурсов (http://labridge.ru).

Конечный результат должен выглядеть примерно так:



The Big Idea


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

Когда я думал над архитектурой будущего ротатора у меня было два варианта:
  1. На сайте есть набор материалов. Можно было бы для каждого типа материалов назначить нужные поля, какое-нибудь булево поле с названием «Поместить в ротацию» и далее осуществлять через Views вывод отмеченных этой галочкой материалов в ротатор.
  2. Создать отдельный тип материалов «Баннер для ротатора» и выводить в ротатор его.

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

Вообщем по итогам недолгого размышления я остановился на втором варианте.

Реализация


Шаг 1. Модули.

Предполагается что Drupal 7 установлен в стандартной комплектации и все базовые модули типо Field UI включены.
Также нужно скачать и установить следующие модули:

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

Шаг 2. Создание типа материала для баннера.

Для баннера на странице admin/structure/types создаем новый тип материала. Каждый материал данного типа будет являться отдельным баннером.
Далее идем на страницу управления полями и создаем следующие поля:
  • Изображение (field_image) — поле типа «Изображение». Будет хранить собственно картинку нашего баннера, поэтому имеет смысл сделать его обязательным для заполнения.
  • Ссылка (field_link) — поле типа «Ссылка». Будет хранить ссылку для перехода по баннеру.
  • Описание (field_description) — поле типа «Текстовая область». Будет хранить короткую аннотацию для баннера, что позволит избежать нанесения оной на баннер в графическом редакторе.

Ну и предполагается, что поле «Заголовок» модуль node добавил автоматически.

Шаг 3. Создание представления (view).

Теперь перейдем собственно к созданию вьюхи, которая все это будет отображать.
Идем сюда admin/structure/views и добавляем новую вьюху. Я назвал её «Front Rotator» (front_rotator).

Далее:
  1. Добавляем display типа «блок».
  2. Меняем формат на Slideshow.
  3. В графе «показать» выбираем Fields.
  4. В графу поля добавляем: Заголовок, Описание, Изображение, Ссылка, Вес.
  5. В качестве фильтров выбираем: материал должен быть опубликован (чтобы была возможность выводить баннер из ротации), тип материала — выбираем наш тип материала для баннеров.
  6. В качестве сортировки указываем сортировку по весу материала.

В итоге должно получиться что-то типа этого:


Теперь перейдем к настройке формата Slideshow (Панель «Формат», пункт «Slideshow», ссылка «Настройки»).
  1. В качестве «Slideshow Type» выбираем «Cycle».
  2. В формате Slideshow предусмотрено 2 зоны для размещения элементов навигации. Формально они называются «низ»и «верх». Однако, это лишь формальность. У меня например нижняя зона на самом деле располагатся слева. Так что реально важно знать и принимать во внимание только то, что планируя шаблон для ротатора мы можем оперировать двумя различными зонами для размещения элементов навигации и управлять ими через настройки формата вьюхи.
  3. Для нашего ротатора отмечаем галочкой пункт «Навигатор» в нижней зоне, в качестве «Pager Type» выбираем «Fields» и отмечаем в «Pager fields» поле «Заголовок».

Витоге должно получиться что-то типа того:


Шаг 4. Темизация.

Теперь пришло время разобраться, как изменить стиль отображения нашего ротатора.
Формально Views Slideshow обладает системой стилей, однако я решил просто добавить пару шаблонов в тему сайта, найдя данное решении более гибким, быстрым и удобным.

В тему было бавлено два шаблона:
view-slideshow.tpl.php — отвечает за общий вид ротатора и отображение зон. Был отредактирован следующим образом:
<div class="skin-labridge">
  <?php if (!empty($top_widget_rendered)): ?>
    <div class="views-slideshow-controls-top clearfix">
      <?php print $top_widget_rendered; ?>
    </div>
  <?php endif; ?>
  
  <?php print $slideshow; ?>
  
  <?php if (!empty($bottom_widget_rendered)): ?>
    <div class="views-slideshow-controls-bottom clearfix">
      <?php print $bottom_widget_rendered; ?>
    </div>
  <?php endif; ?>
  <div class="clearfix"></div>
  <div class="clear"></div>
</div>

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

Второй шаблон views-view-fields--front-rotator.tpl.php отвечает за вывод каждого отдельного баннера внутри ротатора. У меня он выглядит так:
<div>
<?php if(isset($fields['field_link']) && !empty($fields['field_link']->content)): ?><div class="title"><?php print $fields['field_link']->content ?></div><?php endif; ?>
<?php if(isset($fields['field_description']) && !empty($fields['field_description']->content)): ?><div class="description"><?php print $fields['field_description']->content ?></div><?php endif; ?>
<?php print $fields['field_image']->content ?>
</div>

Как видно, в каждом баннере выводятся изображение, описание и ссылка.
При этом, порядок вывода полей в моем случае не играет большой роли т.к. «дивы» с полями «Описание» и «Ссылка» позиционруются абсолютно и «висят» над изображением.

Соотвественно в теме был создан CSS файл, для оформления всего вышеуказанного:
#block-views-front-rotator-block{
  background-color: rgb(40, 40, 40);
  width: 1000px;
  height: 307px;
}

#views_slideshow_cycle_main_front_rotator-block{
  position: absolute;
  margin-left: 261px;
}

.view-front-rotator{
  border: 4px solid rgb(50, 50, 50);
  border-left:none;
  background-color: rgb(40, 40, 40);
}

.view-front-rotator .title{
  position:absolute;
  margin-top: 245px;
  margin-left: 565px;
  padding: 12px;
  background-color: #A61D31;
  border: 5px solid #65111d;
  white-space: nowrap;
}

.view-front-rotator .title A{
  text-decoration:none;
  font-size:1.2em;
  color: white;
}

.views_slideshow_main{
  float:right;
  margin-bottom: -3px;
}

.views-slideshow-controls-bottom{
  background-color: rgb(40, 40, 40);
  height: 300px;
  position: absolute;
}

.views_slideshow_pager_field_item{
  width: 241px;
  padding: 0 10px;
  line-height: 45px;
  cursor:hand;
  cursor:pointer;
  color: #FFFFFF;
  font-size: 1.1em;
  font-weight: bold;
}

.views_slideshow_pager_field_item.active{
  background-color: #A61D31;
  color: white;
}

.view-front-rotator .description{
  position:absolute;
  width: 705px;
  background-image: url('images/bt_black_70.png');
  color: white;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 10px;
  font-family: Tahoma;
  font-size: 14px;
}

.view-front-rotator .description P:last-child{
  padding-bottom: 0;
  margin-bottom: 0;
}

.view-front-rotator .description H2{
  margin-bottom: 0;
  color: #ff3b3b;
}

.view-front-rotator .description P{
  margin-top: 5px;
}


Из особенностей CSS-ки отмечу лишь то, что в качестве фона под описанием используется не прозрачный цвет заданный через rgba или аналогичным способом, а полупрозрачная картинка в формате png.
Суть в том, что такой способ является наиболее кроссбраузерным и поддерживается IE начиная с 7 версии. В IE 6 и ниже фон под описанием будет черным, что вообщем-то тоже приемлимо вписывается в концепцию дизайна.

Ну вот впринципе и все. Теперь можно поместить блок с ротатором в нужный регион страницы и через стандартный интерфейс материалов добавлять новые баннеры. Сортировка будет происходить по полю weight доступному при редактировании материала. Отключить тот или иной баннер можно просто сняв его с публикации.

P.S. Статья писалась в ретроспективном стиле, т.е. уже сделав ротатор я вспоминал как его делал :). Всвязи с этим, или по причине очевидности их для меня, я мог случайно опустить те или иные шаги. Если что-то будет не получаться или покажется непонятным, жду Ваших вопросов в комментариях к статье.
Теги:
Хабы:
+4
Комментарии 17
Комментарии Комментарии 17

Публикации

Истории

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн