понедельник, 12 октября, 2015 - 18:37

Установка

drush en -y ds && drush en -y ds_ui ds_extras

Display Suite дополняет возможности отображения материалов и их полей.

Пара слов

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

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

Собственно это главная задача Display Suite.

Настройка

Оформлять будем на примере статей.

Включаем модули ds, ds_ui, ds_extras.

Заходим на страницу настроек ds_extras ( admin/structure/ds/list/extras ).

И ставим галочку на "Enable Field Templates" в закладке "Field Templates".

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

Оформление статьи

Начнём со отображения teaser ( admin/structure/types/manage/article/display/teaser ).

Выбираем макет "Сбросить" (reset) и нажимаем сохранить.

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

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

Расставляем классы

Для этого нажимаем рядом с полями на шестерёнку.

Выбираем шаблон поля "Эксперт", мне кажется он самый гибкий.

Тут много полей так что я растолкую.

  • Префикс - текст перед полем поддерживает html
  • Суффикс - текст после поля поддерживает html
  • Метка и поля справо от неё настраивают элемент метка.
  • Label wrapper - дополнительная обёртка для метки (элемент по умолчанию div, можно не указывать)
  • Outer wrapper - обёртка поля в месте с меткой.
  • Field items - обёртка всего контента поля, без метки.
  • Элемент поля (field item) - обёртки значений поля, отличается от "Field items" тем что оборачивает каждое значение по отдельности.

Обычно я использую, только 2 из Outer wrapper и Элемент поля.

Причём если у поля нет метки Outer wrapper не использую.

Поле Картинка

Не забываем нажать кнопку "Обновить" и когда все поля будут настроенны кнопку "Сохранить".

Поле Заголовок

Является самодостаточным так, что просто указываем шаблон "Эксперт" и ничего не заполняем.
Заполняем только родные поля Link: Yes, Class: title.

Поле Дата публикации

Поле Контент (Body)

Поле Tags

Если хотите чтобы отображался только первый тег.
Справа от Формата ставим цыфру 1.

Результат

Нам не нужно делать по шаблону на каждое отображение материала в теме сайта.

Посмотреть в инспектор dom стал намного чище чем был.

Вам остаётся только стилизовать - это дело в css.

Добавить комментарий

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.