Телевизор 

Связка из модулей Panels, Views и Bootstrap Framework. Кто же такой Сисадмин? Установка и активация модулей

Модуль Panels создает дополнительные регионы на страницах Drupal сайта. Каждый регион или область веб-страницы можно заполнить любым контентом и блоками. Этот модуль делает админку более гибкой и функциональной. Теперь вы сможете не просто перетаскивать блоки по разным регионам, но и увидеть результат визуально.

Скачать модуль Panels ]]> https://www.drupal.org/project/panels ]]>

Русификация модуля ]]> https://drupaler.ru/translate/languages/ru/export?project=panels ]]>

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

Активируем на странице модулей все 4 пунктика:

Дополнительно в «Наборе инструментов Chaos» активировать модуль Chaos tools и Page manager.

Для создания пользовательских стилей для приложений, таких как панели поставить здесь же галочку и напротив модуля Stylizer.

На странице разрешений (permissions) ставим галочки напротив администратора.

Во вкладке "структура" у нас появились новые пункты: "Панели" и "Мини-панели".

Давайте посмотрим что появилось нового, пройдя по ссылке "Панели":

Мы можем сконструировать страницу панель, мини-панель, материал-панель и свой макет.

Как создавать панели и что можно сделать при помощи нового функционала мы рассмотрим на практическом примере построения раздела на сайте "Отзывы".

Про установку и создание мини панели вы можете посмотреть в видео ролике:

Что мы можем еще сделать в панелях друпал

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

Я нашла готовый наглядный обзор модуля панели про добавление "Контекста". Посмотрите в видео ролике:

Всем привет. Решил реализовать каталог на Drupal 7. Целью было создать его без модулей Ubercart и Commerce. Конечно, я понимаю что из них тоже можно сделать каталог, но зачем за собой тянуть столько левого функционала, я не понимаю.

Конечно я полез в гугл и нарыл инфу. Как оказалось, на англоязычных сайтах все решения которые были предложены, так или иначе использовали Ubercart и Commerce. Среди русскоязычных попался всего лишь один достойный: «Продвинутый каталог на Drupal 7 ». Я его попробовал, мне понравилось, но у него есть недостатки:

  1. Самый главный - невозможность задания алиасов для адресов. Т.е. Разделы каталога имеют жесткий адрес catalog/%TID.
  2. Необходимость включения фильтра PHP. Я стараюсь избегать включения данного модуля, ведь если сайтом будут управлять криворукие - то этот фильтр просто яма в безопасности.
  3. Плодятся типы материалов (для фильтров). Не пробовал, точно о проблеме сказать не могу. Мне хватило первых двух чтобы отказаться от него.

Перепробовал уйму вариантов на одном лишь Views. Были даже рабочие, но их гибкость вызывала сомнения. В итоге решением всех проблем стала связка Views & Panels. Именно об этом я и расскажу.

P.s. То что замазано на скринах - настройки по умолчанию (не менялись).

Подготовка

Не удивительно, но для создания каталога понадобится Views , Panels и конечно же Ctools . Включаем:

  • Chaos tools
  • Page manager
  • Views content panes
  • Panels
  • Views & Views UI

Для начала создайте словарь таксономии с названием «Категории каталога» (или же как вам нравится). Добавьте необходимые категории.

Теперь создайте новый тип материала (например «товар») который будет добавляться в каталог, и добавьте ему поле «Term reference» которое ссылается на ваш словарь «Категории каталога». Также добавьте парочку товаров, чтобы видеть результаты.

Создание представлений (Views)

Создание главной каталога

Тут проще простого.

  • Жмем «Add new view»
  • Указываем название «Каталог»
  • Show: Taxonomy terms of type «Категории каталога»
  • Ставим галочку «Create a page» и заполняем.
  • Page title: Каталог
  • Path: catalog
  • Жмем кнопку «Continue & edit»
  • Делаем необходимый Format. Например «Table».
  • В разделе Filter criteria жмем «add».
  • Выбираем «Taxonomy term: Parent term» и жмем «Apply», затем сного «Apply». Тем самым мы сделали чтобы выводились только родительские категории.
  • Сохраняем вьюху.

Этими действиями мы создали страницу по адресу site/catalog на которой будут отображаться только родительские термины.

04.07.2012

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

Выглядят они довольно эффектно. В принципе для небольшого сайта необходимость в них отпадает, а вот если ваш ресурс разросся и вам просто не хватаем места на странице для размещения информации, то вам такие панели будут в самый раз. Строятся такие панели на JS и Jquery, плюс CSS (куда же без него). Сейчас я вам пошагово попытаюсь объяснить как такую панель разместить у себя на сайте под Drupal 7 и для удобства выведем этот блок в качестве региона, что бы мы не залазили каждый раз в код, а просто размещали в данной панели именно тот блок, который нам необходим. Итак приступим:

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

2.Распаковываем и смотрим, что внутри у нас находится папка с изображениями, стили, и индексный файл. Откроем файл «index.html» и видим, что к ней у нас подключаются следующие элементы:

  1. Стили – файл style.css
  2. Библиотека Jquery – с url откуда подкачать файл библиотеки
  3. И перед закрывающим тегом head - вставлен выполняющий скрипт.

Пример подключения я проведу в drupe 7 на шаблоне «Crisp».

3.Первоначально создадим дополнительный регион в шаблоне «Crisp» (про установку данного шаблона я писал ). Для этого идём в файл

    crisp. info

и пишем новый регион:

    regions[ newRegionDrupalfly] = drupalfly


    page. tpl. php

и пишем код вывода данного региона. Замечу, что блок я возьму из разметки индексного файла в скрипте нашей панели, а именно создам блок с классом «panel» в любом месте контента страницы (так как блок абсолютно позиционирован).


    print render($page [ "newRegionDrupalfly" ] ) ;


5. Проверим появился ли у нас новый регион в админке сайта, а именно в структура->блоки


Если вы всё сделали правильно, то регион должен у вас появиться. (Замечу, что после изменений в шаблоне Drupal – шаблон нужно пересохранить, что бы подцепились новые элементы).

6. Далее нам необходимо применить стили, а именно подцепить стилевый таблицы нашего скрипта к нашей странице. Есть два варианта, либо дописать существующий файл шаблона style.css, либо подключить отдельный файл. Я выбираю второй вариант, поэтому – переименую файл скрипта из style.css в panel.css и скопирую его в папку со стилями в нашем шаблоне.


Теперь пропишем в файле

    crisp. info

подключение к странице нашего нового стиля:

    stylesheets[ all] = css/ panel. css


А так же скопирую все изображения из папки «images» нашего скрипта в папку «images» - нашего шаблона. Думаю с этим вы без труда справитесь. Не забудьте только переписать url с картинками в стилях.

7.Теперь нам необходимо подключить скрипты, это библиотека Jquery и выполняющий скрипт. Данный скрипт работает только с библиотекой 1.3.2 –поэтому я подключать буду её. (Хотя в Drupal JQuery библиотека идёт из коробки, но в любом случае в Drupal 7 присутствует новая версия библиотеки). Поэтому открываем файл «html.tpl» (структура этого шаблона не совсем обычная, контент страницы и head разнесены в разные файлы. Но в этом нет ничего страшного.) И вписываем туда подключение нашей старой библиотеки и выполняющего скрипта, а именно копируем это всё из файла index.html.


Замечу, что по правилам API Drupal все скрипты нужно выносить в отдельный файл и подключать через файл

    Название_темы. info

подробнее об этом можно почитать вот Теперь пересохраняем весь наш шаблон. Идём в пункт Cтруктура->Блоки. Создадим новый блок, внутри блока может быть всё что угодно, в моём случае это просто текст и поместим его в регион «drupalfly»

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


При клике по которому у нас открывается содержимое нашего нового блока.


На этом всё. Надеюсь это кому ни-будь пригодиться.

«Здравствуйте, я говорю вам – здравствуйте!» В прошлый раз я писал о том, как установить 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, у меня слетело меню: пропали и стили, и адаптивность. Причиной стало то, что потерялась необходимая HTML-структура для Bootstrap стилей. Решил я эту проблему следующим образом опять же через "template.php" :

    * Overrides theme_menu_tree().

    function MY_THEME_menu_tree__main_menu(& $variables ) {

    $output =

Что умеют Панели

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

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

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

Части расширения взаимосвязаны, поэтому активируйте их все. После этого в разделе «Структура» у вас должны появиться новые элементы.

Создаем mini

Перейдем в административной панели Drupal 7 в пункт «Panels». Здесь выбираем тип блока «Mini-panel» и создаем ее. Заполняем поля: заголовок, описание, категорию.

Теперь добавляем контекст. Затем задаем нужный нам шаблон.

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