How to Link Images in a NextGen Gallery Album to a Post or Page

Three years ago I wrote a couple of article about how an images in a NextGen Gallery could be linked to a post or a page using the NextGen Custom Fields plugin. And last week I provided instructions about how moving the NextGen files that you have modified to your theme directory would allow you to upgrade NextGen Gallery without losing any of your customizations.

Recently, I was asked to link images in a NextGen album to a post or page. An album is a collection of galleries. As the instructions are slightly different, I decided to add another NextGen Gallery tutorial.

If the NextGen Custom Fields plugin has not been installed, that is the first thing that you need to do. NextGen Gallery must already be installed and you must already have galleries set-up. Since we are using albums in this tutorial, you should have an album set up as well.

Instructions

1. Install and activate NextGen Custom Fields.
2. 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.
3. You will now have a NGG Custom Fields menu in the left navigation in the WordPress Admin below settings. Click on it.
4. You can choose to create a custom field for individual images or for an entire gallery. Since we want to link images in an album select the 2nd choice – Gallery Custom Fields.
   
   
5. On the next screen you will want to name the custom field, which I will call Link, select the Gallery in which you will be using it and chose the type of field. Text will almost always be fine for the type of field.
   
   
6. Go to the Gallery that you added the new field to under Gallery > Manage Gallery > Click on the name of the Gallery.
7. There will be a new field area called Custom Columns before the list of images in the Gallery and it will have the name of the field next to the input area. The URL added to this field will be where the gallery image in an album will link to. Using my earlier instructions, each image in a gallery can also link to a specific location.
   
   
   
8. Once you have filled in the URL in the new field, you will need to modify a NextGen Gallery template so that the new link works. Go to Plugins > Editor > Select Plugin to Edit Dropdown Box > NextGen Gallery > nextgen-gallery/view/album-extend.php
9. Look for the following block of code.

   <div class="ngg-album">
   		<div class="ngg-albumtitle"><a href="<?php echo $gallery->pagelink ?>"><?php echo $gallery->title ?></a></div>
   			<div class="ngg-albumcontent">
   				<div class="ngg-thumbnail">
   					<a href="<?php echo $gallery->pagelink ?>"><img class="Thumb" alt="<?php echo $gallery->title ?>" src="<?php echo $gallery->previewurl ?>"/></a>
   				</div>
   				<div class="ngg-description">
   				<p><?php echo $gallery->galdesc ?></p>
   				<?php if ($gallery->counter > 0) : ?>
   				<p><strong><?php echo $gallery->counter ?></strong> <?php _e('Photos', 'nggallery') ?></p>
   				<?php endif; ?>
   			</div>
   		</div>
   	</div>

10. Replace it with

    <div class="ngg-album">
    		<div class="ngg-albumtitle"><a href="<?php echo nggcf_get_gallery_field($gallery->gid, "Link"); ?>"><?php echo $gallery->title ?></a></div>
    
    			<div class="ngg-albumcontent">
    				<div class="ngg-thumbnail">
    					<a href="<?php echo nggcf_get_gallery_field($gallery->gid, "Link"); ?>"><img class="Thumb" alt="<?php echo $gallery->title ?>" src="<?php echo $gallery->previewurl ?>"/></a>
    				</div>
    				<div class="ngg-description">
    				<p><?php echo $gallery->galdesc ?></p>
    				<?php if ($gallery->counter > 0) : ?>
    				<p><strong><?php echo $gallery->counter ?></strong> <?php _e('Photos', 'nggallery') ?></p>
    				<?php endif; ?>
    
    </div>
    </div>
    </div>

11. If you called the new field that you create in NextGen Custom Fields something other than link change “Link” in the above code to the name of your field. There are two locations that it needs to be changed.
12. In order to update NextGen Gallery in the future and not lose these customizations, please follow the instructions in my article, How to Upgrade NextGen Gallery for WordPress Without Losing Customizations.

If you would like to hire me to assist with your NextGen Gallery customizations, please contact me for a quote.

photo credit: chanceprojects