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

Связка Drupal Panels и Bootstrap

«Здравствуйте, я говорю вам – здравствуйте!» В прошлый раз я писал о том, как установить 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.
Настройка модуля Panels для использования Bootstrap

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

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

Panels Bootstrap Styles

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

Views Bootstrap

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

Настройка модуля Views Bootstrap

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

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

  1. /**
  2.  * Overrides theme_menu_tree().
  3.  */
  4. function MY_THEME_menu_tree__main_menu(&$variables) {
  5. $output =
  6. '<div class="navbar-header">
  7. <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
  8. <span class="sr-only">Toggle navigation</span>
  9. <span class="icon-bar"></span>
  10. <span class="icon-bar"></span>
  11. <span class="icon-bar"></span>
  12. </button>
  13. </div>
  14. <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
  15. <ul class="nav navbar-nav">'
  16. . $variables['tree'] .
  17. '</ul>
  18. </nav>';
  19.  
  20. return $output;
  21. }

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

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

Комментарии

Аватар пользователя danylevskyi
danylevskyi

Супер гуд! Я окончательно решил сьехать с Омеги на Bootstrap.
Omega - нереально крутая тема со всеми модными технологиями, но владение Bootstrap'ом дает куда больше конкурентных преимуществ.

Спасибо за ваш блог!

Аватар пользователя angarsky
angarsky
Мне тоже Bootstrap больше приглянулся, нежели Omega
Аватар пользователя Арсен
Арсен

А если Material design натянуть на Drupal, так вообще сказка получается.

Аватар пользователя angarsky
angarsky
Арсен, натягивать можете, что хотите и не только на Drupal. А вот спамить тут левыми ссылками не стоит, тем более не относящимися к теме поста
Аватар пользователя Арсен
Арсен

bootstrap material design с 8000+ звездами тоже левая ссылка? :)
drupal.org only?

Аватар пользователя angarsky
angarsky
Ладно, ладно.. Мне сразу показалось, что это вообще левый фреймворк, не связанный ни с Bootstrap, ни c Drupal. Сейчас пересмотрел - понял свою ошибку. Готов даже спасибо сказать ;)
Аватар пользователя Sergey Korzh
Sergey Korzh

Еще можно упомянуть Panels bootstrap layout builder , позволяет создавать адаптивные шаблоны прямо из админки, dev версия работает местами глючно, но в целом работать можно.

Аватар пользователя danylevskyi
danylevskyi

Похоже, совместное использование Panels Everywhere и Bootstrap только усложняет работу. Все удобство использования Panels Everywhere сводится на нет. Возможно, для супер-сложных проектов с адскими настройками плагинов выгода совместного использования будет, но для обычного сайта я бы применял обыкновенные панели + Panels Bootstrap Styles (или кастомные плагины для сложных лейаутов) + галочка "скрывать все друпаловские регионы" в панелях.

Возможно, я ошибаюсь, но вот пример с переопределением вывода главного меню я бы назвал "поклейкой обоев через замочную скважину". Друпловский бутстрап имеет готовое переопределение всевозможных элементов (в данном случае меню), которое убивается панелями. Это как-то не совсем правильно - 2 раза проделывать работу.

Может я ошибаюсь и проблема только с главным меню, а дальше все гладко?

Аватар пользователя angarsky
angarsky

Сейчас ответить затрудняюсь, так как пока для проекта по-шустрому настроил фронтенд и больше занимаюсь бэкендом. Через пару недель - можно будет обстоятельно поговорить, как приступлю к верстке!

Да, чтобы подружить бутстрап с панелями придется постараться, из коробки "оно само" пока не срастается. Но без использования панелей я уже не представляю разработку сайтов - ну, кроме визиток. Вот собственно и решил я в боевых условиях проверить эту связку.

Аватар пользователя danylevskyi
danylevskyi

Я имел в виду удаление только panels everywhere.

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

  .d8888b.   88888888888  8888888888  8888888888 
d88P Y88b 888 d88P 888
888 888 d88P 888
.d88P 888 d88P 8888888
.od888P" 888 88888888 888
d88P" 888 d88P 888
888" 888 d88P 888
888888888 888 d88P 888


Зарегистрируйтесь для добавления материалов без проверки.