Contact images in the contact Category table

Would be nice to have the contact images in the contact Category table, don't you? Yea, and in fact is a relatively simple trick, since Joomla 1.5 and the template overrides being handy!

Supposedly the images attached to the contacts are in the default place, in the /images/stories folder. If you use a different setting, you will need to tweak the code below accordingly. And also let's enhance  the original ideea a bit, and add a "no photo" image just in case some of the contacts in the list don't have images attached. Let's say that this will be this image:

images/stories/no_photo.png

So, let's create the template override. For this we need a copy of this file in our template directory:

components\com_contact\views\category\tmpl\default_items.php

The location where we need to copy this is:

mytemplate/html/com_contact/category/default_items.php

So, let's modify it to show our images! Suppose that we want to insert the image just before the contact name. For this first we need to locate where to insert the new code. In the above file we need to locate this line:

<?php echo $item->name; ?>

This is around line 100 for most Joomla versions above Joomla 1.5 - may vary. Here we will insert our new code:

<div class="image">
<?php if ( $item->image != '') { 
                    echo '<a href="'.$item->link.'"><img src="/images/stories/'.$item->image.'" title="'.$item->name.'" align="middle" border="0" /></a>';
          } else { 
                   echo '<a href="'.$item->link.'"><img src="/images/stories/no_photo.png" title="'.$item->name.'" align="middle" border="0" /></a>';
          } ?>
</div>
<?php echo $item->name; ?>

Of course, this is just a way to do it, most of the above HTML/PHP code can be changed, to have the desired output. I added a CSS class to make it easier to style it, that also can be changed.  Happy hacking!