A commonly requested feature of the Joomla Contacts component is to be able to show the contact's photo in the category listing view. Here's a simple way to create a template override which adds a column to that table. I'll also show you how to make the thumbnails act as JCE MediaBox popups, should you happen to have it installed. Here's an example of what it all looks like.
First, copy the view template file from /components/com_contact/views/category/tmpl/default_items.php to /templates/<your_template>/html/com_contact/category/default_items.php. Then open it for editing.
Find the closing
</tr>
tag inside the
</thead>
and insert the following code just before it to add another column to the table:
<th></th>
Down near the bottom, find the closing
</tr>
tag and add the following to display each contact's thumbnail image:
<td>
<img src="/<?php echo $item->image; ?>" />
</td>
Optionally add a class to the image tag to allow styling from an external stylesheet. I've set a specific height to keep the table rows uniform:
.contact-cat-thumb {height: 80px; width: auto;}
To make the image clickable, simply add anchor tags around the image, and use the same code for the link location that we did for the image source:
<td>
<a href="/<?php echo $item->image; ?>" ><img class="contact-cat-thumb" src="/<?php echo $item->image; ?>" /></a>
</td>
To create a JCE Mediabox popup, add the class, target, and rel attributes:
<td>
<a class="jcepopup" href="/<?php echo $item->image; ?>" target="_blank" rel="title[<?php echo $item->name; ?>::<?php echo $item->con_position; ?>];group[contacts]"><img class="contact-cat-thumb" src="/<?php echo $item->image; ?>" /></a>
</td>
Notice that I've used code from elsewhere in this same file to populate the popup title with the contact's name, and the caption with the contact's position. Also note that we don't have code in place to hide link and image code for any contact who dont' have images. We can do so with some additional PHP:
<td>
<?php if ($item->image) : ?>
<a class="jcepopup" href="/<?php echo $item->image; ?>" target="_blank" rel="title[<?php echo $item->name; ?>::<?php echo $item->con_position; ?>];group[contacts]"><img class="contact-cat-thumb" src="/<?php echo $item->image; ?>" /></a>
<?php endif; ?>
</td>
That's it!
Follow