Scotproof

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:

<p>'.$picture->description.'</p>

to:

<p>'.html_entity_decode(stripslashes($picture->description)).'</p>

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

Description: text here <a href="http://www.google.co.uk">link here</a>

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

alt="'.$picture->alttext.'"

to each. The lines will now read:

<img src="'.BASE_URL."/".$picture->path."/".$picture->filename.'" class="full"
 alt="'.$picture->alttext.'" />
<img src="'.BASE_URL."/".$picture->path."/thumbs/thumbs_".$picture->filename.'" 
class="thumbnail"  alt="'.$picture->alttext.'" />

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

border: 1px solid;

in line 92.

Over on Nice Wee Sites we recently released the Nice Wee Theme for Wordpress, and it’s just been approved for inclusion in the Wordpress theme directory. It’s loosely based on the design of this site (but nicer) and has a customisable header icon and avatar, allowing you to tailor it to suit the style of your site. View the demo site or download here.

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.

All of the West Beach, Berneray:

Finally, IE6 on my Mac thanks to CrossOver.

(This after too many hours faffing with ies4osx.)

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.