Latest Blogs

News
Hello, Real Estate, a specially designed WordPress Theme for websites which sell Villas, Apartments, Houses and Raw Houses, has had a new version – version 2.2.6. In this new version, we have fixed some known issues as well as updated premium plugins...
319 Hits
Articles
Blogging has become a trendy occupation for young people in recent decades. It's considered as a good way to not only develop your own brand but also perform and enhance your writing skills by releasing helpful articles about various subjects that yo...
362 Hits
News
Hello, Hooray, there is another WordPress theme updated in this August. Nightclub is specially designed as an ideal solution for music clubs, night clubs and live music events. And in this month, the Nightclub version 1.2.3 has been released with som...
253 Hits
News
Hello,  In this month, besides Meetup WordPress Theme getting fixes and improvements, AutoShowroom theme has been updated too. The Autoshowroom Version 1.9.7 has now been available on Themeforest, so you can download and update your website...
364 Hits
News
Hello guys, We are so excited to inform you that the Meetup WordPress Theme version 1.7.6 has already been available on Themeforest. Let's take a look at new things in this version.  Changelogs:  Added PayPal Payment Gateway to the Register...
657 Hits

How to Create a Joomla Category List with Images?

For Joomla users, “Category List” is a familiar menu type which allows users to display categories and subcategories in a list format. However, the page looks quite plain, for example, with Protostar template.

If you are bored with the simple look of the layout, let’s check this article and bring a new nice look for your Category list page with images.

Step 1: Create a category, its subcategories and articles

Firstly, please go to Content > Categories > Add New Category to create a new category and some subcategories. In tab “Options” of each subcategory, you should select an image for it.

 

 

After you finish, you will have a category and its branches like this:

Step 2: Make some changes in Articles Options

In this step, you need to go to System > Global Configuration > Articles or you can go to Content > Articles > Options. In tab "Category", you need to change some options as below:

- Subcategory Levels: All

- No Articles Message: Hide

- #Articles in Category: Show

Step 3: Create a new menu item

Go to Menus > Main Menu and create a new menu item with type “Category List” (Articles > Category List). Then, select the category with the subcategories you have just created.

At this point, the menu item you have created will display like this in your frontend of site:

Step 4: Create an override

To create a new override, please go to Extensions > Templates > Templates. Then, open a template you want to add a new override. In this article, we take “Protostar” as an example.

Next, in tab “Create Overrides”, under “Components”, please select “com_content” and then “category”.

After that, you will receive a message that 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, please navigate to tab “Editor”, then select html > com_content > category. Select file “default_children.php” and you will see the text editor of the file.

You need to add the following code between lines 44 and 45 in order to make the images of the subcategories display in the view:

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

Save the change and refresh your frontend of site; you now have a category list page displaying like this:

More appealing, right?

Step 5: Beautify the view

Protostar is a Bootstrap 2-based template, so we can use the CSS classes from Bootstrap to improve how the images are showed. You can add the class "img-polaroid" (the class "img-thumbnail" is the pendant in Bootstrap 3) to the code:

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

Save this change and reload your frontend of site. This time, you can see the view and images look more attractive.

 

Hope that you can apply this tutorial successfully on your site and have a nice category list page.

Thank you so much for reading :)

7 Best Tips to Boost Your Ecommerce Conversion
All-in-One Membership Available in TemPlaza Site N...

By accepting you will be accessing a service provided by a third-party external to https://www.templaza.com/