« Nice Wee Theme
Fixing arrows in NextGen Smooth Gallery »

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

Published by admin on November 16th, 2008 in Wordpress, nextgen, plugins.

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.

Feed for this entry. Leave a response, or trackback from your own site.

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

  1. Caroline :) says:
    December 3, 2008 at 2:37 am

    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!

    Reply
  2. admin says:
    December 3, 2008 at 12:11 pm

    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.

    Reply
  3. nate says:
    July 14, 2009 at 7:29 pm

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

    Thanks so much for this post!

    Reply
  4. Ben says:
    July 29, 2009 at 5:45 pm

    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?

    Reply
    • admin says:
      July 29, 2009 at 8:35 pm

      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.

      Reply
  5. Martin says:
    August 25, 2009 at 5:38 pm

    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

    Reply
  6. Jane says:
    October 21, 2009 at 2:15 am

    I have the same issue as Martin.

    Any help?

    Thanks,

    Jane

    Reply
  7. Mark says:
    March 14, 2010 at 8:28 am

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

    Mark

    Reply
  8. Kyle says:
    August 6, 2010 at 4:52 pm

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

    Reply

Leave a Reply