How To Add Custom Fields In NextGEN Gallery To Give Link On Images Of Posts Or Page

Hello Friends, yesterday I was working with best WordPress gallery NEXT GEN Gallery in one project. Next Gen Gallery is the best wordpress gallery.It is having so many features and also it is very easy to customize.NextGEN Gallery is a full integrated Image Gallery plugin for WordPress with a Flash slideshow option.Thought It has so many options in it, I want to integrate it in sidebar and then want link on each picture for particular post, In short I want one more custom field for images uploded in gallery. So below is the steps by which you can add link for every image.
1. Install Next Gen Gallery Plugin.
2. Upload images.
3. Go to Gallery > Options > Effects > Set Javascript Thumbnail Effect to ‘None’.
4. Now install NextGEN Custom Fields Plugin.
5. Go To Main menu ‘NGG Custom Fields’ > Setup Fields.
6. Click on ‘Image Custom Fields’ to create custom fields for image.
7. Add custom field by giving display name and selecting input type as text input(I want text box as input for link, So i select text input as type).
8. Go to Manage gallery and click on one gallery,You will find this added custom field for every image.
9. Now enter value of that text box for every image and click on save changes.
10. Go to Plugins > Editor > Switch to NextGEN Gallery in the Drop down Box > and click on nextgen-gallery/view/gallery.php It is near the bottom of the lists(Take backup before modifying this file.).
11. Replace following code starting from line number 41

<div >
<a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> >
<?php if ( !$image->hidden ) { ?>
<img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> />
<?php } ?>
</a>
</div>


12. With this one

<div class="ngg-gallery-thumbnail" ><a href="<?php echo $image->ngg_custom_fields["img_url"]; ?>" title="<?php echo $image->description ?>"

<?php echo $image->thumbcode ?> >

<img title="<?php echo $image->alttext ?>"

alt="<?php echo $image->alttext ?>" src="<?php echo $image->

thumbnailURL ?>"

<?php echo $image->size ?> /></a>

</div>

13. Dont forget to change custom field name you have created. In my case My custom field which i have created is ‘img_url‘ So just replace your custom field name with your custom field name.
14. We have changed core file of plugin so whenever we upgrade this plugin, these changes will be lost.

  • byron

    does this affect all images? does this affect all galleries? Set Javascript Thumbnail Effect to ‘None’ affect all galleries?

  • does this affect all images? does this affect all galleries? Set Javascript Thumbnail Effect to ‘None’ affect all galleries?

  • Chris

    Great works, but how do you apply only this tips at the concerning page
    because the effect is disabled on all pages…

    Thank in advance

  • now if only i could do this for the slideshow, but the “image” is created as an object in javascript and i haven’t figured out how to access it yet.

    • Jodigazlay

      Have you figured out how to do this yet for the slideshow? I am having the same problem…thanks!

      • yes- hired a freelancer to do it. send me a dm on twitter w/ your email if you’d like a copy. problem is the plugin is getting updated by the developer though so you either have to rename it or remember not to update. i sent it to Alex and maybe one day he will merge it into core.

        • Jodigazlay

          I tried sending you a message on twitter but apparently you need to be following me…I am following you now. My account is under Jodi Gazlay. Thanks

        • I could really use that script for linking images in slideshows to pages if you didn’t mind sharing. Understand if you want to keep it on the d/l but please let me know.

        • Hi Kathy,

          If you have that plugin then you can send it to me. I will put that plugin on my site, So any other person who want same can get it easily.

          Ankur

        • Eddie R

          Kathy would you mind sending me the copy of this nex gen fix for link URLS? Can’t believe it’s so hard..!

          So much appreciate it.

          Eddie

          er777@reyesworld.com

        • Hi Kathy any chance I could get my hands on this?

  • Anna

    Hi, I followed all of the instructions above to a tee, but the image links to the image and not to the link I defined.
    Any idea what went wrong?
    This is the page in question:
    http://madrid-womans-week.com/?page_id=874
    Thanks,
    Anna

  • Tamara

    hi, It worked perfectly!
    but when I want to use captions with the short code: [nggallery id=12 template=caption], the img_url custom field doen’t work anymore. Any clue?
    thanks in advance!

  • Garry

    I just want to thank you. I had a problem with the wordpress upload function and your hack just saved me tons of time. Thanks !

  • superfried

    Hi

    Thanks for posting this. I set-up the custom fileds so I can now insert the url address for each image. However, when I now go to edit the php for the nextgen gallery, it says that the only active file is ‘nextgen-gallery/nggallery.php’ and when I went to the file suggested ‘nextgen-gallery/view/gallery.php’ there was no exact match for the code you suggested I should replace in the file.

    Consequently I am wondering if I have changed something in the settings to make it switch which php file it it using. And perhaps the plugin has been updated since this post?

    Any help on this would be great.

  • OMG That was so pro it hurts. I love it. Thanks so much!

    For the latest version of NextGen, they use a new `foreach`loop to display the thumbnail links, so starting just after the ForEach ( $images as image ) line…. this:

    <div id="ngg-image-pid ?>” class=”ngg-gallery-thumbnail-box” style ?> >

    <a href="imageURL ?>” title=”description ?>” thumbcode ?> >

    hidden ) { ?>

    <img title="alttext ?>” alt=”alttext ?>” src=”thumbnailURL ?>” size ?> />

    needs to be replaced with this:

    <div id="ngg-image-pid ?>” class=”ngg-gallery-thumbnail-box” style ?> >

    <a href="ngg_custom_fields[“img_url”]; ?>” title=”description ?>”

    thumbcode ?> >

    hidden ) { ?>

    <img title="alttext ?>” alt=”alttext ?>” src=”thumbnailURL ?>”

    size ?> />

    Instead of the code provided above, in the original post…

    Hope that helps!

    • Sarahnw

      Thank, @hackingethics:disqus and @ryzeonline:disqus !  It’s really crazy how a simple gallery of thumbnails that each link to a different page in WP does not exist.  I got your code working by adding the custom fields, but I could not understand Jason’s update.  Is that why my site now looks like this (image thumnails are in an L)?  The links do work though (yay!). http://robbinamisilverberg.com/newsite/artwork/editions/

  • Filipe

    how can I have it so I can choose between if I want to open with lightbox or just link it to a page I want to be able to have both option thanks

  • mywildlove

    i love you so much!!!! thanks :)

  • As128306

    im confused on step 9…enter value?

  • Edward

    How can I add this to a widget??

  • Anonymous

    There’s a lot of explanation ’bout issue on the web, but this one is the best

  • flag

    Can you tell me how to do this for NextGen Smooth Gallery? Step 11 & 12

  • aleks

    hello! do you know any workarounds for the latest version of nextgen? There is no gallery.php file in it, only nggallery.php, and it does not contain the code that I need to replace. thank you so much!

    • Cord Slatton

      It would be great to get this question answered as this is a great but outdated tutorial.