Here is how to link NextGen Gallery images to a page or post using WP Shopping Cart plugin for WordPress. This plugin is also referred to as WP Simple Paypal Shopping Cart. You can download the plugin here. I was having trouble with the NextGen Gallery plugin with WP Shopping Cart integration and having each picture link to a specific page or post in WordPress. I stumbled upon this blog that helped me figure out how to ‘hack’ the gallery-wp_eStore.php, supplied by WP Shopping Cart plugin. Here’s how:
1. You first need to disable the Javascript Thumbnail effect. Login to your Dashboard and go to Gallery > Options > Effects > Set Javascript Thumbnail effect to “None”.
2. If you already have the NextGen Custom Fields plugin installed, move to Step 3.
Install NextGen Custom Fields plugin. If you don’t already have this installed, here’s how: Go to your Dashboard > Plugins > Add New and in the search area type in “nextgen custom fields”.
In the search results, the first entry should be the NextGen Custom Fields plugin. Click “Install Now”. You will get a pop-up that says “Are you sure you want to install this plugin?” — click Yes. On the resulting page, click Active Plugin. You now have NextGen Custom Fields plugin installed.
3. Next we need to create a new custom field for images. Go to your Dashboard > NGG Custom Fields > Setup Fields. Click on “Image Custom Fields”. If you don’t already have a gallery or image uploaded, you need to do this first and come back to this step. Next, type in “Link” (without quotes) for Display Name and choose which galleries you want to create fields for. Choose “Text Input” under Field Type and click “Create Field”.
4. Now go to Dashboard > Gallery > Manage Gallery and click on the gallery you made a custom field for. Find the column that we named “Link” to the far right. Input links to the pages/posts/other sites you want your images to link to in the text box.
4.5 If you aren’t comfortable with changing the code yourself, you can just download the modified file that I have ‘hacked’ here. Simply unzip the file and upload it to “wp-content/plugins/nextgen-gallery/view” and move on to step 8. If you are a do-it-yourself kind of person, move on to the next step and I will show you how to edit your code manually.
5. Download the WP eStore template file for NextGen gallery to display your shop here. Unzip the file and open it in the text editor of your choice (Notepad works great). Find this block in the code contained under <!– Thumbnails –>:
<div class=”ngg-gallery-thumbnail” ><a href=”<?php echo $image->imageURL ?>” title=”" <?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><span><?php echo $image->caption ?></span></div>
6. Change the code to the following:
<div class=”ngg-gallery-thumbnail” >
<a href=”<?php echo $image->ngg_custom_fields["Link"]; ?>” title=”" <?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>
<span><?php echo $image->caption ?></span>
</div>
This basically replaces imageURL with ngg_custom_fields["Link"] so that the image points to the link of the URL in your custom field(s). Save your file.
**Note** You can assign any name of your choice for the value: ngg_custom_fields["Link"]. Just keep in mind that “Link” must match the custom field you created.
7. Upload the file to this folder: wp-content/plugins/nextgen-gallery/view
8. To display your gallery, go to a specific page or post and type in — with regard to which id number of the gallery you want to display. For example:
Specifically, the ID number of your gallery corresponds to the gallery you want to display. This will display the gallery of your choice using the template we just modified. It is case-sensitive so make sure you capitalize the “S” in eStore.
Now, you have a fully operational gallery with links to URLs for your pictures! Here is an example of how you could use WP Shopping Cart in conjunction with your newly modified file:
Here is an example of a fully functional eStore.
If you have any questions feel free to ask in the comments below.
