NextGEN Gallery: Linking single images

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.

nextgen-tinymce

Files to be edited:

  1. singlepic-link.php in nextgen-gallery\view
  2. shortcodes.php in nextgen-gallery\lib
  3. 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:

  1. window.php in nextgen-gallery\admin\tinymce
  2. 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.

6 thoughts on “NextGEN Gallery: Linking single images

  1. 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….

Leave a Reply