Show Joomla Article Intro Image on Category listing page – for Joomla 3.x


Sometimes, based on our client requirement, we the joomla developers want to show an article Intro image (The same as post featured image in wordpress) on the site Category listing page. But in joomla 3.X, by default it doesn’t come. After a long time search on google, I am handy with a solution which has solved perfectly my requirement.

I fixed this issue with a template override. Generally, you can find its existence in the Default Joomla Beez template. There is no code in the core Joomla output to show intro images in a blog items listing page.

First of all, to do a template override, we need to copy the blog_item.php file from components/com_content/views/category/tmpl directory of your Joomla installation and place that inside templates/YOUR TEMPLATE/html/com_content/category/. (Make sure to create a directory inside templates/YOUR TEMPLATE/html with the name of com_contentand inside that another directory category and place the blog_item.php file inside that).

If you don’t know how to do a template override, search on google and you will find lots on that, it’s very simple. Don’t do this in the core file, as it will be overwitten when you update your Joomla installation.

Now in blog_item.php, you need to ad a line right below line 13.

$params = $this->item->params;

To this

$params = $this->item->params;
$images = json_decode($this->item->images); // new line

Around on line 41/42, search for

<?php echo $this->item->event->beforeDisplayContent; ?>
<?php echo $this->item->introtext; ?>

and change this to

<?php echo $this->item->event->beforeDisplayContent; ?>
<?php  if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
   <?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?></pre>

 if ($images->image_intro_caption):
 echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
 endif; ?>
 src="image_intro); ?>" alt="image_intro_alt); ?>"/>

<?php endif; ?>
<?php echo $this->item->introtext; ?>

This way, you can override the existing Joomla core template files and show the intro image on your category listing pages.

That’s all. Hope this will solve your issue. If still you find it difficult to integrate, just post a comment here. I will try to resolve it as far as practicable.

The Complete Guide to Building Multilingual Joomla Website

The Complete Guide to Building Multilingual Joomla Website

Translating your website into several languages will increase your audience notably.

Adding the multilingual functionality to your Joomla site is just a few instinctive steps away. Let me do it even easier for you.

This tutorial is going to show you how to configure a multi-language Joomla site. To perform this you need to go through the following steps:

  1. Install a new language
  2. Create a new content language with new parameters
  3. Enable Language Filter plugin
  4. Setting up Language Switcher module
  5. Create menu for every installed language
  6. Create menu module
  7. Multilingual articles

Step 1: Install a new language

At first, let’s add the language files for the desired language we want to use as the second language on our site.

So, log in to your Joomla admin panel. Now, to install the language pack you need to navigate to Extensions -> Languages.

In the screen that opens, select “Install Languages”.

Another screen will be opened, tick on your desired language pack and click “Install” button.

You will see your installed language packs in Extensions -> Languages -> Installed.

Step 2: Make a new content language with new parameters

The next step is to originate a content language.

Although you have already installed a second language, still you need to add the appropriate information for this languages.

In this step, you need to navigate to Extensions -> Languages -> Content Languages.

You will see here, the default content language, to add a new content language click the “New” button from the top menu.

A new screen will open, insert the required information according to the selected language.

Look at the image below. There are five required fields.

Title: This fields for language name that will display in the Joomla backend that you can assign a specific language for your articles, modules or other items.

Title Native: Here you insert the original language name which will display in the language manager and the list of content languages.

Language Tag: The language tag consists of the language code. If you are not sure about it, you can find it next to the language name in the list of installed languages at the language manager section.

URL Language Code: This is the code that will appear in the URL. For example, here I insert “de” hence, the URL will like this when I select Germany as the desired language.

Image Prefix: This is the language code. Joomla uses this code to display the country flag images enabling the visitors to select a site language.

Step 3: Enable Language Filter plugin

The language filter plugin enables the CMS to recognize the different installed languages and display only the content relevant to the current language.

Just navigate to Extensions -> Plugins and search for the “Language Filter” Plugin and enable it.

Also, enable the “Language Code” plugin. This plugin installed with the Joomla engine by default.

Step 4: Setting up Language Switcher module

You will also have to add a menu module to display the language list on your site.

Navigate to Extensions -> Modules, a new window will open. Click “New” and select “Language Switcher” from the list.

It will open an editing window.

Insert the title as it is required, though you have an option on hand to display the title or hide.

Set the position where the switcher module will visible and set the switcher status as public.

Look at the image below. A language switcher section is visible on the right sidebar.

Step 5: Create menu for every installed language

You will need to create menus for each content language to display multilingual content on your site.

To perform so navigate to Menus -> Manage -> Add new Menu.

After that insert the “Title” and “Menu Type” and hit the save button.

Do the same process for every content language that you wish to display on your site.

You will find all your created menus in Menus -> Manage later and also edit them.

So now you need to add items in each menu, the easiest way to perform is to open your main menu then select any item and then hit the “Batch” button top of the page.

In this process, we are going to copy all the menu items from the main menu to each menu.

A popup will open, you need to set the language to which you are going to copy the item and select the menu to where you want to copy this.

Check copy from radio button and press “Process”. Once it was done, do that for each one.

Now you have a menu for every language and several items on it.

You can open each menu one by one, make an item to default page and edit them.

Step 6: Create menu module

Just navigate Extensions -> Modules then select a menu from the list.

In the module section, set position for selected menu.

In advanced section, insert “nav-pills” in the menu class suffix field.

And then in menu assignment section, select “Only on the pages selected” option.

It will display only the items which you want to show in your menubar.

So, uncheck the other languages menu items.

Step 7: Multilingual articles

Let’s create a multilingual article to see how it works.

Create a new post, set the language of the post in the content section.

Make a copy of this post or make more copy as you want. Set different languages for each post.

And now again edit the post, go the “Associations” section, associate the post with the copy of this post.

Save and close it.

As a result, when you click a flag it will change both the menu and the articles to the desired language.

Look at the image below, how I associate the posts to each other.

So, we are at the finishing stage. Just take a look how it works.

Make this process easier with an extension:

In the first section, I talk about the manual process.

Now here, in the second section, I’ll show you how to create a multilingual website using an extension.

In our previous article we discussed about Neno translation extension for joomla and today I am going to use the another popular extensions JA Multilingual Component.

It’s free Joomla multi-language translation extension.

This extension is light in weight but robust at speed. To boost up your multilingual website, it will do almost everything what you need.

Let’s see how it works through the following steps:

  1. Download JA Multilingual Component
  2. Component Installation
  3. Translate Language

Step 1: Download JA Multilingual Component

At the beginning stage, you need to download JA Multilingual Component from their official site.

It is free of cost. To download this extension, you need to create an account on their site because they don’t admit to providing their service to non-users.

Step 2: Component Installation

Navigate Extensions -> Manage -> Install.

In the new window that opened, you will see a file upload option.

Just point to your download file and hit Upload & Install button. After a few seconds, the extension will successfully install.

Step 3: Translate Language

Navigate Components -> JA Multilingual.

Here you see a notification that asks to configures authenticate API (Application Programming Interface) to translate the site.

Just press the Options from the top. Insert the API key and save and close the current window.

You can install languages as you want and then press Translate All to do all tasks immediately. Wait a few moments until it is done.

Take a look how it works.

Final Words

Hope you enjoyed this tutorial, and now you can create a multilingual site using Joomla. Let us know about your further query and share your opinion.

Display image intro in Modules: Articles – Category Template

1. Open and edit  “_item.php” file in Joomla folder/modules/mod_articles_category/tmpl/default.php

2. After line 22 “<li>”

21. <?php foreach ($group as $item) : ?>
22. <li>


 /* begin customized - Display image intro*/
 $images = json_decode($item->images); // new line

 <?php if (isset($images->image_intro) and !empty($images->image_intro)) : ?>
 <?php $imgfloat = (empty($images->float_intro)) ? $params->get('float_intro') : $images->float_intro; ?>
"> image_intro_caption): echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"'; endif; ?> src="image_intro); ?>" alt="image_intro_alt); ?>"/>
<?php endif;//end customized ?>

3. Save and refesh web page to view result.

Display intro image in Joompla 3 template

1. Open and edit  “_item.php” file in Joomla folder/modules/mod_articles_news/tmpl/_item.php

2. After line 12, add:

$images = json_decode($item->images);

if( $images->image_intro && $params->get(‘image’) ){
 echo ‘<img src=”‘ . $images->image_intro . ‘” alt=”‘ . htmlspecialchars($article->title) . ‘” />’;

3. Save and refesh web page to view result.