There is ONE BIG DRAWBACK with the NEXTGen Gallery Plugin’s tagcloud – once you have clicked a tag, and are presented with the images related to that tag, the tagcloud has gone from the results page.  Here is a solution if you want to use the tagcloud as an ever-present navigation option in your gallery section….

The Problem

We recently reconfigured our entire website to use Wordpress.  As a blog/content management system, it is easily configurable and flexible to use. As web designers & developers, we constantly suffer from “the cobbler’s children are poorest shod” syndrome, i.e. after looking after our clients’ websites, there is no time left to look after our own, so having a flexible system like Wordpress should allow us to keep things more up to date.

We decided to use the NEXTGen Gallery plugin to power our Portfolio section, because it is so easy to upload images singly or in bulk, and has so many categorisation options, we felt it would give us the flexibility we needed going forward.

We especially like the provision of Tags (keywords), used throughout Wordpress for pages and posts, associated with images.  The plugin comes with shortcode tagcloud which you just drop in to a page, surrounded by [ ], to produce this:

(our tag cloud has a bit of extra html in it to produce the “what’s this” thought bubble – that’s another story)

However, there is ONE BIG DRAWBACK with the NEXTGen tagcloud – once you have clicked a tag, and are presented with the images related to that tag, the tagcloud has gone, so you either have to use the Back Button, or add some sort of link back to the previous page.  If like us, you want to use the tagcloud as navigation within the gallery section, you end up with something that is not the most user friendly solution in the world.

The Solution

The solution is to modify the NEXTGen code as follows:

1.  Edit nggfunctions.php (either through the Plugins Editor in the Wordpress Admin, or edit the file directly – it is in the top level of the /nextgen-gallery/ directory in you source files – found in wp-content/plugins/ if you have uploaded or installed directly via Wordpress).

2. Find this code starting on lines 1010 – 1045 (the last lines of the file before the ?> closing php tag) :

function nggTagCloud($args =”, $template = ”) {
global $nggRewrite;

// $_GET from wp_query
$tag = get_query_var(’gallerytag’);
$pageid = get_query_var(’pageid’);

// look for gallerytag variable
if ( $pageid == get_the_ID() || !is_home() ) {
if (!empty( $tag )) {

$slug = esc_attr( $tag );
$out = nggShowGalleryTags( $slug );
return $out;
}
}

$defaults = array(
’smallest’ => 8, ‘largest’ => 22, ‘unit’ => ‘pt’, ‘number’ => 45,
‘format’ => ‘flat’, ‘orderby’ => ‘name’, ‘order’ => ‘ASC’,
‘exclude’ => ”, ‘include’ => ”, ‘link’ => ‘view’, ‘taxonomy’ => ‘ngg_tag’
);
$args = wp_parse_args( $args, $defaults );

$tags = get_terms( $args['taxonomy'], array_merge( $args, array( ‘orderby’ => ‘count’, ‘order’ => ‘DESC’ ) ) ); // Always query top tags

foreach ($tags as $key => $tag ) {

$tags[ $key ]->link = $nggRewrite->get_permalink(array (’gallerytag’ => $tag->slug));
$tags[ $key ]->id = $tag->term_id;
}

$out = ‘

‘;

return $out;
}

and replace it with this:

function nggTagCloud($args =”, $template = ”) {
global $nggRewrite;

// $_GET from wp_query
$tag     = get_query_var(’gallerytag’);
$pageid  = get_query_var(’pageid’);

// look for gallerytag variable
if ( $pageid == get_the_ID() || !is_home() )  {
if (!empty( $tag ))  {

$slug =  esc_attr( $tag );
$defaults = array(
’smallest’ => 8, ‘largest’ => 22, ‘unit’ => ‘pt’, ‘number’ => 45,
‘format’ => ‘flat’, ‘orderby’ => ‘name’, ‘order’ => ‘ASC’,
‘exclude’ => ”, ‘include’ => ”, ‘link’ => ‘view’, ‘taxonomy’ => ‘ngg_tag’
);
$args = wp_parse_args( $args, $defaults );

$tags = get_terms( $args['taxonomy'], array_merge( $args, array( ‘orderby’ => ‘count’, ‘order’ => ‘DESC’ ) ) ); // Always query top tags

foreach ($tags as $key => $tag ) {

$tags[ $key ]->link = $nggRewrite->get_permalink(array (’gallerytag’ => $tag->slug));
$tags[ $key ]->id = $tag->term_id;
}
$out  =  ‘<div>’ . wp_generate_tag_cloud( $tags, $args ) . ‘</div>’ . nggShowGalleryTags( $slug );
return $out;
}
}

$defaults = array(
’smallest’ => 8, ‘largest’ => 22, ‘unit’ => ‘pt’, ‘number’ => 45,
‘format’ => ‘flat’, ‘orderby’ => ‘name’, ‘order’ => ‘ASC’,
‘exclude’ => ”, ‘include’ => ”, ‘link’ => ‘view’, ‘taxonomy’ => ‘ngg_tag’
);
$args = wp_parse_args( $args, $defaults );

$tags = get_terms( $args['taxonomy'], array_merge( $args, array( ‘orderby’ => ‘count’, ‘order’ => ‘DESC’ ) ) ); // Always query top tags

foreach ($tags as $key => $tag ) {

$tags[ $key ]->link = $nggRewrite->get_permalink(array (’gallerytag’ => $tag->slug));
$tags[ $key ]->id = $tag->term_id;
}

$out = ‘<div>’ . wp_generate_tag_cloud( $tags, $args ) . ‘</div>’;

return $out;
}

That forces the page with the tagcloud on to show the tagcloud, even if a tag has already been selected.

You can further modify the $out = ‘<div>’ . wp_generate_tag_cloud( $tags, $args ) . ‘</div>’; line to add more html into you tag cloud (as we have done to show the thought bubble with modal javascript popup window) – in which case don’t forget to modify both instances of that code so that it shows both when the page first presents, and when a tag has been selected.

In order to avoid getting a blank page with just a tag cloud on it the first time you visit the page, we have set the URL of the page linked to from Portfolio on our navigation menu to load images with the tag “latest” using this URL format: http://www.metanym.com/portfolio/?gallerytag=latest.

Now all that is not elegant coding as such, just a hack to deliver some functionality we wanted to see in NEXTGen, so we hope it’s of use to Wordpress users out there.