Wednesday, December 21, 2011

How to Add an image link to a Nivo Slider using Next Gen Gallery for Wordpress

This setup is for when you need to use a custom field say a Link for your Next Gen Gallery images while viewing the images in a Nivo Slider. In particular I am using the Easy Nivo Slider.

First get your gallery setup with all of your images. Next go get the Next Gen Gallery Custom Fields . Once the plugin is installed add a new field called "link", now each of your images will have a link field in the gallery manager. Fill out a link for each.

Next in the Easy Nivo Slider get that plugged into an article or in one of your templates. Once that is done and the slideshow is running at the dimensions that you need. Your ready to add the custom fields to the output.

The Custom fields in the Next Gen gallery are not called in the Easy Nivo Slider so we will need to use some functions to get the particular field.

Open up the file plugins/easy-nivo-slider/nextgen/list-images.php

You should find the php code that displays the image tag around 185.

echo '<img src="'.$image->imageURL.'" '. $image_description.$size.' border="0" />';

Just before that code we are going to add the php to output our new custom link field.
We will use the function from the Next Gen Gallery Custom Fields functions.php file called nggcf_get_field. It takes 2 parameters ('PHOTO ID','CUSTOM FIELD NAME')

//get the field value from the Next Gen Gallery Custom Fields using the photo id
  $linkval= nggcf_get_field($result->pid,'link');
  if($linkval !='')
     echo "<a href=\"" . $linkval . "\">";

So thats it now you have outputted your custom field of link before the image is ouput. I would also reccomend closing the a tag after the image is displayed. Here is the full snippet.
//codepyro hack using the next gen gallery custom fields to get  the custom field of link for each photo
              $linkval= nggcf_get_field($result->pid,'link');
             if($linkval !='')
               echo "<a href=\"" . $linkval . "\">";

            // Output the image
            // Note that this outputs the original nextgen image, not the resized one.  need to figure out how
            // to get that one, if it exists

            echo '<img src="'.$image->imageURL.'" '. $image_description . $size .' border="0" />';

             if($linkval !='')
                 echo '</a>';

Stumble Upon CodePyro

1 comment:

Camerloon said...

Thanks! I’ve been trying to get nextgen images to link to outside pages, and the key was using the Custom Fields plugin. Thanks for the nudge I needed to get it all working properly!

Post a Comment