Cleaner Gallery Markup in WordPress

As of WordPress 2.7, the shortcode still spits out invalid XHTML markup, as well as add style rules in the middle of the page which causes error during markup validation. For example, here are the style rules inserted before the thumbnails in the post/page:

Here’s what the markup snippet looks like, which is inserted after the above style rules:

…

Enter Cleaner Gallery by Justin Tadlock. This WordPress plugin solves the items that the default shortcode falls short on. Instead of inserting the style rules inside the <body>, it calls it in a linked file generated with the others via wp_head() function.

Here are the style rules included in that stylesheet (as of version 0.4) ((Do note that .gallery doesn’t come with a margin-bottom by default. I used the same value as my <p>-tags. So my .gallery had the following margin style-rule: “margin:0 auto 1.5em;“.)):

.gallery {
    display: block;
    clear: left;
    overflow: hidden;
    margin: auto;
    }
.gallery-item {
    float: left;
    margin: 10px 0 0 0;
    text-align: center;
    }
.gallery .gallery-item img, .gallery .gallery-item img.thumbnail { max-width: 89%; height: auto; padding: 1%; margin: 0 auto; }
.gallery div.clear { width: 0px; height: 0px; }

/* Image sizes depending on the number of columns */
.col-1 { width: 100%; }
.col-2 { width: 50%; }
.col-3 { width: 33%; }
.col-4 { width: 24.5%; }
.col-5 { width: 20%; }
.col-6 { width: 16.5%; }
.col-7 { width: 14%; }
.col-8 { width: 12.4%; }
.col-9 { width: 11%; }
.col-10 { width: 10%; }
.col-11 { width: 9%; }
.col-12 { width: 8.33%; }
.col-13 { width: 7.6%; }
.col-14 { width: 7.1%; }
.col-15 { width: 6.66%; }
.col-16 { width: 6.25%; }
.col-17 { width: 5.83%; }
.col-18 { width: 5.55%; }
.col-19 { width: 5.25%; }
.col-20 { width: 4.95%; }

.gallery-caption { margin-left: 0; }
.clear { clear: both; height: 0; }

The revised, valid XHTML snippet that the cleansed shortcode spits out is below. Notice that I have hilited some of the improvements to the markup as well. Those I think will prove useful later on when you do more customizations to your themes.


    
        
            class="lightbox" rel="lightbox[cleaner-gallery-1015]">alt="Incase Slider for iPhone 3G, blackmatte-front"  width="150" height="150"/>
        
    
    
        
            
        
    
    
        
            
        
    
    
    …

Anyways, I hope that helps if you are thinking of cleaning up your code. You may download the plugin and/or get more info by going to the Cleaner WordPress Gallery Plugin page ((I couldn’t find it in the WordPress plugins directory in the time of this post. For now, go to Justin’s site for more info and updates.)).