NextGen Smooth Gallery: adding links to descriptions and ALT tags to images

See also my previous post on Smooth Gallery.

A feature of NextGen Smooth Gallery is the “info panes” that slide up at the bottom of pictures, containing text entered in NextGen’s “Description” boxes. These descriptions can be enabled to use HTML, for example to include a hyperlink in the description or to make a word or phrase bold, by editing line 98 in nggsmoothgallery/SmoothGallery/nggSmoothSharedFunctions.php from:

<p>'.$picture->description.'</p>

to:

<p>'.html_entity_decode(stripslashes($picture->description)).'</p>

HTML entered in a picture’s description box will now be recognised, eg

Description: text here <a href="http://www.google.co.uk">link here</a>

Note that the “Embed links” box in the Smooth Gallery settings does not need to be ticked.

Thanks to Hubba for setting me on the right track with this!

Next, to get rid of some HTML validation errors, we need to add ALT tags to the images. To do this, fill in the “Alt & Title Text” box in NextGen for each picture and, in the same file (nggsmoothgallery/SmoothGallery/nggSmoothSharedFunctions.php), edit lines 100 and 101, adding

alt="'.$picture->alttext.'"

to each. The lines will now read:

<img src="'.BASE_URL."/".$picture->path."/".$picture->filename.'" class="full"
 alt="'.$picture->alttext.'" />
<img src="'.BASE_URL."/".$picture->path."/thumbs/thumbs_".$picture->filename.'" 
class="thumbnail"  alt="'.$picture->alttext.'" />

There’s also a picture border lurking in this file which, if you want, can be removed by deleting

border: 1px solid;

in line 92.

2 Responses to “NextGen Smooth Gallery: adding links to descriptions and ALT tags to images”

  1. Caroline :) says:

    Hi ScotProof! This tip was invaluable to me, thank you so much.

    Might you know how to change the size of the caption text? My caption text is waayyyyy too small!

  2. admin says:

    Caroline - glad it helped!

    Go to nggsmoothgallery/SmoothGallery/css/jd.gallery.css and change the font size in this section:

    .jdGallery .slideInfoZone p {}

    That should do it.

Leave a Reply