Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов

Вывод страницы с панелями при помощи Page Manager и удобное ее редактирование с In-Place Editor.

Раздел: 

Вывод страницы с модулем Page Manager и удобное редактирование с In-Place Editor

Как создавать макеты страницы с модулем Panels мы разобрали в одной из наших статей, теперь выведем его в необходимом нам месте и заполним области содержимым.

Для этого нам поможет модуль Page manager.

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

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

На этой странице нас интересует блок под названием «Manage pages».

В этом блоке находим интересующий нас шаблон, в нашем случае это «Node template» и включаем этот шаблон для отображения.

Включения шаблона

Как только мы нажали на кнопку включить нас автоматически переносит на новый раздел под названием «Страницы». В нём мы увидим таблицу в которой единственной включённой страницей, будет «Node template». Нажав на «Правка» в столбце действия перейдём к её редактированию

Редактирования шаблона

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

А для этого нам необходимо задать ей новый вариант отображения.

Добавление варианта отображения

Для того что бы добавить новый вариант необходимо на странице редактирования «шаблона материала» или другого шаблона для которого вы хотите добавить своё отображение, нажать на ссылку «Add a new variant»

Добавить вариант

Перед нами откроется форма создания нового варианта отображения.

Заполняем поля «Заголовок» и «Машинное имя» по своему вкусу, в выпадающем списке графы «Variant type» выбираем «Панели» и в «Optional features» ставим галочку рядом с «Правила выбора», для того что бы мы могли выбрать свои ограничения отображения.

Форма создания варианта

И нажимаем на кнопку «Create variant»

На следующей странице настройки выбираем своё правило выбора, в нашем случае мы будем ограничиваться типом материала, по этому выберем «Node: type» и нажимаем на кнопку добавить

Выбор типа

В выплывающем окне выбираем ограничение по типу материала, в нашем случае «Книга» и нажимаем сохранить.

Выбор тпа

Теперь на странице у нас появилась кнопка «Продолжить» на неё и нажмём

Продолжить

Затем выберем свой макет

Наш макет мы можем найти выбрав в списке пункт «Разное».

После чего на странице появятся персональные макеты, ставим галочку напротив своего и нажимаем «Продолжить»

Выбор макета

На следующей странице мы можем добавить, а также удалить если они уже есть уникальные классы с тэга «body», а также добавить свои css стили и айдишники.

Страница со стилями

Настраиваем её по своей необходимости, я её оставлю не тронутой и нажимаем «Продолжить»

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

Страница с макетом

Для того, чтобы добавить контент в область, необходимо нажать на шестерёнку рядом с ней и в списке выбрать «Добавить содержимое»

В левом столбце окна выбираем «Материал», после чего в правой части появятся все поля, которые содержит этот материал, нас интересует поле «Обложка» на неё мы и нажмём

Добавления полей

Настраиваем поле картинки по своему вкусу. Я же скрою метку, поставлю галочку на «Переопределить заголовок» и продолжу настройку поля.

Первая настройка поля картинок

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

Последняя настройка

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

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

На данном этапе настройки макета он должен выглядеть примерно так.

Начальный вид работы

Теперь в нижний регион добавим представление «Автор». Добавляем содержимое, но в окне выбираем не «Материал» а «Разное». Перед нами откроется окно с нашими представлениями, где мы выбираем необходимое нам.

Добавление представления

После того, как мы заполнили все регионы, можно спокойно нажимать «Creat variant»

Создание варианта

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

Сохранить

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

Вид страницы

Завершительным штрихом нашей настройки будет удаление блока «Автор» из сайтбара, ведь мы его уже вывели в нижней части экрана.

Для этого переходим в настройки блока.

И в настройках вывода ставим «-Не указанно-»

Убрать из темы

Интерфейс редактирования

Вы создали свой макет и наполнили его содержимым. Но спустя какое-то время решили поменять области, в которых вы выводили ту или иную информацию. Это можно сделать, зайдя в административную панель, найти свой вариант отображения и в нём всё менять, но разработчики модуля Panel, решили облегчить эту задачу и в пакет вшили удобный модуль In-Place Editor.

In-Place Editor — модуль, подключающий удобный интерфейс редактирования панелей, непосредственно на странице отображения.

Выбор интерфейса редактирования

Для начало необходимо выбрать модуль в качестве режима редактирования, для этого заходим на страницу где используется наш вариант отображения, и переходим по ссылке «Edit panels»

Редактирование панели

Переходи в подраздел «Информация» и меняем «Средство визуализации» с «Стандартная» на «In-Place Editor» и нажимаем на кнопку обновить в низу страницы.

Выбор редактора

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

Теперь, вернувшись на страницу материала, внизу появится новая панель с ссылками «Персонализировать эту страницу» и «Сменить макет». Макет мы менять не будем, поэтому нажмём на «Персонализировать эту страницу»

Ссылки редактора

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

Кнопки редактора

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

Для этого просто схватим за блок со стрелочками и движением мышки перенесём его куда нам необходимо.

Перетягивание блока с одного региона в другой

После того как внесём все изменения нажмём на кнопку сохранить в нижней административной панели.

Сохранить

Как мы видим, контент успешно поменял область местоположения.

Результат

Этот модуль позволяет оперативно управлять визуальной составляющей панелей, что в разы уменьшает время работы. А также из-за своей простоты открывает возможность управления регионами страницы, меняя содержимое страницы местами, что очень удобно для пользователей с минимальными знаниями в области PHP.