, ,


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_content and 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>
<div class="img-intro-<?php echo htmlspecialchars($imgfloat); ?>">
 <?php if ($images->image_intro_caption):
 echo 'class="caption"'.' title="' .htmlspecialchars($images->image_intro_caption) .'"';
 endif; ?>
 src="<?php echo htmlspecialchars($images->image_intro); ?>" alt="<?php echo htmlspecialchars($images->image_intro_alt); ?>"/></div>
<?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.