Customising NextGen Gallery for WordPress

Check out my recent article about using Flexslider with NextGen Gallery here.

How to customize thumbnail links in NextGen

I recently did a client project featuring a catalogue of product images using a custom WordPress theme with NextGen Gallery. The site showcases products (fabrics) each with a swatch thumbnail and the requirement was for the swatches to be organised two ways:

1. Standard gallery (thumbnail links to full size image)

Each product page displays a gallery of all available colours, where each thumbnail links to the full size version. See this in action on this product page.

This is the built-in function of NextGen Gallery at work, where the above gallery has been generated by using the built-in shortcode for calling on a gallery by ID.

[nggallery id=2]

2. Custom gallery (thumbnail links to product page)

A gallery generated by using colour names in the tag field, customised so each thumbnail links to its respective product post. See this in action on this 'swatches by colour' page.

The above gallery has been generated by using the built-in shortcode for calling on the tags field:

[nggtags gallery=red]

Customise existing fields in NextGen 'Manage Gallery' area

In the file /nextgen-gallery/admin/manage-images.php, find the variable $gallery_columns['alt_title_desc'] and modify the code to:

$gallery_columns['alt_title_desc'] = __('Alt & Title Text',
 'nggallery') . ' / ' . __('Link to URL', 'nggallery');

This will customise the column header names in 'Manage Gallery' screen as shown below:

You'll notice that the 'Description' field has become 'Link to URL'. Each respective product page link is entered in this field, which will then be used in the customised gallery code. The colours listed in the 'Tags' field correspond to the nggtags gallery shortcode, as described above.

Add custom variables to gallery.php

In order to keep your customisation isolated from the core NextGen gallery plugin, you need to create a directory inside your theme called /nggallery/. The file we need to customise is gallery.php which is located in the /plugins/nextgen-gallery/view/ directory; copy this file to the new directory in your theme. This file will override the plugin's own copy of the same file so when you update the NextGen plugin, your customised file will remain unchanged.

Now for the tinkering. With your new file /yourtheme/nggallery/gallery.php open, locate the beginning of the loop which outputs the thumbnail gallery markup:

<!-- Thumbnails -->
<?php foreach ( $images as $image ) : ?>

Immediately below this I have added a custom if/else statement which calls on the $image->description variable. Since I already renamed the 'Description' field to 'Link to URL', this variable will contain the relevant URL needed for the custom link.

I created a new variable called $page_link to which I assigned the URL; however to avoid links that go nowhere, I only want this to happen if there is a value in the 'Link to URL' field, otherwise I want $page_link to be empty. I used the if is not empty function to check for a value and conditionally set the image link to either the URL value, or nothing.

if (!empty($image->description)) { // set image link
    $page_link = $image->description; 
} else {
    $page_link = '';
}

Since I only want the thumbnails linking to a URL on the colours page, I created another condition that assigns the custom link only for that page, otherwise it uses the standard full size image link $image->imageURL.

if (is_page('colours')) { // check that it is the colours page
    $fabric_link = $page_link;
} else {
    $fabric_link = $image->imageURL;
}

Lastly, I added a new variable $uc_alt to tidy up the alt-text which by default was the same as the image name. I used the string replace function to convert hyphens to spaces and then applied the uppercase words function to capitalise the first letter of each word.

$uc_alt = ucwords(str_replace("-", " ", $image->alttext));

All of this put together is as follows:

<?php // customisation to default NextGen behaviour
        if (!empty($image->description)) { // set image link
            $page_link = $image->description; 
        } else {
            $page_link = '';
        }
        if (is_page('colours')) {
            $fabric_link = $page_link;
        } else {
            $fabric_link = $image->imageURL;
        }
        $uc_alt = ucwords(str_replace("-", " ", $image->alttext));
?>

Customise gallery.php thumbnail output with new variables

First I modified output default thumbnail output to include my custom $uc_alt variable where appropriate, following the opening div tag <div class="ngg-gallery-thumbnail" >

<a href="<?php echo $image->imageURL; ?>" 
      title="<?php echo $uc_alt ?>" <?php echo $image->thumbcode ?> >
    <?php if ( !$image->hidden ) { ?>
    <img title="<?php echo $uc_alt ?>" 
      alt="<?php echo $uc_alt ?>" 
      src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
    <?php } ?>
</a>

Now I want to create an alternate version of the thumbnail code which uses the above variables to link the thumbnail image to the URL value. I have customised the opening link tag to replace $image->imageURL with my new variable $fabric_link:

<a href="<?php echo $fabric_link // this is the custom link ?>" 
        title="<?php echo $uc_alt ?>" <?php echo $image->thumbcode ?> >		
    <?php if ( !$image->hidden ) { ?>
    <img title="<?php echo $uc_alt ?>" 
      alt="<?php echo $uc_alt ?>" 
      src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
    <?php } ?>
</a>

Now I applied an if/else statement to conditionally apply the standard thumbnail code if it is a product page (post type fabrics), or otherwise the customised thumbnail code

<?php 
// check for post type fabrics
	if(get_post_type() == 'fabrics')
{ 
// display thumbnail linking to full size image
} else { 
// display thumbnail linking to URL value
}
?>

The final code is as follows:

<div class="ngg-gallery-thumbnail" >

<?php 
// check for post type fabrics
    if(get_post_type() == 'fabrics')
{ // display thumbnail linking to full size image ?>        
    <a href="<?php echo $image->imageURL; // this is the default link ?>" 
          title="<?php echo $uc_alt ?>" <?php echo $image->thumbcode ?> >
          
        <?php if ( !$image->hidden ) { ?>
          <img title="<?php echo $uc_alt ?>" alt="<?php echo $uc_alt ?>" 
            src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
        <?php } ?>
        
    </a>
        
<?php } else { // display thumbnail linking to URL value ?>        

    <a href="<?php echo $fabric_link // this is the custom URL link ?>" 
          title="<?php echo $uc_alt ?>" <?php echo $image->thumbcode ?> >
          		
        <?php if ( !$image->hidden ) { ?>
          <img title="<?php echo $uc_alt ?>" alt="<?php echo $uc_alt ?>" 
            src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
        <?php } ?>
        
    </a>
<?php } ?>    
    
</div>

This tutorial obviously is unique to the requirements of my project, however you can see how the gallery variables and thumbnail code can be manipulated with a few simple conditional statements and custom variables. I hope you find this useful for your next project!

3 Responses to “Customising NextGen Gallery for WordPress”

  1. helmers says:

    hey!
    thanks for the post, i’m trying to use your structure of conditionals to check to see whether the user is on a category id rather than a specific page. i’m not quite sure whats going wrong but the links i drop in the description/url field are not linking up properly.

    i’ve posted my gallery.php below, in the first part i use the is_category array to call a number of category ids where i’d like the thumbnails to link to a particular post url:

    description)) { // set image link
    $page_link = $image->description;
    } else {
    $page_link = ”;
    }

    if (is_category(array( 30, 5, 6, 7, 8, 9, 10, 11, 12, 13, 15, 39, 40, 41, 42, 43))) { // check that it is a specific category
    $project_link = $page_link;
    } else {
    $project_link = $image->imageURL;
    }
    $uc_alt = ucwords(str_replace(“-“, ” “, $image->alttext));
    ?>

    ……and the second part here, where any post with the category “projects” will have the thumbnails link to the normal ng gallery, using the in_category conditional…


    title=”” thumbcode ?> >

    hidden ) { ?>
    >

    hidden ) { ?>

  2. Tim says:

    Hi Helmers,

    It looks like the code you posted was messed up by the WordPress comment form, so it’s hard for me to follow. However, in general if I am having trouble with conditional code, I usually dumb it right down so I can see if the rules are working properly before adding in the real code. For example, you could test your category condition by saying:

    if is_category (5,6,7, etc) { echo “yes, this is the right category” } else { do default }

    and if you want to test that the links you are adding to the description/URL field are working, just output them somewhere that you can see them like in a “p” or “span” tag. Once you confirm that what is going into the backend of NextGen gallery is appearing in the front end, then you can add in the appropriate bits of markup to build the gallery the way you want it.

    If you’re still having issues, you can try pasting you code via PasteBin or just email it to me as a text file.

    Tim.

  3. Jessica says:

    Thank you so much for this tut! Your instructions were clear, concise, and easy to follow!

    I had been struggling for a few hours to get the thumbnails to link to the page URL instead of the image URL.

    Thanks again!
    Jessica