We use the NextGEN Gallery plugin for WordPress on several sites and recently looked at extending it to work with MonoSlideshow. So we installed the NextGEN – MonoSlideshow plugin. One thing missing from this latter plugin is the ability to create hyperlinks for each of the images in the gallery that MonoSlideshow presents. The NextGEN Gallery Custom Fields plugin gets you a bit closer but not all the way there – it allows you to create the field for the hyperlink but you will need to do a bit more to pull all the pieces together.
The final step involves a bit of modification to the xml.php file within the NextGEN – MonoSlideshow plugin. See the modified code below. First add the followImageLinks=’true’ attribute in the album configuration on line 43. Create a variable for your link as we have in line 62 which calls the custom field for your hyperlink that you created within the Custom Fields plugin using the nggcf_get_field function. Finally, add your link to the returned array in line 66.
Here is the complete modified xml.php file:
<?php
if(preg_match('#' . basename(__FILE__) . '#', $_SERVER['PHP_SELF'])) { die('You are not allowed to call this page directly.'); }
global $wpdb;
$ngg_options = get_option ('ngg_options');
$options = get_option ('monoslideshow');
$siteurl = get_option ('siteurl');
// get the gallery id
$galleryID = (int) $_GET['gid'];
// check if someone send the preset value
$preset = ( isset($_GET['preset']) ) ? $_GET['preset'] : '';
// get the pictures
if ($galleryID == 0) {
$pictures = $wpdb->get_results("SELECT t.*, tt.* FROM $wpdb->nggallery AS t INNER JOIN $wpdb->nggpictures AS tt ON t.gid = tt.galleryid WHERE tt.exclude != 1 ORDER BY tt.{$ngg_options['galSort']} {$ngg_options['galSortDir']} ");
} else {
$pictures = $wpdb->get_results("SELECT t.*, tt.* FROM $wpdb->nggallery AS t INNER JOIN $wpdb->nggpictures AS tt ON t.gid = tt.galleryid WHERE t.gid = '$galleryID' AND tt.exclude != 1 ORDER BY tt.{$ngg_options['galSort']} {$ngg_options['galSortDir']} ");
}
// read some default options
$delay = (int) $options['delay'];
$randomize = ($options['randomize']) ? 'true' : 'false';
$scaleMode = $options['scaleMode'];
$kenBurnsMode = $options['kenBurnsMode'];
$onAlbumEnd = $options['onAlbumEnd'];
$controls = ($options['controls']) ? 'normal' : 'none';
$backgroundColor = ($options['bgTransparent'] == true) ? 'transparent' : '#' . $options['backgroundColor'];
$displayMode = $options['displayMode'];
$config = false;
//look for a preset file
if ( !empty($preset) )
$config = nggMonoslideshow::read_preset( $preset );
// Create XML output
header('Content-Type: text/xml; charset=' . get_option('blog_charset'), true);
echo '<?xml version="1.0" encoding="' . get_option('blog_charset') . '"?'.'>';
echo "<album>\n";
if ($config === false) {
echo "\t<configuration followImageLinks='true' onAlbumEnd='$onAlbumEnd' fullScreenScaleMode='$scaleMode' scaleMode='$scaleMode' backgroundColor='$backgroundColor' delay='$delay' randomize='$randomize'>\n";echo "\t\t<caption displayMode='$displayMode' />\n";
echo "\t\t<controller type='$controls' />\n";
echo "\t\t<transition kenBurnsMode='$kenBurnsMode' />\n";
echo "\t</configuration>\n";
} else
echo "\t$config\n";
echo "\t<contents>\n";
if (is_array ($pictures)){
foreach ($pictures as $picture) {
$description = htmlspecialchars ( strip_tags( stripslashes( nggGallery::i18n($picture->description) ) ) , ENT_QUOTES );
if (!empty($picture->alttext))
$title = stripslashes( htmlspecialchars (nggGallery::i18n($picture->alttext) , ENT_QUOTES) );
else
$title = $picture->filename;
$link = nggcf_get_field($picture->pid, 'ImageLinksTo'); $path = $siteurl . '/' . $picture->path . '/' . $picture->filename;
$thumbnail = $siteurl . '/' . $picture->path . '/thumbs/thumbs_' . $picture->filename;
echo "\t\t<image id='$picture->pid' source='$path' title='$title' link='$link' description='$description' thumbnail='$thumbnail' />\n"; }
}
echo " </contents>\n";
echo "</album>\n";
?>
Step-by-step Instructions
1. Install the NextGen Gallery plugin. Create a gallery.
2. Install the NextGen – MonoSlideshow plugin.
3. Install the NextGEN Gallery Custom Fields plugin
4. Add a custom field to the NGG Custom Fields plugin. Click on NGG Custom Fields > Image Custom Fields. Add a field called ImageLinksTo. Check the checkbox to include the field in your gallery or galleries. Field type is text input.
5. Replace the [wordpress dir]/wp-content/plugins/nextgen-monoslideshow/xml.php file contents with the code that we provide above. Upload via FTP.
6. Go back to your NGG custom gallery and edit it. Add URLs to your ImageLinksTo field. See graphic.
7. Done. Refresh page and view gallery with clickable images.
