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/