Notice: Undefined offset: 0 in /home/templaza/public_html/plugins/system/tz_guard/tz_guard/browser_detection.php on line 361
Deprecated: strpos(): Non-string needles will be interpreted as strings in the future. Use an explicit chr() call to preserve the current behavior in /home/templaza/public_html/plugins/system/tz_guard/tz_guard/browser_detection.php on line 618 How to Create a Joomla Category List with Images? - TemPlaza | Blog
TemPlaza, the website built and improved by TemPlaza., JSC. We supply templates and other qualified applications on Joomla and WordPress.
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:
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:
As you know, Css Hover Effect plays as an important role in developing a website.In this post, I would like to give you some best free css hover effects which can help your site become more attractive...
The importance of fonts for a WordPress website is undeniable because different fonts have different levels of readability, reader friendliness, and different personality and style affecting greatly t...
A gallery to display your photos will decorate your webpage and can surely make it look more professional and lively. There are numerous Joomla! photo gallery extensions out there, and choosing a righ...
If you're looking for freebies Joomla templates with outstanding quality in order to build your own website, you have already reached the right place. On one hand, there are a vast resources of premiu...