Создание блочного отображения

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

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

Создание блочного отображения

Далее сразу поменяем стандартное название отображения Блок на Топ 5.

Ссылка на редактирование названия

Задаем название Топ 5

Отображение Топ 5 унаследовало все свойства от главного отображения Master, в том числе и пустой заголовок. Для того чтобы установить его переходим к редактированию заголовка:

Ссылка на редактирование названия блока

Чтобы задать заголовок только для текущего отображения выберем в поле Для пункт Этот block (переопределить) и нажмем кнопку Применить (это отображение).

Изменяем название блока

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

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

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

Ссылка на редактирование формата отображения

В открывшемся всплывающем окне выберем Таблица. Также не забываем снова поменять настройка Для на Этот block (переопределить), так как формат отображения нам тоже нужно поменять только для этого блока. Нажимаем кнопку Применить (это отображение).

Установка формата отображения Таблица

Теперь если мы спустимся к секции предпросмотра и нажмем кнопку Обновить предпросмотр, то увидим как будет выглядеть блок. В нем присутствуют все поля, которые также были унаследованы от отображения Master.

Предпросмотр табличного отображения блока

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

Перейдем к настройкам поля Body.

Ссылка на редактирования поля Body

Ставим галочку напротив Исключить из вывода. В поле Для выбираем пункт Этот block (переопределить), потому что скрыть это поле нам нужно только для отображения Топ 5. Нажимаем кнопку Применить (это отображение).

Исключение поля Body из вывода

Далее таким же образом исключаем из вывода поля: Жанр, Страна и Год выпуска.

Переходим к редактированию поля Изображение.

Ссылка на редактирования поля Изображение

Здесь мы меняем стиль изображения на Thumbnail (100x100) и нажимаем кнопку Применить (это отображение). Надо обратить внимание, что поле Для уже выставлено в значение Этот block (переопределить), потому что, переопределив одно поле, вся секция Поля была отмечена как переопределенная.

Изменение стиля изображения для поля Изображение

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

Ссылка на редактирование поля Заголовок

Меняем HTML-код поля на H5. Нажимаем кнопку Применить (это отображение).

Изменение HTML элемента для поля Заголовок

Теперь в предпросмотре мы видим таблицу, в которой присутствуют только два поля: Заголовок и Изображение. Также у таблицы теперь нет шапки, потому что оба поля не имеют метки.

Предпросмотр блока Топ 5

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

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

Ссылка добавить критерий сортировки

В поле Для выбираем пункт Этот block (переопределить). Далее в списке критериев находим и отмечаем поле Содержимое: Оценка и нажимаем кнопку Применить (это отображение).

Добавление критерия сортировки по полю Оценка

В настройках критерия выбираем Сортировать по убыванию (то есть фильмы с наивысшей оценкой будут выводиться первыми, что нам и нужно). Нажимаем Применить (это отображение).

Настройка критерия сортировки по полю Оценка

Нажимаем на ссылку Изменить порядок в секции Критерий сортировки.

Ссылка Изменить порядок сортировки

Меняем порядок так, чтобы критерий Оценка шел первый в списке и нажимаем Применить (это отображение). Таким образом, мы изменили порядок сортировки. В первую очередь фильмы будут сортироваться по полю Оценка, а уже во вторую очередь фильмы с одинаковой оценкой будут сортироваться по дате публикации.

Настройка порядка сортировки

Теперь добавим поле Оценка с список полей, чтобы было видно, что в список действительно попали все фильмы с наивысшей оценкой.

Ссылка на добавление поля

Находим в списке поле Содержимое: Оценка и нажимаем Применить.

Добавление поля Оценка

В настройках убираем метку и выставляем Средство форматирования в значение Как звёзды. Далее снимем галочку Expose this Fivestar field for voting on the @type type и в поле Текст отображаемый под звездами выбираем Нет текста.

Настройки поля оценка

Теперь разворачиваем секцию Настройки отображения звезд и выбираем стиль Basic. Нажимаем кнопку Применить (это отображение).

Настройки отображения звезд для поля Оценка

Далее изменим порядок полей.

Ссылка на изменение порядка полей

Выставляем порядок как на картинке и нажимаем Применить (это отображение).

Установка порядка полей

Переходим к настройкам табличного формата отображения.

Ссылка на настройки формата отображения Таблица

Здесь меняем колонку для вывода поля Оценка на Содержимое: Заголовок, чтобы оценка фильма выводилась вместе с заголовком в одной колонке. Нажимаем Применить (это отображение).

Перемещение содержимого Оценка в колонку Заголовок

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

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

Ссылка на изменение постраничного навигатора

Выбираем Отображать указанное количество элементов, в поле Для выбираем Этот block (переопределить) и нажимаем Применить (это отображение).

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

Устанавливаем 5 элементов для отображения и нажимаем Применить (это отображение).

Установка количества элементов в значение 5

На этом отображение Топ 5 готово. Сохраняем представление.

Сохранение представления

Далее переходим в раздел Блоки.

Ссылка на раздел Блоки

Здесь у нас появился блок Представление: Фильмы: Топ 5 - это и есть тот блок, который содержит отображение Топ 5, установим его в регион First Sidebar (Первая боковая панель).

Перемещение блока Фильмы Топ 5 в первую боковую панель

Переходим на главную страницу и видим в боковой панели блок Топ 5, в котором присутствуют пять фильмов с наивысшим рейтингом.

Отображение блока Топ 5

Для того чтобы подправить вертикальное выравнивание подбавим в файл style.css следующий CSS-код:

.view-films.view-display-id-block_1 td { vertical-align: top; }

Теперь блок Топ 5 выглядит гораздо лучше.

Отображение блока Топ 5 с добавленными стилями

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

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

Комментарии

ОТЛИЧНЫЙ МАТЕРИАЛ!!!!!!!!!!

Заметка:
Если открыть фильм который в Топе, то его звездочки (которые в Топе) теряют цвет. Будто никто не голосовал.

только начал изучать drupal 7 и очень срочно нужно понять как работать с модулем Features. Если кто может киньте ссылку на хороший урок или расскажите подробнее, как у автора все поэтапно и понятно! Спасибо!

Благодарю за хороший материал. :)

Не получилось поменять HTML-код поля на H5. jQuery по разному делал версия 1.10 оставил.