Связка из модулей Panels, Views и Bootstrap Framework

«Здравствуйте, я говорю вам – здравствуйте!» В прошлый раз я писал о том, как установить Bootstrap тему на Drupal и настроить Sass. Сегодня же я расскажу, что необходимо для того, чтобы подружить Bootstrap с Panels и Views, а также сделаю обзор уже готовых модулей для решения данных задач.

Первым вопросом после того, как я услышал про связку Bootstrap и Drupal, у меня был «а как это все будет работать с панелями?». Для меня любой серьезный проект начинается именно с установки модуля Panels – к нему действительно быстро привыкаешь, хотя на первых парах он и кажется сложным. Поэтому сразу же, как только наигрался с Bootstrap и Sass, я поставил Panels, Views и попытался сымитировать страницу сложного проекта с большим числом блоков, списков, таблиц и прочих элементов. Разумеется, без дополнительных модулей и настроек адаптивности страница выглядело убого. Поэтому вот мой небольшой список модулей, которые можете сразу устанавливать вместе с темой Bootstrap:

• Panels Bootstrap Layouts
• Panels Bootstrap Styles
• Views Bootstrap

Panels Bootstrap Layouts

Весьма негромоздкий модуль, который предоставляет 2 шаблона с необходимой для Bootstrap структурой и возможность задавать стили регионам панелей. Вообще это такой хороший example-модуль, код которого можно взять за основу, если потребуется писать какое-то решение под свой проект.

Использовать его довольно просто:

• при создании варианта страницы на этапе Layouts выберите категорию “Bootstrap” и один из двух шаблонов на выбор: Three Columns Stacked или Two Columns Stacked;
• при добавлении Panel Panes на этапе Content изменяйте стиль региона на “Bootstrap” и указывайте его ширину согласно 12 Grid System.

Однако, если вы захотите добавить несколько классов к одному блоку (например, «.col-xs-6 .col-sm-3»), то уже придется писать свое решение. У меня же возникла другая ситуация: я использовал модуль Panels Everywhere, поэтому выбрал шаблон Three Columns Stacked в качестве шаблона для всего сайта и страницы отдельной ноды. Проблема оказалась в том, что у меня отсутствовал в коде страницы класс “. container”. Я пошел на принцип не изменять никаких шаблонов, а попытаться добавить в массив $classes (см. файл 'bootstrap-threecol-stacked.tpl.php') необходимый класс. Чтобы отличить на преропроцессинге шаблон сайта от шаблона страницы, я попробовал привязаться к аргументам. Правда, не знаю на сколько это правильно, но тем не менее оно работает. Код можно добавить в 'template.php' файл вашей темы.

/**
 * Implements hook_preprocess_HOOK().
 */
function MY_THEME_preprocess_bootstrap_threecol_stacked(&$variables) {
  $args = isset($variables['display']->args[0]) ? $variables['display']->args[0] : NULL;
  if (!empty($args->type) && $args->type == "page_content") {
    $variables['classes_array'][] = 'container';
  }
}

Panels Bootstrap Styles

Модуль, чем-то похожий на предыдущий, позволяет через изменение стилей регионов и Panel pane’ов навешивать необходимые Bootstrap классы. Данный модуль позволяет стилизовать элементы, однако с помощью него вы не можете управлять шириной блоков. Какой-то особой пользы от этого модуля я пока для себя не нашел, ну а кому-то может и пригодится.

Views Bootstrap

Вот это шикарный модуль! Модуль предоставляет новые форматы вывода для Views, т.е. расширяет стандартный набор (Unformatted list, Grid, HTML list) всякими «приколюхами» Bootstrap: Bootstrap Accordion, Bootstrap Carousel, Bootstrap Tab и т.д. Вы можете создавать действительно красивый вывод данных лишь при помощи кликов мышкой.

Прочие рекомендации по Bootstrap и Panels

Как только я переключился со стандартного шаблона темы Bootstrap на Panels, у меня слетело меню: пропали и стили, и адаптивность. Причиной стало то, что потерялась необходимая HTML-структура для Bootstrap стилей. Решил я эту проблему следующим образом опять же через 'template.php':

/**
 * Overrides theme_menu_tree().
 */
function MY_THEME_menu_tree__main_menu(&$variables) {
  $output =
    '<div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">'
    . $variables['tree'] .
      '</ul>
    </nav>';
 
  return $output;
}

Да, это говнокод, так как наличие в функциях HTML разметки, да еще и в таких объемах, считается дурным тоном. По хорошему, разметку надо перенести в отдельный .tpl.php-файл, но мне было лень это делать на тестовом проекте. Главное – я показал, как можно переопределить вывод Main menu.

На этом у меня пока все по связке Panels + Bootstrap + Views, но я уверен, что в процессе разработки мне еще придется столкнуться со множеством нюансов – поэтому данный пост будет еще обновляться с течением времени. Если по изложенному есть какие-то вопросы или предложения – велкам в комментарии!