How To Create a NextGen Gallery Tag Cloud

Disclaimer: I am not a programmer. I know just enough about coding to get things to work, but not enough to make it pretty or even usually be able to explain it to someone else. However, I thought this might be helpful.

My problem was this – I manage a client’s website that only partially uses WordPress. The client had an existing photo gallery, but wanted it to show a list of categories in the sidebar. Say you just wanted to see photos of water features he’d installed; you’d click on “water features” and voila. Simple, right?

I found the NextGen Gallery plugin for WordPress and it looked like just the thing. Not only did it support tagging images, but it also had Thickbox built in, included a flash slideshow, was capable of watermarking, and best of all: would import images from a folder and automatically create thumbnails to my specifications. I’d been manually creating thumbnails so this was a huge plus.

After I got the NextGen plugin up and running, I started tagging images—only to discover that NextGen doesn’t have a simple way to output tags into a list of links. It only uses the tags to perform a “related images” function on your other blog posts.

I did, however, find some helpful code in the WordPress forums which helped me come up with the final product. A list of tags in the sidebar which load only those images when clicked.

So here’s the step-by-step:

1. Create a new page to help display your tagged images. Mine is called “tags.” The simpler the better. Paste this into the body of the page and publish/save it. This isn’t the main gallery page, but when you click a tag it is the page where the tagged images load. (I never said this would be pretty.)

[albumtags=]

2. Make note of the page slug and ID. My slug is /tags/, and the page ID is 46. (Because the newer WP versions make it difficult: here’s how to find out your page ID.)

2. Use this code to output the list of tags wherever you want it (courtesy of Eric Li). I inserted it directly into my template for the gallery page. However, if you install the Exec-PHP plugin, you can create a text widget and paste this code there for the same effect.

Show photos of:<br/><ul class="galtags">
<?
global $wpdb;
$results = $wpdb->get_results('SELECT name, slug FROM wp_ngg_tags');
foreach ($results as $row) {

echo "<li><a href=http://www.fathernaturelandscapes.com/nggallery/page-46/tags/";
echo $row->slug;
echo ">";
echo $row->name;
echo "</a> </li> ";
}
?>
</ul>

This outputs an unordered list of tags with the class galtags.

3. In the code above, change “www.fathernaturelandscapes.com” to your URL, the number 46 to your page ID, and “tags” to your page slug.

4. To make the “Overview” link work once you’ve clicked through to a set of tagged images, open the file nggfunctions.php and go to line 732. There you’ll find this piece of code:

<div id="albumnav"><span><a href="'.get_permalink().'" title="'.__('Overview', 'nggallery').'">

Replace the text ‘.get_permalink().’ with the link to your main gallery page. I also changed the Overview text to Show All. (This could be prettier – surely there’s some PHP that will point back to the main gallery page. I’ll keep working on that.)

And voila.

I couldn’t tell you exactly why or how it works, but it’s working for me. I’ll be happy to answer any questions I can in the comments; or feel free to leave advice on how to improve upon it.

Comments (13)
  • ERIC LI

    October 28, 2008

    Congrats mate!

    It’s looking good. But how come after clicking on the tag cloud, it gets back with a error 404 page. Perhaps some naming convention issue?

    Eric

  • admin

    October 28, 2008

    You know what, I think I did edit one of the plugin files to point the “Show all” link at my gallery page. Is that what you meant? I’ll find that and add it in. Thanks for the heads up.

  • ERIC LI

    October 28, 2008

    Not sure if it’s just me.

    On this page (http://www.fathernaturelandscapes.com/photogallery/) i click on one of the tags, say, seating.

    it anchors me to http://www.fathernaturelandscapes.com/nggallery/page-46/tags/seating

    which I don’t think the page exist.
    :)

    Eric

  • Ginny Shope Fowler

    October 28, 2008

    Haha…it was a typo on my end. Like I said, I’m no programmer. But it is working now.

  • ERIC LI

    October 28, 2008

    Nice.. :D

  • ERIC LI

    October 30, 2008

    G’Day Mate. Not sure if you are interested, but I came up with a quick SQL to bring back “Related Images” based on your tag selection.

    http://www.canberrapictorial.com.au/library

    Just click on any of the tags and you will see what it gets..

  • Ginny Shope Fowler

    October 30, 2008

    That’s awesome, Eric – thanks!

  • Jawbone

    May 28, 2009

    Guys, what you did is cool! however, do you have any idea how to incorporate tags from nextgen into wp tag cloud? Otherwise, I want images could be posted by clicking on tags not in the form of an album, but a gallery. Is it possible? I’m not a programmer at all, so i’m not able to handle it.

  • Ginny Shope Fowler

    May 28, 2009

    I don’t know of any way to incorporate NextGen’s tags into your WP tag cloud. That would be a nice feature. I’m not sure if I understand the second part of your question; maybe you mean you’d like a list of links to your galleries? If so, it should be easy enough to create a text list of gallery links with basic HTML.

  • RRG

    June 3, 2009

    No tags show for me. Anything that I may be missing? I embedded the code to show in my archives. I can see”show photos of:” but no tags. There are tags in my Nextgen photos…nothing.

    Any help would be great!
    Thank you
    RRG

  • Ginny Shope Fowler

    June 7, 2009

    Did you get it worked out? I looked but didn’t see anything that jumped out at me as being a problem.

  • Tony

    August 13, 2009

    Is there anyway to run this through WP’s tag cloud rendering code the way the [tagcloud] short code does ?

    I don’t like the way the short code works. Seems to replace my widget with the relevant photos instead of a new page with the relevant photos there…

  • Alpheratz

    January 13, 2010

    Wow!! That was just wat I was looking for.
    I was going to make a hack that dumps tagcloud in a file and then loads it from file but you helped me out.
    Thank you very much!!!

Leave a Comment

* required

This is a unique website which will require a more modern browser to work! Please upgrade today!