Создание пользовательского макета

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

Первым делом перейдем в раздел Модули и включим модуль Pager Manager.

Модуль Page Manager не является отдельным проектом, а входит в пакет модулей Chaos tool suite (ctools).

Включение модуля Pager Manager

На этой же странице включим модули входящие в пакет Panels: Panels, Mini Panels и Panels In-Place Editor.

Включение модуля Panels

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

Ссылка на страницу управления панелями

Перейдем в раздел Панели по ссылке.

Раздел Панели

Рассмотрим составляющие этого раздела по секциям:

  • Создать... - ссылки на создание: страниц-панелей, пользовательских макетов и материалов-панелей (в данном случае неактивна потому что не включен модуль Panel node реализующий эту возможность).
  • Управление мини-панелями - список имеющихся на сайте мини-панелей
  • Мастера страниц - инструменты облегчающие процесс создадим страниц-панелей для неопытных пользователей.
  • Управление страницами - администрирование всех имеющихся на сайте страниц-панелей.
  • Управление пользовательскими макетами - список имеющихся на сайте пользовательских макетов.

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

Раздел Макеты

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

Переходим по ссылке Add flexible layout чтобы попасть на форму создадим нового макета.

Создание макета шаг 1

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

Создание макета шаг 2

Далее зададим машинное имя film_page и добавим описание макета.

Прежде чем переходить к редактированию рассмотрим структуру макета.

Каждый макет состоит из следующих элементов:

  • Канва (Canvas) - обертка макета в которой помещается все содержимое панели, будь то страница, блок или другая панель.
  • Колонка - структурный элемент входящий в состав канвы или ряда, служит для разбиения содержимого на колонки фиксированной или динамической ширины.
  • Ряд (Row) - структурный элемент который может содержать колонки или регионы.
  • Регион/Область (Region) - области в которые будет выводится содержимое, здесь можно провести аналогию с регионами в темах оформления. Области как и колонки могут иметь фиксированную или динамическую ширину.

Схема макета панели

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

Теперь перейдем непосредственно к редактированию макета. Макет будет состоять из двух рядов. В верхнем ряду будет два региона в которые мы разместим изображение и другие поля фильма. В нижнем ряду будет размещаться один регион в который мы поместим представление "В ролях".

Создание макета шаг 3

Первым делом добавим новый ряд, для этого нажимаем на ссылку Колонка и выбираем Add row to top.

Создание макета шаг 4

В открывшемся всплывающем окне нажимаем Сохранить.

Создание макета шаг 5

Далее добавим в верхний ряд два региона шириной по 50%. Нажимаем на ссылку Ряд и выбираем Добавить регион.

Создание макета шаг 6

Во всплывающем окне вводим название региона Left region и нажимаем Сохранить.

Названия регионов необходимо задавать только латинскими буквами потому что на основе него формируется машинное имя.

Создание макета шаг 7

Далее таким же образом добавляем еще один регион в верхний ряд.

Создание макета шаг 7a

Назовем его Right region.

Создание макета шаг 7b

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

Создание макета шаг 8

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

Создание макета шаг 9

Выглядит неплохо, нажимаем кнопку Сохранить.

Создание макета шаг 10

Теперь в списке макетов можно увидеть наш только что созданный макет Страница фильма.

Создание макета шаг 11

В следующем уроке мы используем этот макет для вывода страницы фильма.

Поделись с друзьями:

Комментарии

в начале статьи (2 абзац) не Pager Manager, а Page Manager