Cleaner Gallery Markup in WordPress

As of Word­Press 2.7, the short­code still spits out invalid XHTML markup, as well as add style rules in the mid­dle of the page which causes error dur­ing markup val­i­da­tion. For exam­ple, here are the style rules inserted before the thumb­nails 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 snip­pet 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 Tad­lock. This Word­Press plu­gin solves the items that the default short­code falls short on. Instead of insert­ing the style rules inside the <body>, it calls it in a linked file gen­er­ated with the oth­ers via wp_head() function.

Here are the style rules included in that stylesheet (as of ver­sion 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 snip­pet that the cleansed short­code spits out is below. Notice that I have hilited some of the improve­ments to the markup as well. Those I think will prove use­ful later on when you do more cus­tomiza­tions 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>

Any­ways, I hope that helps if you are think­ing of clean­ing up your code. You may down­load the plu­gin and/or get more info by going to the Cleaner Word­Press Gallery Plu­gin page2.

  1. 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 fol­low­ing mar­gin style-rule: “margin:0 auto 1.5em;”. []
  2. I couldn’t find it in the Word­Press plu­g­ins direc­tory in the time of this post. For now, go to Justin’s site for more info and updates. []

Trackbacks/Pingbacks

  1. Posts about WordPress Plugins as of December 16, 2008 | The Lessnau Lounge