One of the things some users want to do with NextGEN gallery is to link their single images to a custom URL instead of popping up the viewer. I’ve adapted the method shared by andreask on the Wordpress Support Forums.
I’ve also edited the code for NextGEN’s default TinyMCE pop-up to support this new linking ability.

Files to be edited:
- singlepic-link.php in nextgen-gallery\view
- shortcodes.php in nextgen-gallery\lib
- nggfunctions.php in nextgen-gallery
singlepic-link.php
This is a new template file. Make a copy of singlepic.php in nextgen-gallery\view and rename it to singlepic-link.php.
Line 19:
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->linktitle ?>" <?php echo $image->thumbcode ?> >
to
<a href="<?php echo $link ?>">
shortcodes.php
Line 170:
'template' => ''
to
'template' => '',
'link' => ''
Line 173:
$out = nggSinglePicture($id, $w, $h, $mode, $float, $template, $content);
to
$out = nggSinglePicture($id, $w, $h, $mode, $float, $template, $content, $link);
nggfunctions.php
Line 594:
function nggSinglePicture($imageID, $width = 250, $height = 250, $mode = '', $float = '' , $template = '', $caption = '') {
to
function nggSinglePicture($imageID, $width = 250, $height = 250, $mode = '', $float = '' , $template = '', $caption = '', $link = '') {
Add after Line 649:
$picture->link = $link;
Now you can link your single pictures using the following shortcode without the space between the first bracket and singlepic:
[ singlepic id=1 w=150 h=150 template=link link=http://www.google.com]
The next step is to edit the TinyMCE code so that we can link our single pictures using a nice interface. I for one don’t want to type out the entire shortcode just to link an image. I also fix the floating float= tag when you do not select a floating value in the pop-up.
Files to be edited:
- window.php in nextgen-gallery\admin\tinymce
- tinymce.js in nextgen-gallery\admin\tinymce
window.php
Add after Line 134:
<tr>
<td nowrap="nowrap" valign="top"><?php _e("Link", 'nggallery'); ?></td>
<td><input type="text" style="width: 200px" id="imgLink" name="imgLink" value="http://"/></td>
</tr>
The new field will make the whole layout a little squeezy but we don’t need the extra space at the top of the panel so let’s fix that.
Delete from Lines 38, 66 and 92:
<br />
tinymce.js
Add after Line 54:
var imglink = document.getElementById('imgLink').value;
Replace Line 59 (no space between [ and singlepic):
if (imgeffect == "none")
tagtext = "[ singlepic id=" + singlepicid + " w=" + imgWidth + " h=" + imgHeight + " float=" + imgfloat + "]“;
else
tagtext = “[ singlepic id=" + singlepicid + " w=" + imgWidth + " h=" + imgHeight + " mode=" + imgeffect + " float=" + imgfloat + "]“;
with (remove space between [ and singlepic):
tagtext = "[ singlepic id=" + singlepicid + " w=" + imgWidth + " h=" + imgHeight;if (imgeffect != "none")
tagtext += " mode=" + imgeffect;
if (imgfloat != "")
tagtext += " float=" + imgfloat;
if (imglink != "http://")
tagtext += " template=link link=" + imglink;tagtext += "]";
And now we're done. You can now use the button to insert single pictures with linking or by using the shortcode. Feel to leave a comment if you have any queries.
Credit to andreask with the original idea.

Tomas says:
Hi Mate. I’ve followed your tutorial, but when I insert a link into a link field it won’t copy it in the source code. It will stop after float. When I type it manualy like template=link link=http://www.google.com it works. Any idea where the problem may be? I’ve checked everything three times….
31st August 2009 at 6:37 am
Subby says:
Hi Tomas, which version fo NGG are you using? I believe the creator fixed took our suggestion and implemented it in the latest version.
http://code.google.com/p/nextgen-gallery/source/detail?r=587
See if the latest version works, you won’t even need to edit your files.
31st August 2009 at 8:33 pm