How To Link Next Gen Gallery Images & Titles To Post or Page URL’s

In my last post i showed you how to create a NGG custom field named ‘Link’ to next gen gallery images.

To enable linking from your image titles and to make the images clickable to the links you add in the custom link field, you need to add PHP code to your NGG plugin files.

Change Next Gen Gallery Effects Settings

You’ll also need to change the plugin settings for Next Gen Gallery.

Go to Gallery > Options > Effects and change the Javascript Thumbnail Effect to ‘None’. Click Save Changes.

Edit Next Gen Gallery Templates File

This step involves adding some PHP code to the nextgen-gallery/view/gallery.php file.

You can access this file under Plugins > Editor >

Select plugin to edit: NextGEN Gallery > Click Select > Under Plugin Files Click  nextgen-gallery/view/gallery.php

Or

You can access the nextgen-gallery/view/gallery.php file using FTP or cPanel.

I’m going to use cPanel as it provides a built in editor and also displays line numbers where as the Plugin Editor in WordPress doesn’t and FTP requires you use a text editor like Notepad ++

Note: Always take backup of your files before editing PHP code. I have downloaded a copy of the original, unedited file i am about to edit in cPanel to my desktop so i can easily delete any mistake i make when editing or adding code to the file and upload the original file to start again if needed.

Here’s the location of the Next Gen Gallery Plugin file named ‘gallery.php’ that needs to be edited.

/wp-content/plugins/nextgen-gallery/view/gallery.php

Once you have arrived at this location, click on download and save a copy of this file to your desktop.

Now right click the gallery.php file and click Code Edit. Once the file has opened up scroll down to line 41.

This is what you will see:

<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
</div>

This is what it looks like after the code has been added. You can copy and paste this code over the top of your existing code or simply add the additional code to the correct location within this block of code.

<div class="ngg-gallery-thumbnail"><a title="<?php echo $image->description ?>" href="<?php echo $image->ngg_custom_fields[">thumbcode ?> >
<!--?php if ( !$image--->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" alt="<?php echo $image->alttext ?>" />size ?> />
</a><a href="<?php echo $image->ngg_custom_fields[">
<!--?php echo $image--->alttext ?>
<!--?php } ?-->
</a></div>

Here’s another copy of the edited code displayed in a different format as the Syntex highlighter used above wraps long lines. Note the custom field i created for linking images and titles to URL’s named ‘Link’.

<div class="ngg-gallery-thumbnail" >
<a href="<?php echo $image->ngg_custom_fields["Link"]; ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<a href="<?php echo $image->ngg_custom_fields["Link"]; ?>">
<?php echo $image->alttext ?>
<?php } ?>
</a>
</div>

Don’t forget that the correct file to edit is in the Next Gen Gallery plugin files and NOT the NGG custom fields plugin files.

You could also add a custom field for a description and link that to another post or external URL. Linking Next Gen Gallery thumbnails and images to other posts and pages is easy and generates more page views as well as increasing time on site.

Don’t forget to download the edited gallery.php file after you have finished adding the code as any plugin upgrade will delete the changes you have made to the file.

If you have any problems, send me a note via the contact form and i’ll reply you with the edited file which you can easily upload.

Update: You can now install a plugin to add custom links for images in a gallery. This plugin works for images added to the native WordPress gallery and not NextGen gallery images.