Create a Joomla Category List with Images

Create a Joomla Category List with Images

Joomla offers a menu type "Category List" that allows you to display a category and subcategories in a list format.

Normally a "Category List layout" looks like the image below. That examplle is using Protostar as a template. This default design is not very attractive, is it?

We can do it better. For example, we can add an image next to the title of each subcategory. In this tutorial, I'm going to show you how to do that, using Joomla's template overrides (click here to see all our template override tutorials).

A default Joomla category list layout

Step #1. Create your categories and articles

  • Create your categories and subcategories. For each category you should select an image:
Selecting an image for each Joomla category
  • When you're finished, you will have a tree of categories:
A list of all categories in a Joomla site

Step #2. Change the Article options

  • Go to Content > Articles > and click on the button "Options".
  • On the tab "Category" change the options as you see below:
    • Subcategory Levels: All
    • No Articles Message: Hide
    • #Articles in Category: Show
Joomla's article configuration screen

Step #3. Create your menu item

  • Create a new menu item of type "Category List".
  • Select the category containing subcategories as the top level.
Setting up a Joomla menu link for categories
  • When you go to the frontend and click on the newly created menu item you will see this:
A Joomla menu link with subcategories showing

Step #4. Create an override

To change the appearance of this list you will need to create an override of this file: com_content/category/default_children.php

  • Go to Extensions > Templates. 
The Joomla template manager link
  • You will see a list of the installed templates. Click on "Templates" in the left-hand menu.
  • Click on the "Details and Files" of your template (in the example, I’m working with Protostar).
Details and Files link for your Joomla template
  • Now you can click on the tab "Create Overrides".
  • Under Components, select "com_content" and then "category".
Creating a Joomla template override

Joomla has now created all necessary files for the override inside the HTML folder of your template.

  • To edit the file you want to override, click on the tab "Editor", then select the folder html > com_content > category
Finding the files for a Joomla template override
  • Now you can select the file default_children.php. On the right side of the page, you'll see the text editor with the content of the file, the code you want to change.
  • To add the images of the subcategories on your view, you have to add a line of code between lines 44 and 45:
Customizing your Joomla template overrride

The code is very simple:

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

I decided to insert the code inside the link that encloses the title, so is the image also clickable.

  • Save the changes and reload your frontend. Now your list will look like this:
A complete Joomla template override with images

Step #5. Add some CSS classes to improve the view

Protostar is a Bootstrap 2-based template. We can use the CSS classes from Bootstrap to improve how the images are showed.

You can go back to the editor and add the class "img-polaroid" (the class "img-thumbnail" is the pendant in Bootstrap 3) to the image:

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

Adding CSS classes to our Joomla template override
  • Save the changes and reload the frontend again.
  • Now the images have a nice border thanks to Bootstrap and the class "img-polaroid" (or "img-thumbnail").
Our completed Joomla template override

Summary

With a simple override, a very nice and useful feature of Joomla, you can change the appearance of your pages. In many cases, you don’t need to install third party extensions to achieve what you want.

If you want to learn more about overrides, you can check the Joomla! Documentation and also visit the website of the Community Project j!-over (www.j-over.de/en). Here you will find some interesting overrides for your next project.