If you’re like me, you love most features of the NextGen Gallery WordPress plugin. Most. You also probably think that there are several features missing from the plugin. One such “missing” feature is the lack of a unique URL (other than the direct image path) for a single image. And if you don’t have a unique URL for each image, how can you share a link to that specific image across your social networks? I’ve worked out a way to achieve this without modifying the core NextGen Gallery plugin files.
Since the documentation on this plugin is pretty scarce, it can be difficult to figure out how to do something. So forgive me if there is a better/existing way to do this with the plugin as-is.
Here we go.
Getting Started
First things first. Go download a copy of the NextGen Gallery plugin from the repository and install it in WordPress. Next, you’ll need to make a new folder in your theme directory named “nggallery.” Now you need to copy “gallery.php” and “singlepic.php” from plugins>nextgen-gallery>view and paste it in the “nggallery” folder you just made. Also you’ll need to set up a gallery with a few photos so we have something to work with.
Next we need to make a page template that is going to serve our single image to the user. I named my template “Single Image.” Then go add a new page, make note of the page ID and set the page to use our new page template. (If you need a refresher on creating page templates, check out Pages in the Codex). We’ll add some more content to our page template in a little bit.
Edit Gallery.php
Now open up “gallery.php” (in your theme folder>nggallery) and we’re going to add a link at the end of the image caption. Line 42 should read:
thumbcode ?> >Change that line to read:
Share Image" >Replace “pageID” with the ID of the page using the “Single Image” template we created. Notice the “<” sequences, you need to use these for the greater than, less than, and quote characters, otherwise they’ll break the <a> tag we’re working within. The “?pid=<?php echo $image->pid;?>” bit is what pulls the image id and adds it to the url of the “Share Image” link so we can access it from our “Single Image” page.
Edit Single Image Page Template
Now it’s time to edit the “Single Image” page template that we created earlier. Where you put the following code depends on the structure of your site but I just put this code inside my “content” div. The first thing we need to do is use $_GET to grab the pid value from the URL we sent from gallery.php.
$pid = $_GET["pid"];
Next, since the only thing we should ever be getting here is a number, let’s sanitize the value to make sure nobody is trying to inject any php code into the site. This line should be sufficient enough:
$pid = ereg_replace("[^0-9]", "", $pid);Now we need to make sure that the picture ID we have is valid. We’ll do this by checking the output of NextGen Gallery’s [singlepic] shortcode.
$shortcode_output = do_shortcode('[singlepic id="' . $pid . '" w="" h=""]');
if ($shortcode_output=="[SinglePic not found]"){
// Some error message because that picture ID doesn't exist.
}else {
echo $shortcode_output;
}Since the [singlepic] shortcode always returns the string “[SinglePic not found]” we can check to see if the shortcode output equals that string and serve the user an error message. If it doesn’t equal that string that means the picture ID is valid and we’ll go ahead and echo the result of the do_shortcode function.
So now if you view your gallery and launch the slideshow you should see the “Share Image” link in the caption. Clicking that link should open a URL something like:
http://www.brettshumaker.wpengine.com/images/?pid=3Great. Now let’s add the Facebook ‘like’ and Twitter buttons.
Add Facebook and Twitter Buttons
Open up “singlepic.php” (from your theme folder>nggallery) and look for the line:
Just below that line, add the following code necessary for the Facebook ‘like’ button:
The “appID=” will need to have your appID from Facebook (https://developers.facebook.com/). Next I set up
to place the social share buttons. Now to get the URL I created to play nice with Facebook, I had to add “index.php” before “?pid=3.” For some reason, Facebook kept dropping ?pid=3 and I was left with linking “http://www.brettshumaker.wpengine.com/images/” which is not what we want.
I used “the_permalink()” to start off the URL; then added “index.php?pid=” and echoed the picture id with “$image->pid” to complete it. You can change the data-layout, data-width, and data-show-faces values to fit your site, these are the ones that worked for me. That wraps up the Facebook ‘like’ button. On to Twitter, which was much easier:
Tweet
!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");There are a lot of other options you can add to a Twitter button but I won’t go into that here.
That’s About It
One other side-note: If you’re curious to see what the NextGen Gallery $image object actually holds you can use “print_r($image);” and it will spew out every attribute contained in $image.
I think that wraps it up. If I’ve left anything out or you see a better way to do something, let me know!
Edit
Here is the full code for the ‘single-image.php’ Single Image page template:
I got lost at the Edit Single Image Page Template could you post a example page with all the code in it. Thanks very much!
Humpty: I’ve edited the post to include the full code for single-image.php page template. Let me know if you have any other questions.
Any ideas on adding a Facebook Like button to a thickbox overlay per image?
That’s something I didn’t try only because the client didn’t request that functionality. However, I think it would be tricky because anything that shows up as a ‘caption’ in the thickbox overlay *must* be put into the ‘title’ attribute of the link. Theoretically, you could hard code the “.fb-like” div above into the title attribute, but Facebook does run some Javascript code on that div class. So I don’t know how stable that would be.
I guess if I loaded the caption with a set placeholder phrase I could then replace it with the Facebook code using Javascript, providing it fired after thickbox.
Yeah, I think that should work as long as there’s some kind of ‘afterLoad’ hook for thickbox.
Hello,
Thanks for this tuto !
i don’t understand where i do the redirection for single-image.php…Â
Â
i changed the url to <?php echo the_permalink() ?>index.php?pid=<?php echo $image->pid ?> like : http://www.cisdesigns.fr/clubs-de-golf/?pid=132 but when the page is loaded, i have the gallery page !
It’s good ! I connected my neurons… and i found the solution. Make a simple page… it’s too easy, shame on me !
Awesome…glad you got it figured out!
Hi . I am trying to get the fb like and twitter buttons in the pop up pics in shutter effect in ngg. Â any ideas?
 @JosephBraun I just switchedÂ
 @JosephBraun I just switched over to the shutter effect on my test install and everything still worked. The “Share Image” text didn’t look very pretty so you may want to tweak the styling, though.
I’ve set this up copying and pasting your code, but my links get output like this:
Â
http://www.mydomain./image-gallery/%3C?php%20echo%20get_page_link(pageID);%20?%3E?pid=%3C?php%20echo%20$image-%3Epid;?%3E
Â
Any idea what I’ve done wrong?
 @zigzagadÂ
 @zigzagad Hey zigzagad, can you post a link to your full code from your “singlepic.php” someplace like pastebin.com? I’ll be able to get a better idea of what happened but it looks like the php code isn’t being parsed.
@bshumaker @zigzagad Hi Brett, I haven’t touched singlepic.phpb yet, the above is the url generated for the ‘share this’ link
 @zigzagad Sorry…I meant ‘gallery.php’
 @bshumaker No problem - http://pastebin.com/LUeCnWnu
 @zigzagad See my edited code for gallery.php above. Apparently I got a little too excited encoding the angle brackets and had encoded the ones around the php tags. Let me know if that fixes things. Thanks!
 @bshumaker Thanks Brett, that did the trick, much appreciated.
 @zigzagad No problem!
Hi Brett – thanks for the tutorial! I unfortunately got stuck at:
Â
“Then go add a new page, make note of the page ID and set the page to use our new page template.”
Â
I went to make a new page, but I wasn’t sure how to actually SET the page to use the new template (I created the single-image.php page using the code you have here).
I am using another wordpress theme (oxygen). Does it mean that I will have to upload gallery.php, single-image.php and singlepic.php to my “themes/oxygen” folder instead of having everything in “themes/nggallery”??
Â
I am sure I am missing something but not sure what –
Â
thanks a ton!
gabstero
Another question about “Edit Gallery.php”. So adding a certain page’s ID there means that this tweak will only work with that particular page ONLY? How about the galleries I have on other pages?
Â
thanks
 @gabstero Hey Gabstero! The way this tweak works is that the page we created that uses the “single image” template basically serves as a sort of ‘utility’ page. Meaning that every gallery you use this technique with will use that page to serve a single, sharable image url. Let me know if that makes sense.
 @bshumaker thanks for the reply, Brett! So I created a “utility page”, using the Single Page template, took that id (278) and placed it in the snippet that goes in the gallery.php (get_page_link(278). Here’s an example of what I am getting: http://photogabi.com/food-culture
I am also using Pintrest for Lightbox plugin. Tried deactivating it, nextgen stops working all together (getting a regular jpeg when I click on the thumbnails). I followed your instructions very closely, but I am not sure what I am doing wrong. The “Food Culture” page doesn’t uses the “single Image” page template.
Any hints of where should I look? Thanks a ton!
 @gabstero Alright, I think I know what the issue is. Zigzagad was having a similar issue and I’ve updated the code that goes into gallery.php see my edit above. The code should now be:
<a href=”<?php echo $image->imageURL ?>” title=”<?php echo $image->description ?>Â <a href="<?php echo get_page_link(pageID); ?>?pid=<?php echo $image->pid;?>">Share Image</a>” <?php echo $image->thumbcode ?> >
Â
Try replacing that and see if that fixes the problem.
 @bshumaker thanks Brett – looks like I broke something. I replaced the gallery snippet with the above code and it does not work. http://photogabi.com/food-culture
Do I need to have a certain nextgen image Effect (shutterm Thickbox, etc.?) thanks again!
 @gabstero Try copy/paste from the code section above in the tutorial…not from my reply.
 @bshumaker Brett – thanks. i did and now I am getting a link to the extent of http://photogabi.com/utility?pid=21 when I click on the share image link. It brings me to an empty page. Looks like it’s the page I created (called utility), which uses the single page template.
Also – do you have a demo of how these buttons look like? I thought the FB and Twitter buttons will show up on the actuall popped up image. Thanks again!
Where I have to put the “div class=fb-like”? I want to show the link just on the bigger image, not below the thumbs. Please Help! ^_^
@HenryMKalango That block of code goes within “singlepic.php†(from your theme folder>nggallery).
@bshumaker I’ve tried to do that, but I Have the same problem in this page (http://kalangoseco.com.br/cobertura-festa-do-preto-com-andre-marques-06-10-2012), don´t show me the icon of facebook just a text Share Image (Compartilhe Imagem in portuguese) and when Click on this link, open a “simple_image” page, but empty, whitout the image that I want to share. If the image appears on the page it solves my problem…
@HenryMKalango Ok. Is your ‘single_image’ page set to use the ‘single_image’ page template?
@bshumaker I Think that’s ok, or I can’t see the mistake (I’m no good whit php) but you can see the code on this pastebin: http://pastebin.com/cGmb1VjH
Ps. I’m using a Elegant them template, it don’t matter right? Thank you for the help!
@HenryMKalango I see that you have the actual template set up correctly but I don’t think you’ve actually set the ‘single_image’ page to use that template in WordPress. Here is the body tag I see when I click on “Compartilhe Imagem” <body class=”page page-id-1460 page-child parent-pageid-11 page-template-default chrome”>. I think the “page-template-default” shows that it’s not set to a particular page template within the WordPress admin.
Â
You’re correct…the theme you’re using should not matter.
Â
Also, you have an unclosed <script> tag right before “</head>
@bshumaker Thanks a lot man! Foolish mistake I’ve commited. It’s ok now, I can see the image when I click on “Compartilhe Imagem” and enter the page whit the phot right on there. The twitter button is ok, but the butto of facebook dont send the right link to my facebook wall ( the link goes whitout – index.php/?pid=XXXX) and because of it, when I click on the post goes to only single_image page, without the picture (whit the text, no picture here).
@HenryMKalango Glad I could help! It looks like you have “<link rel=’canonical’ href=’http://kalangoseco.com.br/single_image’ />” in your header. Also, the lines after “<!– Start AL2FB OGP –>” are specific to Facebook’s OpenGraph and the “og:url” may interfere with this also.
Â
Try removing the “<link rel=’canonical’…” mentioned above first and see if that works. If not…I think that other block of code is coming from the “Add Link to Facebook” plugin.
Â
Let me know what you find out.
@bshumaker I understood. But I removed the only stuff relationed whit canonical in the theme (on the file header.php) but it continues generating that code “link rel=canonical…” In my extensive search I dont find what code is generating it =/. And I deactivate the plugin “add link to facebook”. Do you have Idea where’s the code who generating the canonical stuff in this theme? Thank you again
Â
Ps, I have others plugins that help me a lot, like wordbooker and sharethis, they can interfere too?
@HenryMKalango I’m not sure…I think Yoast’s SEO plugin generates it, though. I suppose it could also be hard coded into your header.php file as well.
@bshumaker I dont have the Yoasts SEO plugin. There are not SEO plugins in this theme. But I cant find the part of the code is generate it. I deactivate the others social plugins, like share this, add link to facebook. The only one remains is wordbooker.
The ET themes bring SEO options on the own menu, and I can choose or not to use canonical in the single, in home, or on category pages. I dont actvate this off course, but I see that thing whit “rel=canonical…” only goes on category and single. Any idea to help please?
@bshumaker I found the solution! Thank you man for the help!
@HenryMKalango Glad you got it figured out! What was the culprit?
@bshumaker Hehehe. I change the (data-href=”<?php echo the_permalink();?>index.php?pid=<?php echo $image->pid;?>”) to data-href=”<?php get_site_url(); ?>” and works fine! The page single_image generate an url whit the $pid of each image, so I just had to pick the url. 🙂
Do I have to do this for every single image? I have a lot of images.
@WOCTXÂ Nope! Once you have the “Single Image” utility page and template made, that one page will be used for all images.
@bshumaker  @WOCTX Ok thank you, now as I am very used to using WordPress and learning how to customizing it to a point. I am very much confused when it comes to doing anything in php, could you check out my website http://photographyby.woctx.com and give me either step by step directions to create this “Single Image” utility page, or provide me with a template to go off of? I have been looking at your post and as you did a great job of explaining, my focus is a bit hard to harness. So something with direct explanation and how to with out all the other content would help I get very easily distracted and need simple. If you can not I understand. Â
Â
Thank you for your time and help
Philip
@WOCTXÂ As long as you have the “Single Image” template file created as I’ve outlined above, all you need to do is create a new, blank page within WordPress and select the “Single Image” template from the drop-down list in the “Page Attributes” section as shown in this screenshot:Â yfrog.com/kh35931538j
Great tutorial mate! I followed every step and worked pretty good. The only issue I have is that now when some clics on an image, I can see the facebook and twitter buttons, but not the prev and next image link. I think the links are still there but in a second line I can’t see. How can I solve this?
@nicowegher Can you post the site you’re having trouble with? Sounds like it might be a CSS issue, though.
@bshumaker  thanks for your help! My site is not online yet, here is an image you can see that prev a next button are not showing up
http://imageshack.us/a/img109/2352/dibujobad.jpg
and here you can see the code of that page https://drive.google.com/0Byu1lp0NJYB2SlZENXhmbkZZLXM?authkey=CI-SzKoE
Hope that helps you to see the problem! Thanks again!
I’ve tried to get this to work with prettyPhoto? Have you tried this before – I can’t seem to get it to work with your current instructions. Please let me know.
@bshumaker Thanks for this tutorial.  I actually used it to get rid of the lightbox effect and go straight to the image view, thus giving me more ad impressions 🙂
@jeremib Awesome! Glad you found it useful!
could you please post links to sites with your plugin working or demos? I’m have difficulty finding actual working examples. Thanks.
@ChrisZarza Hey Chris, one site that I have this working on is http://thatverynextthing.com
Hi, great tutorial! Anyway, I’ve got a problem, just at the beginning: i follow your instruction, so i’ve created a new folder under my theme’s directory, and copied gallery.php and singlepic.php under it, but also after I’ve created the new page template, the link “Share Image” never appears under my thumbs. It’s like the theme doesn’t “see” the new file i’ve copied in it… any suggestions?
thanks in advance!
Hello, nice tutorial.
I have a doubt is this the same process to add comments to each picture??
I ‘ve been looking for a plugin and it looks like there isn’t one.
Thank you.
Followed the tutorial to a T (I believe) and for some reason the single page with template applied shows nothing. Any help?
HI Brett,
I followed you tutorial but couldn’t get to work… I created single-image.php and copied your code entirely. then i created a page “single_image” and linked that page to “Single Image” Template.
Then i replaced the code to gallery.php and singlepic.php by creating a folder(nggallery) in my theme folder.
What i see now is when i click on image i see “Share Image” but not the facebook like button and clicking on Share Image doesn’t share the image in facebook.
Where should i copy the div for facebook like button and i didn’t get why this code is being used in singlepic.php <?php if (is_page(’80’)){?>
Should we use the id of single page here??
Thank you in advanced
[email protected]