I went on Corinna’s box-making workshop the other day. She’s an excellent teacher and I recommend it or the bookbinding workshop if you get the chance.

A feature of NextGen Smooth Gallery is the “info panes” that slide up at the bottom of pictures, containing text entered in NextGen’s “Description” boxes. These descriptions can be enabled to use HTML, for example to include a hyperlink in the description or to make a word or phrase bold, by editing line 98 in nggsmoothgallery/SmoothGallery/nggSmoothSharedFunctions.php from:

to:

HTML entered in a picture’s description box will now be recognised, eg

Note that the “Embed links” box in the Smooth Gallery settings does not need to be ticked.

Thanks to Hubba for setting me on the right track with this!

Next, to get rid of some HTML validation errors, we need to add ALT tags to the images. To do this, fill in the “Alt & Title Text” box in NextGen for each picture and, in the same file (nggsmoothgallery/SmoothGallery/nggSmoothSharedFunctions.php), edit lines 100 and 101, adding

to each. The lines will now read:

There’s also a picture border lurking in this file which, if you want, can be removed by deleting

in line 92.

First of all I got the error message “Sorry, NextGEN Smooth Gallery works only in Combination with NextGEN Gallery”. To solve this, I renamed the nextgen-smooth-gallery folder to nggsmoothgallery and the plugin activated no bother.

Then I couldn’t find the admin panel for the gallery in Wordpress. It turned out to be in the Settings area, rather than the Gallery area. Duh.

Finally, my images were displaying with a black border and background and I wanted to change this to white. To do this, look in nggsmoothgallery/SmoothGallery/css/jd.gallery.css and change instances of #000 to #FFF (or whatever your preferred colour is).

And I guess you could also customise the arrows by uploading your own images to nggsmoothgallery/SmoothGallery/css/img, replacing fleche1.gif, fleche1.png, fleche2.gif and fleche2.png.

Now if I could just work out how to change the colour of the info pane…

Update: The info pane properties can be changed in the same jd.gallery.css file. For .jdGallery .slideInfoZone, change “background” from #333 to your chosen colour – simple as that.

Here’s how I eventually did it:

Install and activate the NextGen plugin. Create a gallery, add images and configure the options. Full instructions here: http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/.

Then:

1. On the page on which you want the gallery to be displayed, create a custom field called gallery and, in the value box, enter gallery=1 (enclosed in square brackets!) or slideshow=1,560,280 (choose your own parameters) or whichever tag you want (polaroid, singlepic, album – see the gallery plugin page for options). Click update.
2. In your theme’s page.php file (or whichever template file is relevant to your needs – I’m using pages), insert the following in the place where you want the gallery to appear:
   <?php $gallery = get_post_meta($post->ID, ‘gallery’, true); ?>
   <?php
   $gal = $gallery;
   $gal = apply_filters(‘the_content’, $gal );
   echo $gal;
   ?>
3. Add the following to your theme’s stylesheet:
   .post-meta {
   list-style-type: none;
   }

   .post-meta-key {
   display: none;
   }

4. Play with the stylesheet and template file further to position your gallery where you want it. I created a “picturebox” div to contain mine.
5. Note that you can now display different galleries on different pages by changing each page’s “gallery” custom field value.

(Edit: Silversprite has now changed theme.)

The NextGen forums are currently closed and it took me ages to find the information I was looking for yesterday, so while it’s fresh in my mind, here are some notes on how to incorporate a NextGen slideshow into the header of a Wordpress site.

Install and activate the NextGen plugin. Create a gallery, add images and configure the options to display a slideshow. Full instructions here: http://alexrabe.boelinger.com/wordpress-plugins/nextgen-gallery/.

Then:

1. Temporarily insert the NexGen widget slideshow into your sidebar (ensuring width and height match those required for your header).
2. Look at your website in a browser and view the code to find the section relating to the slideshow.
3. Remove the slideshow widget from the sidebar.
4. Copy the relevant code to your theme’s header.php file. It should look something like this:

   <div id="header">
   
   	<div class="ngg-widget-slideshow" id="ngg_widget_slideshow1"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see the slideshow.</div>
   	<script type="text/javascript" defer="defer">
   	<!--
   	//<![CDATA[
   		var sbsl = new SWFObject("http://www.yoursite.com/wp-content/plugins/nextgen-gallery/imagerotator.swf", "ngg_slideshow1", "780", "200", "7", "#FFFFFF");
   		sbsl.addParam("wmode", "opaque");
   		sbsl.addVariable("file", "http://www.yoursite.com/wp-content/plugins/nextgen-gallery/nggextractXML.php?gid=1");
   		sbsl.addVariable("linkfromdisplay", "false");
   		sbsl.addVariable("shownavigation", "false");
   		sbsl.addVariable("shuffle", "false");
   		sbsl.addVariable("showicons", "false");
   		sbsl.addVariable("overstretch", "true");
   		sbsl.addVariable("backcolor", "0xFFFFFF");
   		sbsl.addVariable("frontcolor", "0xFFFFFF");
   		sbsl.addVariable("lightcolor", "0xCC0000");
   		sbsl.addVariable("screencolor", "0xFFFFFF");
   		sbsl.addVariable("rotatetime", "10");
   		sbsl.addVariable("transition", "lines");
   		sbsl.addVariable("width", "780");
   		sbsl.addVariable("height", "200");
   		sbsl.write("ngg_widget_slideshow1");
   	//]]>
   	-->
   	</script>
   

5. Adjust your theme’s stylesheet and header.php as necessary, so everything looks nice.