Easy Embed NGG Slideshow in Wordpress Template

I have a site where we want to add a NextGen Gallery slideshow into a page template only for certain pages. The slideshow will appear outside of the loop just above the main content blocks. In order to make it totally customizable from page to page I'm adding the ability to use a Custom Field value to select which gallery to display. This template design calls for a full-width slideshow that expands/contracts to the size of the browser and scales responsively.

Challenges:

  1. Make customized version of page.php for those pages
  2. Get the custom field value from outside of the Wordpress loop
  3. Test that you're actually receiving a value then add the slideshow div to the page
  4. Add the NGG shortcode inside of that div with your gallery ID as an attribute
  5. NGG slideshow did not respond to resizing as I wanted it to. Add some JS to correct the proportion of the slider

What I'm using:

So first step was to make the custom page template. I just copied page.php with a new filename and updated the comment at the top:

<?php
/**
 * Template Name: Slideshow with Sidebar
 *
 * Template for displaying a page with sidebar and NGG slideshow
 *
 * @package redacted
 */

Next I added the php to get the custom field and put it together with the shortcode for the slideshow:

<?php
global $wp_query;
$postid = $wp_query->post->ID;
$slideID = get_post_meta($postid, 'slider_id', true); // set the variable $slideID to the value of the slider_id custom field.
if (isset ($slideID) && !empty ($slideID)) { // make sure that variable is set and not empty.
echo('<div class="pageSlider">');
//echo ($slideID); I had the custom field value echoing out to the display for testing purposes. 
/*if (empty($slideID)) {
echo 'empty'; //also for testing purposes
}*/ 
echo do_shortcode('[ngg_images gallery_ids="'.$slideID.'" display_type="photocrati-nextgen_basic_slideshow" width="1500" height="338"]'); // here's the ngg shortcode with $slideID concatenated in where the gallery ids go
echo('</div>');
}
wp_reset_query();

I got all that set with a populated gallery and tested it out. The settings in Gallery Settings have values for maximum width and height. It turns out that maximum height ends up being minimum height. Fix for that next. I put the maximum height to 2500 and left minimum at 400. On my screen the width ended up being 1663 wide and at 400 deep the images I was using worked OK. When I scaled my window down and refreshed I got this huge gap below the slideshow that didn't look great. I searched for a solution and found this support post. One of many unanswered support requests the Internet is lousy with. I figured I could solve it with javascript so I added this to my theme's app.js file:

// fix NGG slideshow max-height junk
if (jQuery('.pageSlider').length > 0) {
var goodRatio = jQuery(window).width() / 4.434; // 4.434 = my slide image file actual width divided by height. Divide my window width by that and get the proportionate height.
jQuery('.ngg-slideshow').css('max-height', goodRatio+'px'); // set the max-height on the slideshow
jQuery(window).on('resize', function() { // this is probably some messy verbosity but I wanted to quickly accomodate a window resize. I should probably refactor into a function and just call it again here.
var goodRatio = jQuery(window).width() / 4.434;
jQuery('.ngg-slideshow').css('max-height', goodRatio+'px');
});
}

It works great! I have to see how it behaves on mobile still but so far the result is what I was looking for.

Any questions or comments feel free to email me or use the form below.

Add new comment