NextGEN Custom Fields Plugin: Add More Information about an Image in the NextGEN Gallery
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
Related posts:
Did you enjoy this article? I can assist you with your WordPress or Facebook project. Contact me and I will provide you with an estimate. You can also connect with me on Facebook or follow me on Twitter.
60 Responses to “NextGEN Custom Fields Plugin: Add More Information about an Image in the NextGEN Gallery”
Trackbacks/Pingbacks
- How to Link NextGEN Gallery Images to an Individual Page or Post in WordPress | (Anti) Social Development
- Piwigo and Zenphoto; a Comparative Review | techtangerine
December 14, 2009 at 12:20 am
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
December 14, 2009 at 3:23 pm
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 :-)
December 14, 2009 at 4:36 pm
Great detailed walkthrough — I like the prescriptive advice.
December 14, 2009 at 8:03 pm
Hi J.D. – Thanks. I’m glad it’s helpful.
December 15, 2009 at 12:44 am
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!
December 16, 2009 at 9:19 am
Hi Shauno – Thanks! Now I know what I did :-)
December 15, 2009 at 12:45 am
Wow, the “greater than” / “less than” sign really messed up my last comment :)
Feel free to delete it
December 15, 2009 at 7:46 am
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 :) =-.
December 16, 2009 at 9:18 am
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.
December 16, 2009 at 11:55 am
I will look into the nexgen thing.
.-= Dennis Edell´s last blog ..Send me your best articles, I’ll send you my best traffic! ;) =-.
December 25, 2009 at 3:49 pm
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! =-.
December 26, 2009 at 1:56 pm
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.
January 8, 2010 at 10:31 am
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.
January 8, 2010 at 4:10 pm
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/
May 23, 2010 at 12:47 am
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!
May 24, 2010 at 6:42 am
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.
May 24, 2010 at 6:41 pm
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 =-.
May 25, 2010 at 9:44 am
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.
May 26, 2010 at 2:14 am
Ok, thanks anyway Kim…Great tutorial anyway :)
July 21, 2010 at 10:52 am
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)
July 21, 2010 at 3:03 pm
Hi Claudio – You would need to add that text to the NextGen gallery.php file manually before the custom fields that you are displaying.
July 21, 2010 at 3:49 pm
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!
July 21, 2010 at 3:51 pm
Sorry, this is the code:
<div class="ngg-galleryoverview" id="anchor ?>">
<a href="pagelink ?>">title ?>
description) ?>
ID, "Cliente:"); ?>
ID, "Fecha:"); ?>
ID, "Lugar:"); ?>
July 21, 2010 at 4:00 pm
Sorry for that again, I couldn’t display the code.
July 22, 2010 at 9:37 am
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.
July 22, 2010 at 12:16 pm
Thanks so much for your help!! I really appreciate it.
July 27, 2010 at 4:53 am
hi,how if i want to create gallery but all images hosted on other server, is it possible with nextgen gallery ? thanks…
July 27, 2010 at 9:25 am
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.
August 15, 2010 at 2:59 pm
thanks. how do I make the custom field link work with the nextgen imageflow plugin. it doesn’t work on this. thanks.
August 16, 2010 at 7:32 am
Hi Paul – I haven’t worked with the image flow plugin so I don’t know.
August 16, 2010 at 12:18 pm
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…
August 18, 2010 at 10:23 am
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.
September 5, 2010 at 2:35 pm
Hi Kim,
Can you tell me where exactly has to go in the gallery-caption.php?
Thanks
james´s last post ..Pregnancy Checklist
September 8, 2010 at 8:56 am
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.
September 21, 2010 at 11:40 am
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:)
September 22, 2010 at 9:15 am
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.
September 22, 2010 at 9:51 am
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
October 14, 2010 at 1:42 am
Thanks for the write up! problem solved! cheers ^_^
November 24, 2010 at 12:14 pm
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?
November 27, 2010 at 7:54 am
Hi Federico – Have you looks at Options > Thumbnails? If you change the size of the thumbnails you have to rebuild them Manage Gallery.
December 18, 2010 at 3:15 am
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
December 19, 2010 at 4:35 am
Just thought I would let you know. I upgraded to NextGEN Custom Fields 1.1.2 and it is now working correctly … great
Chris
December 20, 2010 at 7:11 am
Hi Chris – I’m glad it had a simple solution and that you got it sorted out.
February 2, 2011 at 11:58 am
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
February 2, 2011 at 2:47 pm
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.
May 27, 2011 at 8:27 pm
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
May 31, 2011 at 4:53 pm
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.
May 31, 2011 at 5:13 pm
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.
Julie Russell´s last post ..Hello world!
June 6, 2011 at 5:17 pm
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.
June 6, 2011 at 2:02 am
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.
June 6, 2011 at 5:28 pm
Hi Brooke – The article lists the plugin file and the piece of code that you will want to replace.
August 2, 2011 at 5:41 pm
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.
August 3, 2011 at 8:20 am
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.
August 3, 2011 at 1:28 pm
Kim, thanks for getting back so quickly.
September 2, 2011 at 9:18 pm
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
September 6, 2011 at 1:23 pm
Thanks! I hope you get it all sorted out. :-)
September 6, 2011 at 2:33 pm
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.
September 8, 2011 at 9:52 am
I’m so glad it worked!
December 2, 2011 at 2:40 am
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
December 4, 2011 at 11:00 am
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.