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:

<style type='text/css'>
    .gallery {
        margin: auto;
    }
    .gallery-item {
        float: left;
        margin-top: 10px;
        text-align: center;
        width: 33%;
    }
    .gallery img {
        border: 2px solid #cfcfcf;
    }
    .gallery-caption {
        margin-left: 0;
    }
</style>

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

<!&#8212; see gallery_shortcode() in wp-includes/media.php &#8212;>
<div class='gallery'><dl class='gallery-item'>
    <dt class='gallery-icon'>
        <a href='http://justamemo.com/wp/wp-content/uploads/2008/08/blackmatte-front.jpg' title='Incase Slider for iPhone 3G, blackmatte-front'><img src="http://justamemo.com/wp/wp-content/uploads/2008/08/blackmatte-front-150x150.jpg" width="150" height="150" class="attachment-thumbnail" alt="" /></a>
    </dt></dl><dl class='gallery-item'>
    <dt class='gallery-icon'>
        <a href='http://justamemo.com/wp/wp-content/uploads/2008/08/blackmatte-back.jpg' title='Incase Slider for iPhone 3G, blackmatte-back'><img src="http://justamemo.com/wp/wp-content/uploads/2008/08/blackmatte-back-150x150.jpg" width="150" height="150" class="attachment-thumbnail" alt="" /></a>
    </dt></dl><dl class='gallery-item'>
    &hellip; </dl><br style="clear: both" />
    <br style='clear: both;' />
</div>

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)1:

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

<div class='gallery gallery-1015'>
    <dl class='gallery-item col-3'>
        <dt class='gallery-icon'>
            <a href="http://justamemo.com/wp/wp-content/uploads/2008/08/blackmatte-front.jpg" title="Incase Slider for iPhone 3G, blackmatte-front" class="lightbox" rel="lightbox[cleaner-gallery-1015]"><img src="http://justamemo.com/wp/wp-content/uploads/2008/08/blackmatte-front-150x150.jpg" alt="Incase Slider for iPhone 3G, blackmatte-front"  width="150" height="150"/></a>
        </dt>
    </dl>
    <dl class='gallery-item col-3'>
        <dt class='gallery-icon'>
            <a href="http://justamemo.com/wp/wp-content/uploads/2008/08/blackmatte-back.jpg" title="Incase Slider for iPhone 3G, blackmatte-back" class="lightbox" rel="lightbox[cleaner-gallery-1015]"><img src="http://justamemo.com/wp/wp-content/uploads/2008/08/blackmatte-back-150x150.jpg" alt="Incase Slider for iPhone 3G, blackmatte-back"  width="150" height="150"/></a>
        </dt>
    </dl>
    <dl class='gallery-item col-3'>
        <dt class='gallery-icon'>
            <a href="http://justamemo.com/wp/wp-content/uploads/2008/08/blackmatte-side.jpg" title="Incase Slider for iPhone 3G, blackmatte-side" class="lightbox" rel="lightbox[cleaner-gallery-1015]"><img src="http://justamemo.com/wp/wp-content/uploads/2008/08/blackmatte-side-150x150.jpg" alt="Incase Slider for iPhone 3G, blackmatte-side"  width="150" height="150"/></a>
        </dt>
    </dl>
    <div style="clear:both;" class="clear"><!&#8212; &#8212;></div>
    &hellip;
</div>

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

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;”. [↩]
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. [↩]

Just a Memo

Cleaner Gallery Markup in WordPress

Trackbacks/Pingbacks