Темизация views в Drupal 7
Как темизировать страницы, поля, блоки и многое другое мы разбирали в прошлых статьях. Теперь пришло время разобрать как мы можем воздействовать на представления.
Создание представления
Для начала работы над представлениями нам необходим его создать, что бы было что темезировать. Для этого переходим раздел структура, подраздел представления. И в открывшимся окне нажимаем на ссылку «Добавить новое представление».
Дальнейшею настройку мы рассматривали в прошлых статьях, отмечу только то, что для того, что бы мы могли дальше темизировать наше представление нам необходимо выбрать в формате отображения «Таблица», поскольку остальные форматы отдадут нам в tpl.php шаблоны сразу готовый html код, а нам для работы нужны более сырые данные.
Добавляем все необходимые поля по своему усмотрению, в своём случае я добавлю только изображение превью, тайтл и часть текста (body). Настройки полей подстраиваем под специфику своего проекта.
Выбор шаблона для темизации
Перед началом темизации views на drupal 7 необходимо сначала определиться с шаблоном, который нам понадобится.
Для этого переходим в расширенные настройки представления, опускаемся вниз в группу настроек под названием “Other” и кликаем по ссылке «Информация», рядом с «Тема оформления».
После нажатия на ссылку, перед нами откроется окно со всеми шаблонами относящиеся к этому представлению.
Сейчас нас интересуют шаблоны в разделе «Стиль вывода».
Шаблоны
Значимость шаблонов изменяется с лева на право, по мере увеличения. То есть если будет присутствовать в теме шаблон, который стоит правее от других, он перекроет все лево стоящие шаблоны
views-view-table.tpl.php — шаблон содержащит стандартный код и используется по умолчанию;
views-view-table—[машинное_имя_представления].tpl.php (views-view-table—temizaciya.tpl.php) — затронет все дисплеи внутри конкретного представления, у который стоит формат отображения «Таблица»;
views-view-table—[тип_представления].tpl.php (views-view-table—block.tpl.php)– затронет все представления созданные в виде блока и с форматом отображения «Таблица»;
views-view-table—[машинное_имя_представления] —[тип_представления].tpl.php (views-view-table—temizaciya—block.tpl.php) — затронет дисплеи созданные в виде блока внутри конкретного представления;
views-view-table—[машинное_имя_отображения].tpl.php (views-view-table—proba.tpl.php) — задействует отображение с машинным именем «proba»;
views-view-table—[машинное_имя_представления]—[машинное_имя_отображения].tpl.php (views-view-table—temizaciya—proba.tpl.php) — затронет отображение с машинным именем «proba» созданным в представлении «temizaciya»;
Следовательно, в зависимости от того, какой шаблон вы выбрали, можно воздействовать как на конкретное отображение внутри представления так и на все отображения одного типа.
Например, если вам необходимо темизировать все отображения внутри одного представления вам не понадобиться для каждого настраивать свой шаблон, будет достаточно выбрать шаблон типа views-view-table—[машинное_имя_представления].tpl.php.
Создание и подключение шаблона
Чтобы подключить шаблон нам стоит создать файл внутри нашей темы с расширением tpl.php, а имя файла выбираем из списка шаблонов в зависимости от необходимой для нашего случая меры воздействия. В своём случае я буду темизировать конкретное отображение, по этому я задействую шаблон «views-view-table—temizaciya—proba.tpl.php»
Теперь возвращаемся в представление и кликаем по ссылке «Стиль вывода»
Перед нами откроется окно со стандартным кодом шаблона.
Копируем его и вставляем в новосозданный файл.
После того, как мы создали шаблон и вставили в него стандартный код, нам стоит сообщить системе, о его существовании. Для этого мы возвращаемся в раздел с шаблонами, пролистываем вниз и нажимаем на кнопку «Пересканировать файлы шаблонов»
Теперь в списке будет подсвечено название шаблона, который мы создали. Это означает, что он подключен.
На этом настройки внутри представления окончены, по этому можно смело сохранять его и переходить к дальнейшей темизации views.
На данном этапе наше представление выглядит следующим образом:
Перед началом работы с темизацией представлений, убедитесь что на вашем проекте установлен Devel, а на страницу выводятся системные сообщения.
Внутри файла сейчас содержится стандартный код таблицы, от которого мы смело можем избавляться. В нашем случае нам понадобится цикл foreach, а внутри него впишем dpm($value). Dpm нам поможет узнать, что передаёт представление на страницу.
Создаём удобную для нас конструкцию, а поля выводим при помощи функции print, что в них вставлять узнаем из dpm.
Если для Вас сразу не понятен принцип работы с dpm советую ознакомиться со статьей посвященной темизации страницы материала, в ней уже подробно разбирался процесс работы с dpm.
В конечном итоге мой код принял вид:
Убираем dpm из вывода, ведь больше нам не нужны не какие поля и смотрим, как оно выглядит на экране.
Все элементы выводятся в нужном нам порядке. Дальнейшая темизация лежит не посредственно за цссом.
Пару строк кода и наше отображение приняло «человеческий» вид.
Подводя итоги
Представления — один из наиболее часто используемых модулей на сайтах написанных при помощи drupal, а возможность более гибко управлять постановкой полей внутри views позволяет подогнать их под любое дизайнерское решение.
Понимание, какой шаблон за что отвечает, поможет с помощью одного шаблона темезировать сразу несколько однотипных отображений и сэкономить Ваше время.
Большинство дополнительных модулей в качестве отображения своего функционала также используют представления, а знание как можно воздействовать на представление поможет более гибко подстраивать их под свой проект.
Темизация полей views в Drupal 7. Шаблон views-view-field.tpl.php
Как темизировать представление мы разобрали в прошлом уроке. Однако не стоит забывать, что представление состоит из полей и темизация каждого из них также играет существенную роль в создании проекта.
Подготовка материала
Перед началом работы нам необходимо создать «рабочую площадку», в нашем же случае это будет материал с полями, и представление на его основе.
Добавление полей
В типе материла, который у нас будет выводиться в представлении, добавляем необходимые нам поля. Это можно сделать прейдя по ссылке «Структура» на административной панели, затем выбрать подраздел «типы материала», выбрать необходимый нам тип, в моём случае это «Article», и выбрать вкладку «Управления полями».
Настраиваем материал с учётом специфики своего проекта.
Мой материал будет содержать следующие поля:
- Название — поле необходимое для вывода непосредственно названия материла. Тип поля — «Текст», виджет — «Текстовое поле»;
- Изображение — превью статьи или новости. Тип поля — «изображение», виджет — «изображение»;
- Body — содержимое страницы. Это поле стандартное его оставлю без изменений;
- Раздел — тип новости, которая будет публиковаться на сайте. Тип поля — ссылка на термин, виджет выбираем на своё усмотрение, мне подойдёт «выбор из списка»;
Также, если проект рабочий, не забываем добавить поля seo оптимизации.
Создадим пару материалов, и перейдём в создания представления.
Представление
Если вам не знаком процесс создания представления и добавления в него полей, вы можете ознакомится с ним прочитав соответствующую статью на нашем блоге. Здесь же я просто опишу своё представление.
Представление созданное на основе типа материала «Articles», выводится в виде «блока», формат отображения «Таблица» ( почему я выбрал таблицу вы можете узнать прочитав прошлую статью). Поля которые будут выводится это- «Путь» для генерации ссылки, «Изображение», «Название», «Раздел» , «Body».
Настройки отображения полей заполняем с учётом специфики своего проекта
Сейчас наше представление имеет следующий вид:
Темизация полей
Выведем название раздела в виде симпатичной иконки. Для этого нам понадобится темизировать поле «Раздел»
Но перед тем как начать темизацию нам необходимо определится, какие шаблоны существуют и какой нам подойдёт в этом случае.
Что бы узнать какие шаблоны существуют нам надо вернуться в окно представления. В нём развернуть окно «Расширенные настройки» и перейти по ссылке «Информация» в разделе «Тема оформления».
Перед нами откроется окно со списком всех шаблонов влияющих на представление. В нём мы находим наше поле и из перечисленного списка выбираем подходящий нам шаблон.
Принцип выбора шаблонов
Шаблоны темизации полей необходимо выбирать осторожно, ведь выбрав не правильный шаблон можно повлиять на все поля представления.
Шаблонов у этого поля достаточно много, по этому я разберу самые часто используемые шаблоны.
views-view-field—field-razdel.tpl.php — шаблон затронет все поля представлений имеющие машинное имя field-razdel. Очень удобный шаблон если у нас есть несколько представлений использующие одно и то же поле.
views-view-field—temizaciya—field-razdel.tpl.php — шаблон который будет воздействовать на поле с машинным именем field-razdel, на все отображения внутри представления с машинным именем temizaciya.
views-view-field—temizaciya—proba—field-razdel.tpl.php — самый точный шаблон, он затронет конкретное поле внутри конкретного отображения, а именно поле field-razdel в отображении proba, которое в свою очередь находится в temizaciya.
Зная машинные имена представления, отображения и поля можно легко выбрать необходимы шаблон, ведь принцип его построения базируются на уточнении элемента, с использованием машинного имени, следом за стандартным названием views-view-field—. tpl.php
Выбрав подходящий шаблон, создаём файл с его названием внутри темы.
После чего возвращаемся на страницу с шаблоном и нажимаем кнопку «пересканировать шаблоны».
Сохраняем наше представление и переходим на страницу где оно выведено.
Также откроем наш файл и пропишем внутри него
Чтобы узнать что содержит в себе поле.
Не забываем предварительно вывести сообщения на страницу и установить модуль Devel
Теперь при помощи dpm найдём айдишник термина и заменим его вывод на картинку.
По причине того, что у нас несколько вариантов статей воспользуемся конструкцией if.
В конечном итоге наш код приобретёт следующий вид:
if ($row->field_field_razdel[0]['rendered']['#options']['entity']->tid == '10') print '
'; > if ($row->field_field_razdel[0]['rendered']['#options']['entity']->tid == '11') print ''; > 
'
'Пару строк css и наше представление выглядит уже немного интересней.
Не забываем после завершения работы с представлением убрать из шаблона наш dpm.