Как создать список категорий Joomla с картинками?

Для пользователей Joomla, “список категорий” - это знакомый тип меню, который позволяет пользователям отображать категории ии подкатегории в формате списка. Однако, страница выглядит  слишком просто и очень красиво, например, с шаблоном Protostar.

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

ШАГ 1: Создание категории, подкатегории и статей

Во-первых, перейдите в Материалы > Менеджер категорий > Создать категорию, чтобы, конечно же, создать новую категорию, а также несколько подкатегорий. На вкладке “параметры” каждой подкатегории, вы должны выбрать изображения для них.

ШАГ 2: Некоторые изменения в настройках материалов

На этом шаге вам нужно зайти в Система > Общие настройки > Материалы или же вы можете перейти в Материалы > Менеджер материалов > Настройки. В разделе"Категории", необходимо изменить некоторые параметры, как показано ниже:

- Уровни подкатегорий: Все

- Сообщение об отсутствии материалов: Скрыть

- Кол-во материалов в категории: Показать

После того как вы закончите, категория и ее ветви будут примерно такими:

ШАГ 3: Создайте новый пункт меню

Перейдите в Меню > Главное меню и создайте новый пункт меню с типом “Список всех категорий” (Материалы > Список всех категорий). Затем, выберите категорию с подкатегориями, которую вы только что создали.

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

ШАГ 4: Создайте переопределение

Чтобы создать новое переопределение, перейдите в Расширения > Менеджер шаблонов > Шаблоны. Затем откройте шаблон, который вы хотите добавить новое переопределение. В этой статье мы возьмем стандартный шаблон Joomla 3 “Protostar” в качестве примера.

Далее, в разделе “Создание переопределения”, в столбике “Компоненты” выберите “com_content” и выберите “category”.

После этого вы получите сообщение о том, что в папке HTML-кода шаблона Jooml-ой были созданы все необходимые файлы для замены .

Для редактирования файла, который вы хотите изменить, пожалуйста, перейдите на вкладку “Редактор”, затем выберите html > com_content > category. Выберите файл “default_children.php” и вы увидите данный файл в текстовом редакторе.

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

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

Сохраните изменения и обновите страницу сайта, и у вас появится список всех категорий, который отображается так:

Выглядит более привлекательным, чем до этого, не так ли?

ШАГ 5: Украсим еще больше!

Protostar представляет собой шаблон, который базируется на Bootstrap 2, так что мы можем использовать классы CSS от bootstrap для улучшения вывода изображений. Вы можете добавить класс "img-polaroid" в код:

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

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

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

Огромное спасибо за чтение :)