Альтернативный макет материала

В чем разница между переопределением шаблона вывода и альтернативным макетом?

В первом случае мы изменяем файл default.php, и теперь все материалы сайта будут отображаться по другому.

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

Для чего нужно создавать альтернативный макет?

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

Несколько причин для переопределения шаблона:

• Исправление ошибок релиза Joomla. В данном случае имеет смысл переопределить шаблон вывода, а не создавать альтернативный
• Замена определенного тега, например, иногда полезно заменить div на более семантические section или article. Здесь тоже достаточно переопределения.
• Альтернативный макет создается, когда для некоторых материалов необходимо изменить структуру существующей разметки, добавить новую, удалить ненужные элементы разметки. 

С чего начать?

Копируем файл default.php в свой шаблон и переименовываем:

templates/ template_name/ html/ com_content/ article/ new-name.php

Теперь в любом материале можно выбрать этот макет (который пока ничем не отличается от оригинала)

Планирование

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

Допустим, нам нужно, чтобы:
- изображение с подписью выводилось слева в отдельной колонке,
- под ним дата публикации и количество просмотров
- сбоку от левой колонки простой заголовок (не ссылка)
- под ним текст материала.

Пусть это будет эскиз приведенный ниже.

Материал Joomla! имеет большое количество настроек, и это плюс на этапе разработки. Но когда мы четко определили какие из этих настроек нам необходимы, и где те или иные элементы макета должны выводиться, необходимость в большинстве из них отпадает. 

Упрощаем структуру, убираем лишние настройки и код

В таблице материала Структура файлов, ищем код для вывода необходимых элементов, остальной - удаляем. В итоге получаем light-версию макета:

<?php // Заголовок материала ?>
<?php echo $this->escape($this->item->title); ?>
 
<?php // Обработка событий плагинами ?>
<?php if (!$params->get('show_intro')) { echo $this->item->event->afterDisplayTitle; } ?>
<?php echo $this->item->event->beforeDisplayContent; ?>
 
<?php // Изображение и подпись ?>
<img src="<?php echo htmlspecialchars($images->image_fulltext); ?>" 
        alt="<?php echo htmlspecialchars($images->image_fulltext_alt); ?>"/>
<?php if ($images->image_fulltext_caption):
 echo '<small class="caption">'.htmlspecialchars($images->image_fulltext_caption).'</small>';
endif; ?>
 
<?php // Дата публикации ?>
<?php echo JText::sprintf('COM_CONTENT_PUBLISHED_DATE_ON', .
                 JHtml::_('date', $this->item->publish_up, JText::_('DATE_FORMAT_LC3'))); ?>
 
<?php // Количество просмотров ?>
<?php echo JText::sprintf('COM_CONTENT_ARTICLE_HITS', $this->item->hits); ?>
 
<?php // Полный текст материала ?>
<?php echo $this->item->text; ?>
 
<?php // Обработка событий плагинами ?>
<?php echo $this->item->event->afterDisplayContent; ?>
 

Собираем каркас шаблона

Можно заранее сверстать html-макет и прописать необходимые css-стили для классов. Для упрощения верстки добавляем классы Bootstrap.

<article class="item-page row-fluid">
 
    <h1 class="page-header span8 pull-right">Заголовок</h1>
 
    <div class="pull-left item-image span4">
       <img src="" />
       <small class="caption">Подпись</small>
       <div class="article-info">Дата</div>
       <div class="hits">Просмотры</div>
    </div>
 
    <div class="cont-text span8">
         Полный текст материала
    </div>
 
</article>
 

В шаблоне были переопределены некоторые теги

• Контейнер материала article
• Заголовок h1
• Изменен вывод подписи для изображения

Были добавлены необходимые классы для стилевого оформления.

Вставляем код в макет

Для этого нужно просто добавить php-код из упрощенного шаблона, в соответствующие контейнеры html-макета.

Если вы хотите оставить возможность вывода некоторых элементов в зависимости от настроек, необходимо добавить соответствующие проверки параметров из основного шаблона default.php

Например не выводить теги, если у изображения отсутствует подпись

<?php if ($images->image_fulltext_caption):
    echo '<small class="caption">'.htmlspecialchars($images->image_fulltext_caption).'</small>';
 endif; ?>

Результат можно посмотреть здесь

Вы можете скачать рабочий код макета и доработать его на свое усмотрение: img-column.zip