Как создать список категорий в Joomla с изображениями

Полезное для Joomla


Joomla предлагает тип меню «Список категорий», который позволяет отображать категорию и подкатегории в формате списка. Обычно «макет списка категорий» выглядит так, как показано на рисунке ниже. В этом примере в качестве шаблона используется Protostar. Этот дизайн по умолчанию не очень привлекателен, не так ли?

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

Шаг 1. Создавайте свои категории и статьи
Создайте свои категории и подкатегории. Для каждой категории следует выбрать изображение:

Когда вы закончите, у вас будет дерево категорий:

Шаг 2. Изменить параметры статьи
Зайдите в Материалы> Менеджер материалов> и нажмите кнопку «Настройки».
На вкладке «Категория» измените параметры, как показано ниже:

  • Subcategory Levels: All
  • No Articles Message: Hide
  • #Articles in Category: Show

Шаг 3. Создайте свой пункт меню
Создайте новый пункт меню типа «Список всех категорий».
Выберите категорию, содержащую подкатегории, в качестве верхнего уровня.

Когда вы перейдете во внешний интерфейс и нажмете на только что созданный пункт меню, вы увидите следующее:

Шаг 4. Создать переопределение
Чтобы изменить внешний вид этого списка, вам нужно будет создать переопределение следующего файла: com_content/category/default_children.php

Перейдите в Расширения> Шаблоны.

Вы увидите список установленных шаблонов. Щелкните «Шаблоны» в левом меню.
Нажмите на «Параметры «название шаблона»» вашего шаблона (в этом примере я работаю с Protostar).

Теперь вы можете перейти на вкладку «Создать переопределение».
В разделе «Компоненты» выберите «com_content», а затем «категорию».

Joomla создала все необходимые файлы для переопределения в папке HTML вашего шаблона.

Чтобы отредактировать файл, который нужно переопределить, щелкните вкладку «Редактор», затем выберите папку html> com_content> category

Теперь вы можете выбрать файл default_children.php. В правой части страницы вы увидите текстовый редактор с содержимым файла, кодом, который вы хотите изменить.
Чтобы добавить изображения подкатегорий в ваше представление, вы должны добавить строку кода между строками 44 и 45:

Код очень простой:

<?php echo '<img src="'.json_decode($child->params)->image . '" />'; ?>

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

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

Шаг 5. Добавьте несколько классов CSS, чтобы улучшить представление
Protostar — это шаблон на основе Bootstrap 2. Мы можем использовать классы CSS из Bootstrap, чтобы улучшить отображение изображений.

Вы можете вернуться в редактор и добавить к изображению класс «img-polaroid» (класс «img-thumbnail» — это pendant в Bootstrap 3):

<?php echo '<img class="img-polaroid img-thumbnail" src="'.json_decode($child->params)->image . '" />'; ?>


Сохраните изменения и снова загрузите интерфейс.
Теперь изображения имеют красивую рамку благодаря Bootstrap и классу img-polaroid (или img-thumbnail).

Резюме
С помощью простого переопределения, очень приятной и полезной функции в Joomla, вы можете изменить внешний вид своих страниц. Во многих случаях вам не нужно устанавливать сторонние расширения для достижения желаемого.