Контакты

Поиск по сайту

Категория: Joomla Опубликовано: 25 Февраль 2017

Шаблон вывода списка статей категории в Joomla по умолчанию не предполагает вывода изображений в таблице. На Joomla 1.5 это сделать, действительно, проблематично. Но, начиная с версии 2.5, это можно сделать достаточно просто, не прибегая при этом к получению изображения из текста каждой статьи списка регулярными выражениями. В версиях Joomla 2.5+ есть замечательная вещь — возможность указания изображений для вступительного и полного текстов статьи. Для веб-мастеров это реальный шанс отказаться от множества сторонних, не всегда стабильно работающих и совместимых между собой, расширений. Теперь ротаторы новостей, списки с изображениями и прочее — все это могут обычные альтернативные шаблоны штатных расширений движка.

В этой статье приведу самый простой пример использования этих параметров статьи на примере изображений для вступительного текста материала (image_intro) для создания альтернативного шаблона «списка материалов категории» (com_content — category) с изображениями.

Прежде, чем начать работать над альтернативным шаблоном, нам нужны сами статьи с указанными в них в качестве параметров изображениями (редактор статьи в админке –> вкладка настроек «Изображения и ссылки» –> параметр «Изображение для вступительного текста материала»). Изображения могут быть любыми и любых размеров, но лучше использовать небольшие оптимизированные изображения, особенно, если не хотим, чтобы наша страница со списком статей весила несколько мегабайт. Для одной или двух статей изображения можно пропустить. Далее, объединяем статьи в категорию. Теперь для тестирования нашего альтернативного шаблона все готово.

Теперь приступаем к созданию самого шаблона.

Нам понадобятся копии файлов движка:

  1. /www/components/com_content/views/category/tmpl/default.xml
  2. /www/components/com_content/views/category/tmpl/default.php
  3. /www/components/com_content/views/category/tmpl/default_articles.php

Эти копии нужно переименовать так, чтобы в новых именах не было символов нижнего подчеркивания (за исключением «…_aticles»), и поместить в папку действующего по умолчанию шаблона сайта:

  1. /www/templates/текущий_шаблон/html/com_content/category/имя-файла.xml
  2. /www/templates/текущий_шаблон/html/com_content/category/имя-файла.php
  3. /www/templates/текущий_шаблон/html/com_content/category/имя-файла_articles.php

Свои я назвала imagelist.xml, imagelist.php и imagelist_articles.php.

Открываем эти файлы для правки в любом, доступном редакторе, и делаем в их коде изменения.

Для imalist.xml:

меняем эти строчки

    <layout title="COM_CONTENT_CATEGORY_VIEW_DEFAULT_TITLE" option="COM_CONTENT_CATEGORY_VIEW_DEFAULT_OPTION">
        <help
            key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_LIST"
        />
        <message>
            <![CDATA[COM_CONTENT_CATEGORY_VIEW_DEFAULT_DESC]]>
        </message>
    </layout>

на такие

    <layout title="Список материалов категории с изображениями" option="IMAGELIST">
        <help
            key = "IMAGELIST"
        />
        <message>
            <![CDATA[Отображает список материалов категории с изображениями]]>
        </message>
    </layout>

Если же в шаблоне активно используются языковые константы (например, если содержимое сайта представляется на нескольких языках), то вместо предыдущего варианта используем такой:

    <layout title="COM_CONTENT_CATEGORY_VIEW_IMAGELIST_TITLE" option="COM_CONTENT_CATEGORY_VIEW_IMAGELIST_OPTION">
        <help
            key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_IMAGELIST"
        />
        <message>
            <![CDATA[COM_CONTENT_CATEGORY_VIEW_IMAGELIST_DESC]]>
        </message>
    </layout>

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

В файле imagelist.php оставляем все, как есть.

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

Создаем иконку для отсутствующих изображений в формате gif, jpg, jpeg или png и помещаем ее в корень папки /www/templates/текущий_шаблон/html/com_content/category/.

Последнее, что нужно для подготовки — это создание нового пункта меню. Выбираем меню –> «Создать» –> тип пункта меню «Выбрать» –> в разделе списка «Материалы» выбираем «Список материалов категории с изображениями» (если с расположением и именами файлов ничего не напутали, то этот тип обязательно должен появиться в списке). Во вкладке «Обязательные параметры» выбираем нашу тестовую категорию. Все остальные настройки можно оставить как есть, по умолчанию. Переходим на получившуюся страницу сайта.

Теперь можно разбираться с файлом imagelist_articles.php и сразу смотреть изменения. Они, в общем случае, сводятся к следующему:

  1. Добавляем в таблицу необходимые теги <th> и <td> в те места, где хотим видеть изображения. Чаще всего, это первый столбец слева.
  2. Создаем переменную/функцию для изображений, значением/результатом выполнения которой будет либо полученный соответствующий параметр каждой статьи, либо иконка для отсутствующих изображений, если параметр пуст.
  3. Выводим значение переменной/вызываем функцию внутри созданного тега <td> (см. п. 1).
  4. Приводим альтернативный шаблон в соответствие текущему шаблону сайта: добавляем классы к тегам, дописываем стили и т. д. — одним словом, наводим красоту. Для этого лучше предварительно в настройках пункта меню отобразить все, что только можно.

У меня на тестовом сайте вариант кода альтернативного шаблона списка материалов категории получился таким (файл imagelist_articles.php):

<?php
/**
 * @package        Joomla.Site
 * @subpackage    com_content
 * @copyright    Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license        GNU General Public License version 2 or later; see LICENSE.txt
 */

// no direct access
defined('_JEXEC') or die;
                                          // в) определяем переменную для отсутствующих изображений $noimage
$app =&JFactory::getApplication();
$template = $app->getTemplate();
$noimage =     JUri::base().'/templates/'.$template.'/html/com_content/category/noimage.jpg';

JHtml::addIncludePath(JPATH_COMPONENT.'/helpers/html');
JHtml::_('behavior.tooltip');
JHtml::_('behavior.framework');

// Create some shortcuts.
$params        = &$this->item->params;
$n            = count($this->items);
$listOrder    = $this->escape($this->state->get('list.ordering'));
$listDirn    = $this->escape($this->state->get('list.direction'));

?>

<?php if (empty($this->items)) : ?>

    <?php if ($this->params->get('show_no_articles', 1)) : ?>
    <p><?php echo JText::_('COM_CONTENT_NO_ARTICLES'); ?></p>
    <?php endif; ?>

<?php else : ?>

<form action="<?php echo htmlspecialchars(JFactory::getURI()->toString()); ?>" method="post" name="adminForm" id="adminForm">
    <?php if ($this->params->get('show_headings') || $this->params->get('filter_field') != 'hide' || $this->params->get('show_pagination_limit')) :?>
    <fieldset class="filters">
        <?php if ($this->params->get('filter_field') != 'hide') :?>
        <legend class="hidelabeltxt">
            <?php echo JText::_('JGLOBAL_FILTER_LABEL'); ?>
        </legend>

        <div class="filter-search">
            <label class="filter-search-lbl" for="filter-search"><?php echo JText::_('COM_CONTENT_'.$this->params->get('filter_field').'_FILTER_LABEL').'&#160;'; ?></label>
            <input type="text" name="filter-search" id="filter-search" value="<?php echo $this->escape($this->state->get('list.filter')); ?>" class="inputbox" onchange="document.adminForm.submit();" title="<?php echo JText::_('COM_CONTENT_FILTER_SEARCH_DESC'); ?>" />
        </div>
        <?php endif; ?>

        <?php if ($this->params->get('show_pagination_limit')) : ?>
        <div class="display-limit">
            <?php echo JText::_('JGLOBAL_DISPLAY_NUM'); ?>&#160;
            <?php echo $this->pagination->getLimitBox(); ?>
        </div>
        <?php endif; ?>

    <!-- @TODO add hidden inputs -->
        <input type="hidden" name="filter_order" value="" />
        <input type="hidden" name="filter_order_Dir" value="" />
        <input type="hidden" name="limitstart" value="" />
    </fieldset>
    <?php endif; ?>

    <table class="category">
        <?php if ($this->params->get('show_headings')) :?>
        <thead>
            <tr>
                <th class="list-image">   <?php //а) Добавили в строку заголовков новую ячейку ?>
                                 
                </th>
                <th class="list-title" id="tableOrdering">
                    <?php  echo JHtml::_('grid.sort', 'JGLOBAL_TITLE', 'a.title', $listDirn, $listOrder) ; ?>
                </th>

                <?php if ($date = $this->params->get('list_show_date')) : ?>
                <th class="list-date" id="tableOrdering2">
                    <?php if ($date == "created") : ?>
                        <?php echo JHtml::_('grid.sort', 'COM_CONTENT_'.$date.'_DATE', 'a.created', $listDirn, $listOrder); ?>
                    <?php elseif ($date == "modified") : ?>
                        <?php echo JHtml::_('grid.sort', 'COM_CONTENT_'.$date.'_DATE', 'a.modified', $listDirn, $listOrder); ?>
                    <?php elseif ($date == "published") : ?>
                        <?php echo JHtml::_('grid.sort', 'COM_CONTENT_'.$date.'_DATE', 'a.publish_up', $listDirn, $listOrder); ?>
                    <?php endif; ?>
                </th>
                <?php endif; ?>

                <?php if ($this->params->get('list_show_author', 1)) : ?>
                <th class="list-author" id="tableOrdering3">
                    <?php echo JHtml::_('grid.sort', 'JAUTHOR', 'author', $listDirn, $listOrder); ?>
                </th>
                <?php endif; ?>

                <?php if ($this->params->get('list_show_hits', 1)) : ?>
                <th class="list-hits" id="tableOrdering4">
                    <?php echo JHtml::_('grid.sort', 'JGLOBAL_HITS', 'a.hits', $listDirn, $listOrder); ?>
                </th>
                <?php endif; ?>
            </tr>
        </thead>
        <?php endif; ?>

        <tbody>

        <?php foreach ($this->items as $i => $article) : ?>
            <?php if ($this->items[$i]->state == 0) : ?>
                <tr class="system-unpublished cat-list-row<?php echo $i % 2; ?>">
            <?php else: ?>
                <tr class="cat-list-row<?php echo $i % 2; ?>" >
            <?php endif; ?>
                <?php if (in_array($article->access, $this->user->getAuthorisedViewLevels())) : ?>
                    <td class="list-img"> <?php // б) Добавили ячейку для самого изображения  
                   
                          //  В foreach перебираются объекты $article, содержащие данные в формате json.
                          //  Нас интересуют только изображения ($this->items[$i]->images) С помощью json_decode
                          //  получаем их в виде ассоциативного массива.
                         
                          //  г) Определяем переменные: вспомогательную $val (содержит ассоциативный массив всех изображений )
                          //     и основную $image, которая содержит либо элемент массива $val['image_intro'] (строка адреса изображения),
                          //     если поле не пустое, либо иконку для отсутствующих изображений, если в поле параметра ничего нет.
                         
                          $val = (!empty($this->items[$i]->images) ) ?  json_decode($this->items[$i]->images,true) : null;
                          $image = (!$val == null and !empty($val['image_intro']))? $val['image_intro'] :  $noimage;
                         
                          //  д) Выводим получившееся изображение с помощью класса JHTML
                          echo JHTML::_('image', $image, null, null);
                          ?>  
                    </td>
                    <td class="list-title">
                        <a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($article->slug, $article->catid, $article->language)); ?>">
                            <?php echo $this->escape($article->title); ?></a>

                        <?php if ($article->params->get('access-edit')) : ?>
                        <ul class="actions">
                            <li class="edit-icon">
                                <?php echo JHtml::_('icon.edit', $article, $params); ?>
                            </li>
                        </ul>
                        <?php endif; ?>
                    </td>

                    <?php if ($this->params->get('list_show_date')) : ?>
                    <td class="list-date">
                        <?php echo JHtml::_('date', $article->displayDate, $this->escape(
                        $this->params->get('date_format', JText::_('DATE_FORMAT_LC3')))); ?>
                    </td>
                    <?php endif; ?>

                    <?php if ($this->params->get('list_show_author', 1)) : ?>
                    <td class="list-author">
                        <?php if(!empty($article->author) || !empty($article->created_by_alias)) : ?>
                            <?php $author =  $article->author ?>
                            <?php $author = ($article->created_by_alias ? $article->created_by_alias : $author);?>

                            <?php if (!empty($article->contactid ) &&  $this->params->get('link_author') == true):?>
                                <?php echo JHtml::_(
                                        'link',
                                        JRoute::_('index.php?option=com_contact&view=contact&id='.$article->contactid),
                                        $author
                                ); ?>

                            <?php else :?>
                                <?php echo JText::sprintf('COM_CONTENT_WRITTEN_BY', $author); ?>
                            <?php endif; ?>
                        <?php endif; ?>
                    </td>
                    <?php endif; ?>

                    <?php if ($this->params->get('list_show_hits', 1)) : ?>
                    <td class="list-hits">
                        <?php echo $article->hits; ?>
                    </td>
                    <?php endif; ?>

                <?php else : // Show unauth links. ?>
                    <td>
                        <?php
                            echo $this->escape($article->title).' : ';
                            $menu        = JFactory::getApplication()->getMenu();
                            $active        = $menu->getActive();
                            $itemId        = $active->id;
                            $link = JRoute::_('index.php?option=com_users&view=login&Itemid='.$itemId);
                            $returnURL = JRoute::_(ContentHelperRoute::getArticleRoute($article->slug, $article->catid, $article->language));
                            $fullURL = new JURI($link);
                            $fullURL->setVar('return', base64_encode(urlencode($returnURL)));
                        ?>
                        <a href="<?php echo $fullURL; ?>" class="register">
                            <?php echo JText::_( 'COM_CONTENT_REGISTER_TO_READ_MORE' ); ?></a>
                    </td>
                <?php endif; ?>
                </tr>
        <?php endforeach; ?>
        </tbody>
    </table>
<?php endif; ?>

<?php // Code to add a link to submit an article. ?>
<?php if ($this->category->getParams()->get('access-create')) : ?>
    <?php echo JHtml::_('icon.create', $this->category, $this->category->params); ?>
<?php  endif; ?>

<?php // Add pagination links ?>
<?php if (!empty($this->items)) : ?>
    <?php if (($this->params->def('show_pagination', 2) == 1  || ($this->params->get('show_pagination') == 2)) && ($this->pagination->get('pages.total') > 1)) : ?>
    <div class="pagination">

        <?php if ($this->params->def('show_pagination_results', 1)) : ?>
             <p class="counter">
                <?php echo $this->pagination->getPagesCounter(); ?>
            </p>
        <?php endif; ?>

        <?php echo $this->pagination->getPagesLinks(); ?>
    </div>
    <?php endif; ?>
</form>
<?php  endif; ?>

И немного стилей для основных элементов таблицы добавляем в файл css нашего шаблона:

td.list-img img {
    display:inline-block;
    position:relative;
    overflow:hidden;
    width:6em;
    height:auto;
}
th.list-image, td.list-img, th.list-date, td.list-date,
th.list-author, td.list-author,  th.list-hits, td.list-hits  {
    text-align:center !important;
}
table.category th {
    background:#7ba428 !important;
}
table.category tr.cat-list-row0 {
    
    background:#fff !important;
}
table.category tr.cat-list-row1 {
    background:#f4f9ea !important;
}
table.category tr.cat-list-row0:hover,  table.category tr.cat-list-row1:hover{
    background:#e2ebcf !important;
}

В результате вполне может получиться что-то вроде этого:

Альтернативный шаблон «Список материалов категории» с изображениями

Добавить сообщение

Форма входа

Индекс цитирования Яндекс.Метрика