**UPDATE: I have provided instructions for how to link a NextGen Gallery image to a post or page in the 2.0+ version of the plugin.
If you’ve ever wanted to add additional information about the images in your NextGEN Gallery, you can do so with the NextGen Custom Fields Plugin.
This plugin will add additional fields that you define to each image in the gallery.
The downside of this plugin, is that you have to be comfortable editing the template files. To actually display the data in your new custom field, you need to edit one or two of the templates that are included with the NextGEN Gallery plugin.
And the plugin takes a little bit of extra work to install and activate – it’s not quite as easy as most plugins. But if you want to add additional information in your image gallery, it is worth the extra work.
Note: You must already have NextGEN Gallery installed and Galleries within NextGEN.
Installation
- Upload the plugin to your plugins directory and activate.
- Put the following URL in the address bar in your web browser. http://www.example.com/wp-admin/admin.php?page=nextgen-gallery-custom-fields/ngg-custom-fields.php&mode=upgrade Make sure you change www.example.com to your own domain name. This seems to be a 2nd level of activation for the plugin.
- You will now have a NGG Custom Fields menu in the left navigation in the WordPress Admin.
- Click on Setup Fields
- You can choose to create a custom field for individual images or for an entire gallery. I am going to continue with creating them for images.
- Give the custom field a name, tell which galleries it should be associated with, select the type of field and then click on the Create Field button.
- Now that you have created a new custom field, you will want to add data to it. Go to Gallery > Manage Gallery and select a Gallery that you associated a custom field with.
- In the Gallery you will see a new blank field, which is the field that you just created. In mine I have a new field called Link and it is a URL on my site that I want to be associated with the image.
- Fill in the data that you want associated with the image.
Ok, great. Now what?
You’ve created a new custom field for your Next Gen images and filled the field in with data. But now what do you do? How do you get this field to show up?
Well, you have to edit one or two of the NextGen plugin files: nextgen-gallery/view/gallery.php and nextgen-gallery/view/gallery-caption.php The first one must be edited but if you are using captions with the images, the second one must be edited as well.
- For images, add the following code to the template file(s) mentioned above:
<?php echo $image->ngg_custom_fields["Your Field Name Here"]; ?>
- “Your Field Name Here” is what you named the custom field. For example, I named mine Link.
- For Galleries, add the following code to the template file(s) mentioned above:
<?php echo nggcf_get_gallery_field($gallery->ID, "My Gallery Field Name Here"); ?>
- “My Gallery Field Name Here” is what you named the custom field for the gallery.
Now you can’t add the code to just any old spot within the template. I used mine to link each image and image description on my portfolio page to a specific WordPress page on my site.
In my next article, I will show where I placed the code and how this NextGen Custom Fields can be used to link to specific posts or pages on your own site or other locations on the Internet.
photo credit: bengarland
Hi Kim
Great write up on the plugin. I will definitely start pointing people here to get started with it.
Just a heads up that there is a typo in step 1 and 3 of adding the fields to templates. You got the “->” the wrong way around :-)
Any features you would like to see added to the plugin? It’s always good to get feedback from people actually using it as intended!
Shauno
Hi Shauno – Thanks! I’m going to have a part 2 on Wednesday, which actually uses a lot of info you provided in the WordPress forums.
I double checked the code typos that you mentioned against the FAQ for the plugin and I’m not seeing the error.
So far, it does exactly what I want it to do – it’s a great plugin but is definitely not for people who don’t want to or know how to edit template files :-)
Great detailed walkthrough — I like the prescriptive advice.
Hi J.D. – Thanks. I’m glad it’s helpful.
Hey Kim
Just let me know if you have any questions, I would be happy to help. It will be great to have a place to point newbies to the plugin.
The error is in the following places:
<?php echo $image-It is meant to bengg_custom_fields["Your Field Name Here"]; ?>The
->is the wrong way around. It is repeated<?php echo nggcf_get_gallery_field($gallery-Thanks again for the great write up!
Hi Shauno – Thanks! Now I know what I did :-)
Wow, the “greater than” / “less than” sign really messed up my last comment :)
Feel free to delete it
So this would be for like a photo blog?
.-= Dennis Edell´s last blog ..Last Chance! MaxBlogPress Christmas 4 Plugin Package At 75% Off Deal Expires TONIGHT AT MIDNIGHT!! PLUS Something Extra From Me :) =-.
Hi Dennis – It could be. Or for a WordPress site that uses a lot of images. This certainly doesn’t need to be used with the gallery though – it’s a way of adding extra info about the images used with NextGEN Gallery.
I will look into the nexgen thing.
.-= Dennis Edell´s last blog ..Send me your best articles, I’ll send you my best traffic! ;) =-.
Hey there. I’m quite new to Next Gen Gallery, but I do think this tutorial could come in handy for me too. I’m using the plugin to show my artwork, and I have it devided in seperate galleries (or well, I’m going to, since I still actually have to do it) and in my webdesign gallery I would like something along the lines of what you accomplished on your site: preview of design, preview links to page with info about the project. But as I said I’m new to the plugin and I have some issues with it. Maybe you know how to fix it.
On this page: http://eternalised.elvenmysteries.com/artwork/pixel-art/ you can see the thumbnails for my pixel art gallery. The problem is I don’t want thumbnails here, I just want the images to show. They’re all quite small, but differ in size. I can’t just delete the thumbnail system altogether, because I would still like to use it in my other galleries (photos, drawings, etc) just not in pixel art. I tried adjusting the size of the thumbnail so they would be big enough to contain the entire images, but then my images get expanded (like, one image is about 58×169 and when I put max size of thumbnail to 200×200, the image gets really wide and hideous). If you don’t have a clue of how to fix it, you don’t have to bother. I found your tutorial really interesting and just thought you might have a better knowledge of the plugin that I have and might know what I’m doing wrong.
Thanks in advantage.
.-= Morgan´s last blog ..Hello world! =-.
Hi Morgan,
There are a couple of things you could try …
1. Try a different size for the thumbnails and uncheck the ignore aspect ratio box.
2. Create a new template using the ones that come with NextGen as a starting point. You would want to use code from nextgen-gallery/view/gallery.php and nextgen-gallery/view/singlepic.php After creating your template you would make it the template for that gallery page. There is information about creating templates here – http://codex.wordpress.org/Pages#Creating_Your_Own_Page_Templates
3. Upload the images that you want displayed on that page and then use the gallery shortcode to display them rather than NextGen
http://www.kimwoodbridge.com/wordpress-gallery-shortcode-add-a-simple-image-gallery-to-a-post-or-page/
Someone else might have a better solution but that’s all I’ve been able to come up with so far.
Kim…
With my WordPress template… I need to figure out how to use NextGen to display the photos on the page through using Custom Field. The photos need to be placed actually in a specific place because a semi-transparent screen covers/overlaps the photo behind it.
Believe me… I am a newbie at this. I need guidance and assistance.
Hi Therese – I think this article might help you use custom fields with NextGen.
http://www.scotproof.com/inserting-a-nextgen-gallery-or-slideshow-in-a-custom-field/
Hi Kim
Great tutorial! Has been a great help in getting my gallery setup with custom fields.
I have a question however:
I would like to display all artwork with a specific custom field in a widget. Similar to the way the categories widget can display categories.
I.e, I have a custom field titled artist. I would like to display a list of artist names in a widget, and then have each name link to the artwork by that artist.
Any idea how to do this??
Here is my testing site: http://zhoom.com.au/mason/galleries/mason-test-1/
thanks in advance!
Hi Ciaran – Is this a custom field that is part of a post or a custom field for the nextgen plugin?
This article isn’t about widgets so I’m not sure if I will be able to answer the question.
Hi Kim
Thanks for your response. I should have been more specific…And I don’t know why I said widget because I didn’t really mean it!
I am using NGG Custom fields plugin and I got it working followed your instructions on this post, so thanks for that!
I would like to know if I can create a page that displays all pictures that have a certain custom field variable attached, eg artist.
For example, if I have a NGG custom field for artist and one of the artist names is John Smith, I would like to create a page that displays all artwork by John Smith.
Is there a way to do this?
I appreciate your assistance!
.-= Ciaran´s last blog ..Testing Site =-.
Hi Ciaran,
Oh – I see. That would require conditional code that is searching for the content of a a particular custom field. And I have no idea – I’m sure it *can* be done but I wouldn’t know where to start – or at least I haven’t played around with figuring out something like that. I would ask on the WordPress forums for the plugin, if you haven’t already.
Ok, thanks anyway Kim…Great tutorial anyway :)
Hi, I was wondering how to display the field name before the text of the field. i.e.:
Name of gallery: Nice Gallery
Place: Somewhere
Date: Sometime
This is actually what it display:
Nice Gallery
Somewhere
Sometime
Thanks for any help!
I hope you understand what I mean.(Sorry for my english)
Hi Claudio – You would need to add that text to the NextGen gallery.php file manually before the custom fields that you are displaying.
Thanks for your answer. I really don’t know how to do that, this is what I have actually in gallery.php:
<div class="ngg-galleryoverview" id="anchor ?>">
<a href="pagelink ?>">title ?>
description) ?>
ID, "Cliente:"); ?>
ID, "Fecha:"); ?>
ID, "Lugar:"); ?>
How do I should write that text?? I would appreciate any help.
I have like 30 galleries with different custom fields (only text fields), I would like that text to display based on the different text fields for each gallerie.
Thanks again!
Sorry, this is the code:
<div class="ngg-galleryoverview" id="anchor ?>">
<a href="pagelink ?>">title ?>
description) ?>
ID, "Cliente:"); ?>
ID, "Fecha:"); ?>
ID, "Lugar:"); ?>
Sorry for that again, I couldn’t display the code.
Hi Claudio,
Below each image in my gallery I use a custom field that has the name of the site, which is linked.
<a href=”<?php echo $image->ngg_custom_fields[“Link”]; ?>” target=”_blank”><?php echo $image->alttext ?>
If I wanted to have a label for it I would put Site: or whatever at the front of it.
This is going to display in every gallery – if you want different labels in different galleries, you would need to use conditional code, which gets complicated.
Thanks so much for your help!! I really appreciate it.
hi,how if i want to create gallery but all images hosted on other server, is it possible with nextgen gallery ? thanks…
Hi John – As far as I know that can’t be done. The images need to be in the plugin’s gallery folder as part of the WordPress installation. It’s possible a different gallery plugin would handle that.
thanks. how do I make the custom field link work with the nextgen imageflow plugin. it doesn’t work on this. thanks.
Hi Paul – I haven’t worked with the image flow plugin so I don’t know.
Hi Kim, well it has a file called “gallery-imageflow.php” in the plugin’s “view” folder and basically an identical line as the gallery.php file where you are supposed to replace the anchor tag code. The issue is that when I replace it with the custom field code, nothing happens. I thought you might know a way to make the custom field code work in there too, since the hyperlink code looks identical to the main plugin’s code. Just trying to link out from the image flow thumbnails to a youtube video link, and then show that link in a lightbox type effect…
Hi Paul,
I understand that and have been asked about this before – although the file is very similar it works differently and the instructions on this page don’t work with it. If I ever get a chance to work with it, I will write an article. Unfortunately, I don’t have the time to work on editing plugins each time someone asks me about it.
Hi Kim,
Can you tell me where exactly has to go in the gallery-caption.php?
Thanks
Hi James,
This line
<a href=”<?php echo $image->imageURL ?>” title=”<?php echo $image->;description ?>” <?php echo $image->thumbcode ?> >
is changed to
<a href=”<?php echo $image->ngg_custom_fields[“Link”]; ?>” title=”<?php echo $image->description ?>” <?php echo $image->thumbcode ?>
This is in version 1.43 of the plugin. I haven’t checked it in the current version.
hello Kim, I’ve been trying to get this to work but maybe it has something to do with the versions of wordpress, nextgen gallery and nextgen custom fields that needs this to work. I’m using wordpress 3.0.1 and the nextgen custom fields 1.6.2
What were your versions when this worked?
thanks:)
Hi Evie – I’m using version 1.4.3 of NextGen Gallery. I’m sure this still works in the newest version but the code probably goes in a different location. I haven’t updated the plugin recently because I haven’t had time to redo the code.
scratch that! It turns out another person named Deb had the same problem and was in the same boat as I was. Followed her instructions on this blog and it helped. Thanks, Kim and to Deb Kosiba
Thanks for the write up! problem solved! cheers ^_^
Wowwww! What a great tip!
Testing on NextGEN 1.4.3 and working nice!
By the way Kim, I have an album with a couple of galleries, do you know how to display images in original size instead of thumbnails, when clicking/viewing gallery pages?
Hi Federico – Have you looks at Options > Thumbnails? If you change the size of the thumbnails you have to rebuild them Manage Gallery.
Hi, nice writeup.
I am having a bit of a problem getting ngg-custom-fields plugin to work as expected. I wonder if you have you seen the following problem at all?
I have installed the plugin but when I add an “Image custom field” the new field appears next to the Galleries (not next to the image), and if I add one to a Gallery I cant find the field at all !?
I have tried on 2 different winxp pcs with local xampp 1.7.3
and also on a hosted linux install … and get the same effect on both
I am sure I have have followed the install instructions to the letter (there are only 3 steps after all!)
I checked the table wp_nggcf_fields_link after the upgrade step and it appears to add a record correctly for each current gallery.
I am obviously doing something basically wrong as so many people have this plugin working without problem. This plugin would really be a help if I could get it working
Currently trying NextGEN Gallery 1.7.2 & NextGEN Custom Fields 1.1.1
Thanks for any advice
Chris
Just thought I would let you know. I upgraded to NextGEN Custom Fields 1.1.2 and it is now working correctly … great
Chris
Hi Chris – I’m glad it had a simple solution and that you got it sorted out.
Hi Kim, thanks for this tutorial! I am desperately trying to figure out how to add a link to each slideshow image. There was a tutorial on how to add it to Gallery images, but not the slideshow. Is there any way you could tell me how to do that? I would sooooo appreciate it!
Thanks
Jodi
Hi Jodi,
You should take a look at the comments on this post
http://www.kimwoodbridge.com/how-to-link-nextgen-gallery-images-to-an-individual-page-or-post-in-wordpress/
Others have been trying to do the same thing and you might find a solution.
What would I need to add, and where, to the NextGEN Gallery template(s) to have the line “Click the image to return to the gallery” show up at the bottom of every image screen in the image browser? Using NextGEN Version 1.7.4, WP version 3.1.2, Atahualpa theme version 3.6.4.
Thanks a bunch!
(…time to learn a little php I guess)
Julie R
Hi Julie – Do you mean on the gallery page or on the page for the single image? If it’s on the gallery page, you could create a second custom field with that text and link back. For the single image page, the text could be added to the page that is being linked to. If you mean something else, it might be beyond the scope of this article.
Hi Kim,
Thanks for your response. I’m thinking it’s not necessary to use a custom field because it won’t change for each image. I guess what I’m looking for is how to add a line of text to the php template to be displayed in the image browser with every image…for example between the <> navigation below the image.
Hi Julie,
I guess you could add that link to the NextGen template where the code for the custom field would go. Since it would be the same link for each photo, it would show for each image.
Hi,
where abouts in the edit plugin do I add the code to add linking the specific photo to a page on our website?
Thanks very detailed lesson though.
Hi Brooke – The article lists the plugin file and the piece of code that you will want to replace.
I wondered how to get those extra fields to do anything! But I’m curious if you can use this to make the link open like the lightbox or prettyPhoto. You’ve disabled the effect, and when I try to put it back, it doesn’t work.
What I want (not wordpress):
videos working with prettyPhoto
What I got:
only the last two rows have links
Why not use prettyPhoto? Because it doesn’t work on WordPress, either manually or plug in style. Lots and lots of unanswered ‘it doesn’t work’ posts in the forums.
The effect won’t work with NextGen if lightbox is enabled. A different solution would need to be used but I haven’t researched how to do that yet.
Kim, thanks for getting back so quickly.
Well, I putzed so much that I finally got it to work. THANK YOU, thank you, thank you! You’re a lifesaver.
The NGG is a wonderful too, but it seems as though folks OFTENTIMES want it to link to a page.
Anyway, I do get this ..
“a href=”http://www.robertmichaelmorgan.com/?page_id=111″> Scarf 2”
printed out below each image in the gallery. ‘Don’t know why but … HEY! I’ll putz some more!!! LOL At 63, living in Zorritos, Peru, on a Friday night, I don’t have a lot of other things to do. Ha!
~ Michael
Thanks! I hope you get it all sorted out. :-)
Kim:
Just FYI, yes, it all worked out–no extraneous text or code showing up anywhere.
In addition, let me say this …
I was also trying–as others are, too–to link to pages in some galleries and to simply larger photos in other galleries. One guy was talking about installing a second version of NextGen Gallery!!!
Personally, I decided to work WITH the link instead of against it. I simply put the link to the photo in the link box–does that make sense? That is, I put the link in that the program would normally default to and use if I hadn’t overwritten it. So, presto–I link to a page when I want to link to a page and photos when I want to link to photos–all with this simple work-around that you’re provided for folks.
I’m so glad it worked!
Hi Kim,
I have a problem in installing NextGen Custom Fields Plugin. When I add the give url ‘http://www.example.com/wp-admin/admin.php?page=nextgen-gallery-custom-fields/ngg-custom-fields.php&mode=upgrade’ and replace example.com with my site name, i get the following message: “You do not have sufficient permissions to access this page.”
Kindly help
Hi – Take a look at this
http://wordpress.org/support/topic/plugin-nextgen-custom-fields-permission-error-when-installing-custom-fields-running-script
I think it will assist you with the problem you are having.
I’m trying your solution to link the image to a URL using the custom fields plugin. So far it hasn’t worked and I can’t figure out why.
Here is the code in the gallery.php file that was changed per the instructions:
<a href="ngg_custom_fields[“Link”]; ?>” title=”description ?>” thumbcode ?> >
hidden ) { ?>
I’ve added the absolute links to the custom field in the gallery editor as well.
Here is the page in question, carousel at the bottom:
http://championshipenduro.com/wordpress/
Any suggestions? Thanks
Did you ever get this to work? If you followed the instructions, I can’t think of any reason why it isn’t working properly.
After spending way too much time trying to make it work, It is always important to remember, that nearly everything is case-sensitive.
hello,
i am wondering if there is a way to put a description of the image to appear underneath it only when you click it’s thumbnail and it enlarges.
thanks!
debra
kim,
never mind my last post, i figured this one out myself! (it’s a miracle) i put display: none; in the css and that seems to work.
however, my new problem is getting the captions to center align under the image. right now it is left justified.
any help would be greatly appreciated. here is a screen shot of what i mean:
/Users/debrawarshaw/Desktop/Screen shot 2012-04-02 at 8.04.35 PM.png
perhaps i should have added that i am trying to do this in a nextgen gallery.
(see question above)
thanks kim!
Hi. I am using NextGen gallery for image management. And Justified image grid. I´m trying to link images (w/JIG)on a page to different pages.
didnt get this recipe to work. any tips?
Hi,
I have installed both plugins and followed each step which has worked properly, however, I need a gallery to link to each page but when I get to that page, there would be another gallery that on that one I need to open the image, for instance, if you go to http://hpmas.com.serv11.temphostspace.com/proyectos/ you will see the NextGenGallery, clicking the first one will link to its page, which it’s fine, but then, on that page will be another NextGenGallery that I need to click each and open the image with effect, can I do that?
Thank you
Hi all.. followed the instructions and got it all to work nicely.. so thanks for that :) Much appreciated. but mysteriously an extra add to cart button and a peice of linked code has appeared above my gallery images. Can anyone see what ive done there ? Ive been puzzling over it with firebug for a while now and cant work out how to get rid of the button and code… Thanx in advance.
This is the gallery page.