How To Create a NextGen Gallery Tag Cloud

How To Create a NextGen Gallery Tag Cloud

How To Create a NextGen Gallery Tag Cloud 150 150 admin

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.

connect.
communicate.
conquer.