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:
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.