Scotproof

Struan House on the west side of North Uist comprises two self-catering houses and one bed & breakfast, all offering comfortable accommodation with spectacular views of the shallow waters and white sands between Malaglate and the uninhabited island of Vallay. See the new website for more information and to book your stay.

Over on Nice Wee Sites we’ve just launched the Sollas Bookbinding website. This describes the craft of local (North Uist) bookbinder Corinna Krause and gives details of the workshops she runs and how to buy her products. There are loads of pictures arranged into NextGen galleries and using this method to open an entire gallery from a single image.

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.

My posts about the NextGen Gallery plugin for Wordpress are attracting a lot of traffic, so I’ve grouped them in a single category for easier browsing:
www.scotproof.com/category/nextgen

Over on Hebridean Graphics:

In IE7, the left/right rollover arrows in NextGen Smooth Gallery don’t work properly (for me, at least). To fix them, add the bit of code recommended here to the end of your nggsmoothgallery/SmoothGallery/css/jd.gallery.css – that should do the trick. Took me a while to find this, which is why I’m posting it here.

See also my previous post on Smooth Gallery.

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.

Smooth Gallery is a nice little addon for the NextGen gallery, but I had a couple of problems getting it to do what I wanted.

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.

I’m working on a project where I’m using custom fields to display NextGen galleries and slideshows separately from Wordpress’s main page content (it’s an unusual layout – I’ll post a link here once it’s ready for viewing). Searching for help led to info on using custom fields to set parameters for the galleries, which wasn’t what I wanted, and then I found this solution, which almost worked but not quite (it displayed some unwanted text).

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.

I’ve been playing a bit with the NextGen gallery plugin for Wordpress and am very impressed with all that you can do and the various add-ons for making your pictures look pretty. We’ve used it over on niceweesites.com to organise our portfolio and on silversprite.com to display a slideshow in the header.

(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.