Using NextGen to Power an Animated WordPress Header

I’m annoyed this hadn’t occured to me before today despite having used WordPress and the NextGen Gallery plugin for years now! I was just about to knock together a custom flash header for a wordpress site and client who wanted a few banner images rotating to liven up his site when I realised it might be possible to do it easier with NextGen AND give the client the ability to change images himself directly from the wordpress admin.

Here’s how to do it:

With a recent version of standalone WordPress and the NextGen Gallery plugin both installed and activated and using a HTML editor like Dreamweaver, try to locate the lines/div’s in your WordPress template’s Header.php file or Stylesheet that control the template’s banner image sizing and position. Inside this div replace the existing image code with the following NextGen php hard code and upload to the server:

<?php echo do_shortcode('
This slideshow requires JavaScript.
'); ?>

Replace “Gallery not found” with “slideshow id=x” where “x” is the ID of the gallery/slideshow you wish to display.

If you just want to display the slideshow on the home page, use this code:

<?php if ( is_front_page() ) {
echo do_shortcode('
This slideshow requires JavaScript.
');
}
?>

This gallery should be created beforehand using images that match precisely the dimensions of the template’s existing banner image.

Next, go to the NextGen options in wordpress and specify slideshow dimensions that match the width and height of the template banner image. You can specify other options here such as order, image display time, next/previous controls, etc..

That’s it! Refresh your front end and hopefully you now have a flash banner!

Here’s an example of it working – www.Gaelink.ie

Leon.