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.


Changes in templates

Now we are coming to the modifications of every template. You can see there always the changed line.
The output should be of the format 'Caption, Space, Description'

As written before: change only the templates necessary for you.

Category view
File '/components/com_joomgallery/views/category/tmpl/default_images.php'
Line 23

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

Detail view
File '/components/com_joomgallery/views/detail/tmpl/default.php'
Line 19 (click at detail image) and line 105 (click at the lens)

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

Favourites view
File '/components/com_joomgallery/views/favourites/tmpl/default.php'
Line 35
here you have to add the 'title' attribute completely.

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

Search view
File '/components/com_joomgallery/views/search/tmpl/default.php'
Line 26

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

Toplists view
File '/components/com_joomgallery/views/toplist/tmpl/default.php'
Line 28

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

'My Gallery' - Images overview
File '/components/com_joomgallery/views/userpanel/tmpl/default.php'
Line 93 (Click at link of image)

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

For the minithumb you have to modify the line 1161 in file '/components/com_joomgallery/helpers/html/joomgallery.php'.

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

Changes in interface for extensions

Extensions which can show the Slimbox or Thickbox directly need a change in the interface of JoomGallery.

File: '/components/com_joomgallery/interface.php'
Lines: 378/475/567
Below this code add one line, result:

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

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.