Создание, продвижение сайтов
40-33-54

Темизация анонсов материалов в Drupal 7. Шаблон node--[тип материала]--teaser.tpl.php

06 февраля 2017

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

Drupal анонс материала

Где используются тизеры (анонсы)?

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

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

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

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

Drupal термин таксономии без оформления

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

Итак, начнем с подключения необходимого нам шаблона.

Как подключить шаблон node--[тип материала]--teaser.tpl.php?

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

Чтобы у нас все работало сначала необходимо зайти в файл template.php нашей темы и в нем добавить следующий код для подключения типа материала:

 

//подключаем шаблоны для тизеров
function [название темы]_preprocess_node(&$vars) {
  $node_type_suggestion_key = array_search('node__' . $vars['type'], $vars['theme_hook_suggestions']);
  if ($node_type_suggestion_key !== FALSE) {
    $node_view_mode_suggestion = 'node__' . $vars['type'] . '__' . $vars['view_mode'];
    array_splice($vars['theme_hook_suggestions'], $node_type_suggestion_key + 1, 0, array($node_view_mode_suggestion));
  }
}

 

В моем случае получилось:

Drupal подключение анонса материала

Все теперь, чтобы темизировать анонс типа материала нам осталось добавить в папку темы файлик с названием node--[тип материала]--teaser.tpl.php.

В моем случае, для типа материала book я буду использовать название node--book--teaser.tpl.php.

Системное имя материала в Drupal

Осталось очистить кеш сайта и можем приступать к работе.

Работа с шаблоном node--book--teaser.tpl.php

Как уже могли догадаться те, кто проходит главу курса посвященную темизации с начала, работу с шаблоном мы начнем с dpm($content).

Для тех, кто не понял, что я сейчас сказал поясню – скачиваем и устанавливаем себе модуль Devel, проверяем, что у Вас на страницу выводятся системные сообщения Drupal, после приступаем к работе.

Итак, сам шаблон в начале работы у меня выглядит следующим образом:

Drupal шаблон тизера материала

На странице термина таксономии, на которой выводятся книги жанра фентези я вижу следующую картину:

Drupal термин таксономии

На странице настройки анонса все настроено следующим образом:

Настройка отображения анонса

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

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

Для этого сначала на странице управления отображением анонса добавим в вывод нужные поля:

Поля анонса

Далее идем на страницу термина, обновляем ее и открываем любой из dpm, отображающихся у нас на странице:

dpm анонса drupal

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

Начну я с создания необходимых мне оберток в самом шаблоне:

Создаем обертки для полей

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

Для этого открываем dpm, берем необходимую для работы инофрмацию, кликнув два раза на интересном для нас элементе:

дпм

И скрываем его из вывода строкой:

 

hide($content['links']);

 

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

 

print render($content['field_pic']);
print render($content['field_fivestar']);

 

Те поля, которые были выведены на страницу таким образом до строки

 

print render($content);

 

Не выведутся второй раз, когда мы будем выводит все остальные поля общим скопом используя переменную $content.

Сейчас шаблон выглядит так:

Шаблон тизера

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

Получить его мы можем обратившись к ['#object'] любого поля, я буду использовать для этого body.

Итак, копируем:

Dpm drupal

Вставляем в наш dpm, чтобы получилось:

 

dpm($content['body']['#object']);

 

И получаем на странице dpm со всем необходимым для работы:

Информация о материале, к которому относится анонс

Для формирования ссылки я воспользуюсь стандартной функцией Druapal l().

Ее синтаксис:

 

l('текст ссылки','путь ссылки')

 

В итоге вывод заглавия книги с шаблоне будет выглядеть как:

 

print '<h3>' . l($content['body']['#object']->title, 'node/' . $content['body']['#object']->nid) . '</h3>';

 

Все, теперь можем убрать свой dpm. Код node--book--teaser.tpl.php, который у меня получился в итоге выглядит следующим образом:

 

<article class="teaserItem">
    <div class="left">
        <?php
        print render($content['field_pic']);
        print render($content['field_fivestar']);
        ?>
    </div>
    <div class="right">
        <?php
        hide($content['links']);
        print '<h3>' . l($content['body']['#object']->title, 'node/' . $content['body']['#object']->nid) . '</h3>';
        print render($content);
        ?>
    </div>
</article>

 

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

 

Статьи

Сделайте заказ с сайта и получите 10% скидку на услугу

Заказ услуги с сайта raybin.ru

Нажимая на кнопку "Получить консультацию", я даю согласие на обработку персональных данных и соглашаюсь c условиями политики конфиденциальности
CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
Заказать бесплатную SEO-консультацию

Запрос бесплатной SEO - консультации с сайта raybin.ru

Нажимая на кнопку "Получить консультацию", я даю согласие на обработку персональных данных и соглашаюсь c условиями политики конфиденциальности
CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.
Письмо в компанию Райбин

Письмо в компанию RAYBIN

Нажимая на кнопку "Получить консультацию", я даю согласие на обработку персональных данных и соглашаюсь c условиями политики конфиденциальности
CAPTCHA
Этот вопрос задается для того, чтобы выяснить, являетесь ли Вы человеком или представляете из себя автоматическую спам-рассылку.