Justin Tadlock

Cleaner WordPress Gallery Plugin

Valid XHTML with integrated Lightbox support

Cleaner Gallery: A WordPress plugin for a valid XHTML WP gallery with Lightbox

Cleaner Gallery gives you complete control over your WordPress galleries. It provides a valid XHTML solution and supports many different Lightbox-type image scripts.

Why I made this plugin

So you upgraded your WordPress blog to the nifty new 2.5 only to use the gallery feature that Matt Mullenweg has been raving about.

Now, you upload that first set of pictures to only find that there are a lot of problems:

  • The gallery shortcode outputs invalid XHTML.
  • It injects style rules in the middle of the page.
  • Even when you specify to use the thumbnail, it only resizes your image, which causes some problems with page load times. (Fixed in WP 2.5.1)
  • You’re happy that you have the new feature but are still a bit unsatisfied.

What does this plugin do?

  • Creates valid XHTML, which I know you all care about.
  • Uses the image that you specify. It doesn’t just resize your very large images.
  • Let’s you control the display of your images through CSS.
  • Adds support for multiple Lightbox-type scripts.

Support for Lightbox-type scripts

The plugin in action

Since I knew this thing would be very different across multiple themes, I decided to test it out on a few. Actually, I only have a few themes that aren’t mine, so I decided to use a few of those. You’ll see examples from:

  • A very popular K2.
  • My favorite Small Potato theme, Peaceful Rush.
  • One of my more recent favorites from Ian Stewart, Theseus.
  • And, a theme I designed for my sister called Colorful Notes.

(Click images for a larger view. Click on the captions to go to the attachment page. The examples are from the alpha version but work nonetheless.)

I think the biggest problem one could run into here is if they’re using a lot of padding or margin on their images. You might have to go into your CSS file and change that if needed.

How to use the plugin

All of the instructions you’ll need for using the plugin are located in the readme.html file of the plugin download. It will guide you through any questions you may have.

If you’re using a version prior to version 0.5, see page 2 of this post for instructions.

Please don’t use my contact page or the comments section below to ask support questions. Use my support forums at Theme Hybrid, which is where I handle all support questions for my WordPress projects.

Things here on page 2 of this post represent an older version of the plugin (pre-0.5).

Instructional stuff for versions before 0.5

Just unzip the cleaner-gallery.zip folder and upload the cleaner-gallery folder to your /wp-content/plugins folder just like any other plugin. Make sure to activate it.

Basically, this plugin just overwrites the gallery code that the WP team gave us. There’s documentation on using the gallery shortcode available.

The gallery comes ready to use Lightbox or Slimbox “out of the box.” It doesn’t actually come packaged with either. I assume that you’ll figure out how to use them. You can easily configure the plugin to use which Lightbox-type JavaScript you’re running. The section is marked off like this in cleaner-gallery.php:

/************************************************
Begin user-defined variables
************************************************/
// Lightbox or Slimbox?
// jQuery Lightbox plugin(s)?
    $a_rel = "lightbox[cleaner-gallery-$post->ID]";
    $a_class = "lightbox";

// Shutter?
    // $a_rel = "lightbox[cleaner-gallery-$post->ID]";
    // $a_class = "shutterset_cleaner-gallery-$post->ID";

// Lytebox?
    // $a_rel = "lytebox[cleaner-gallery-$post->ID]";
    // $a_class = "lytebox";

// Greybox?
    // $a_rel = "gb_imageset[cleaner-gallery-$post->ID]";
    // $a_class = "greybox";

// Thickbox?
    // $a_rel = "clean-gallery-$post->ID";
    // $a_class = "thickbox";

// Shadowbox
    // $a_rel = "shadowbox[cleaner-gallery-$post->ID]";
    // $a_class = "shadowbox";

// Lightview?
    // $a_rel = "gallery[cleaner-gallery-$post->ID]";
    // $a_class = "lightview";

// Link images to attachment page (no Lightbox)
    // $a_rel = false;
    // $a_class = false;

// Show caption link?
    $cap_link = true;

// Always show captions (use title if caption isn't defined)?
    $cap_always = false;
/************************************************
End user-defined variables
************************************************/

You can comment out or uncomment any of the variables to suit your needs. Just stop by the forums if you need help setting any of this up.

You can also auto-load Thickbox by uncommenting these lines:

// Auto load Thickbox (included with WP 2.5)?
    // wp_enqueue_script('thickbox');
    // add_action('wp_head', 'thickbox_css');

A work in progress

I think this plugin has a lot of potential. I haven’t tested it with every available theme or every gallery shortcode option available. That’s for you all to do and let me know how it performs.

I haven’t actually tested this with itemtag, icontag, or captiontag yet. Of course, I assume most users won’t bother using those options anyway.

As with all other releases, keep praise and adoration in the comments section and support questions in forums.

Let me know what features need to be packaged with it, what works, and what doesn’t work.

Updates

Versions 0.2.2 - 0.3

I fixed the issues with multiple galleries on one page. Each gallery item should now have a unique rel and class. Each gallery also has a unique class. For example, if your post ID is 49, the gallery for that post has a class of gallery-49. So, you could essentially style every individual gallery differently.

Also, tested and added support GreyBox, Lytebox, Lightview, and two jQuery Lightbox plugins.

Thanks to Andrew, Dennis, and Perze for ideas and support.

Version 3.3

I fixed a major bug (careless bug) that I hadn’t noticed which produces invalid XHTML if you have captions.

Version 0.4

Fixed the order/orderby problem in WordPress 2.6+. Also added support for Shadowbox and cleaned up some of the code. Made use of wp_enqueue_style() for including stylesheets.