Категория:
Опубликовано:

Темизация Views в зависимости от времени года

Времена года

В этом посте расскажу о том, как можно темизировать представления в зависимости от времени года.

Допустим, нужно сделать разное отображение элементов для Весны, Лета, Осени и Зимы...

Приступим.

Добавляем переменную с периодом

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

В этом нам поможет хук препроцесса template_preprocess_views_view.

Чтоб его использовать, открываем файл template.php темы, в которой будем настраивать отображение, и добавляем наш препроцессор:

/**
 * Implements template_preprocess_views_view().
 */
function ИМЯ_ТЕМЫ_preprocess_views_view(&$vars) {
	// Сюда будем писать код
}

Получить текущую дату нам поможет PHP-функция date().

Узнаем номер текущего месяца:

$mon = date('m');

И, теперь, проверяем период:

if($mon > 2 && $mon < 6){
  $vars['period'] = 'spring';
}
if($mon > 5 && $mon < 9){
  $vars['period'] = 'summer';
}
if($mon > 8 && $mon < 12){
  $vars['period'] = 'autumn';
}
if($mon = 12 || $mon < 3){
  $vars['period'] = 'winter';
}

Указывая значение $vars['period'] мы добавляем в массив переменных доступных в представлении, новую. Она будет доступна в шаблоне как $period.

Темизация представления

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

Для темизации, переходим в настройки нужного представления, в блоке с прочими настройками нажимаем "Тема оформления: Информация":

Прочие настройки

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

Выбор шаблона

Нажимаем на просмотр содержимого шаблона.

В папке "templates", темы оформления создаем файл с названием, которое мы скопировали перед открытием содержимого шаблона, в моем случае это "views-view--test-content--page.tpl.php". Открываем этот файл в текстовом редакторе, и копируем туда значение открывшееся в окне содержимого шаблона:

<?php

/**
 * @file
 * Main view template.
 *
 * Variables available:
 * - $classes_array: An array of classes determined in
 *   template_preprocess_views_view(). Default classes are:
 *     .view
 *     .view-[css_name]
 *     .view-id-[view_name]
 *     .view-display-id-[display_name]
 *     .view-dom-id-[dom_id]
 * - $classes: A string version of $classes_array for use in the class attribute
 * - $css_name: A css-safe version of the view name.
 * - $css_class: The user-specified classes names, if any
 * - $header: The view header
 * - $footer: The view footer
 * - $rows: The results of the view query, if any
 * - $empty: The empty text to display if the view is empty
 * - $pager: The pager next/prev links to display, if any
 * - $exposed: Exposed widget form/info to display
 * - $feed_icon: Feed icon to display, if any
 * - $more: A link to view more, if any
 *
 * @ingroup views_templates
 */
?>
<div class="<?php print $classes; ?>">
  <?php print render($title_prefix); ?>
  <?php if ($title): ?>
    <?php print $title; ?>
  <?php endif; ?>
  <?php print render($title_suffix); ?>
  <?php if ($header): ?>
    <div class="view-header">
      <?php print $header; ?>
    </div>
  <?php endif; ?>

  <?php if ($exposed): ?>
    <div class="view-filters">
      <?php print $exposed; ?>
    </div>
  <?php endif; ?>

  <?php if ($attachment_before): ?>
    <div class="attachment attachment-before">
      <?php print $attachment_before; ?>
    </div>
  <?php endif; ?>

  <?php if ($rows): ?>
    <div class="view-content">
      <?php print $rows; ?>
    </div>
  <?php elseif ($empty): ?>
    <div class="view-empty">
      <?php print $empty; ?>
    </div>
  <?php endif; ?>

  <?php if ($pager): ?>
    <?php print $pager; ?>
  <?php endif; ?>

  <?php if ($attachment_after): ?>
    <div class="attachment attachment-after">
      <?php print $attachment_after; ?>
    </div>
  <?php endif; ?>

  <?php if ($more): ?>
    <?php print $more; ?>
  <?php endif; ?>

  <?php if ($footer): ?>
    <div class="view-footer">
      <?php print $footer; ?>
    </div>
  <?php endif; ?>

  <?php if ($feed_icon): ?>
    <div class="feed-icon">
      <?php print $feed_icon; ?>
    </div>
  <?php endif; ?>

</div><?php /* class view */ ?>

В строку выводящую классы (в этом примере строка №30) добавим наш класс, изменив её на:

<div class="<?php print $classes; print ' current_period_'.$period; ?>">

Сохраняем, сбрасываем кеш и проверяем результат. Наше представление выводится с классом "current_period_НАЗВАНИЕ"

Настраиваем отображение

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

Это можно сделать с помощью CSS.

В стилях нашей темы прописываем что-нибудь вроде этого:

.current_period_spring {
  color: green;
}
.current_period_summer {
  color: red;
}
.current_period_autumn {
  color: orange;
}
.current_period_winter {
  color: grey;
}

Сохраняем, и наслаждаемся результатом.

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