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.

10 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.

  3. nate says:

    what about adding links to images? Any way to do this?

    Thanks so much for this post!

  4. Ben says:

    When I put a caption in that contains an apostrophe, for example, β€œIt’s a big one!” It shows up with a / before the β€˜. What code do I need to use in my description to make this display correctly?

    • admin says:

      Sorry, Ben, it’s been a while since I looked at the code and I don’t have time to get into it right now. I think this will be to do with stripslashes – if you google “php slash apostrophe” or similar, you might find some pointers. Hope that helps.

  5. Martin says:

    Hi Scott,
    Thanks for the tip, I have followed your instructions to the T, and it certainly strips out the slashes and activates the URL. However, my externalURL appears with my blog URL before it.

    for example the link in alttext is “www.myexternalURL.com” but the final link comes out: http://www.myblogexample.com/wp-content/plugins/nextgen-smooth-gallery/www.externalURL.com

    Is there anyway of stripping this out?
    I am using NextGen Gallery v1.3.5 and NextGen SmoothGallery v1.0

    Thanks in advance.
    Martin

  6. Jane says:

    I have the same issue as Martin.

    Any help?

    Thanks,

    Jane

  7. Mark says:

    Scott/Jane, does it still do this if you add the http:// part to the link in alttext?

    Mark

  8. Kyle says:

    Thanks!!! This is exactly what I needed to find (after searching the WordPress forums for hours).

Leave a Reply