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

joomla_404

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.

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

To this

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

Around on line 41/42, search for

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

and change this to

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?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>

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

<pre>
<?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.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s