Show image description in Slimbox/Thickbox

Article Index

This article describes how to change the code of JoomGallery (version 1.5.7 and higher) to show the image description beside the caption in Slimbox and Thickbox. It is planned in next versions to include an option for switching the display of the caption/image description in a more comfortable way.

General information

When clicking at e.g. a thumbnail the boxes read the content of the 'title' attribute in the 'a' tag and show them in the larger window of the box.

HTML-example for Slimbox:

<a title="Caption" href="/Link to larger image" rel="lightbox[joomgallery]">
<img src="/Link to thumbnail" />
</a>

Thickbox:

<a title="Caption" href="/Link to larger image" class="thickbox">
<img src="/Link to thumbnail" />
</a>

So in both cases the image description has to be added to the 'title' attribute of the 'a' Tag. In versions of JoomGallery before 1.5.7 it was quit simple to do this job. There was only one line of code to be changed in the file "/components/com_joomgallery/helpers/html/joomgallery.php". Since 1.5.7 the 'title' attribute is always part of the templates, also if the e.g. slimbox is not active.

Therefore all templates has to be changed from which a slimbox could be opened if activated by you. If you have disabled the links to e.g. the favorites or the toplists view there is no need to do any changes there.
The best way is to use the template overrides described here more in detail. This means in case of an update of the gallery component the changes will be not overwritten.

In the following examples the lines of code to be changed are shortened and shown partial in several lines. So don't copy & paste the lines directly. Make a copy of the original file before.

By the example of the category view some common information. You can find the template in file '/components/com_joomgallery/views/category/tmpl/default_images.php'. Open the file in an appropriate editor e.g. Notepad++. In line 23 you can see the 'title' attribute of the 'a' tag.

<a title="<?php echo $row->imgtitle; ?>"

After the change:

<a title="<?php echo $row->imgtitle.
' '.
htmlspecialchars($row->imgtext, ENT_COMPAT, 'UTF-8'); ?>"

The function 'htmlspecialchars' is necessary to work correctly with special signs like quotes. More information here.

In the example the caption, one space and the image description will be displayed in one line. If the image description are entered in an editor of Joomla! sometimes you can see in HTML view a 'p' Tag surrounding the description. This will output a line break positioning the description below the caption. That can be confusing at the beginning a little. To avoid this switch the editor to HTML view and remove the 'p' tag.

If you need always a line break try this :

<a title="<?php echo $row->imgtitle.
'<br />'.
htmlspecialchars($row->imgtext,ENT_COMPAT,'UTF-8');?>"

A further example to show 'Caption: Description':

<a title="<?php echo $row->imgtitle.
': '.
htmlspecialchars($row->imgtext, ENT_COMPAT, 'UTF-8'); ?>"

Save the file with the right encoding 'UTF-8 without BOM'. Then look at the frontend to see if the changes are successful.
Then change each template step by step.

Joomla!®

Joom::Gallery is not affiliated with or endorsed by the Joomla! Project or Open Source Matters. The Joomla! name and logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.