#Gallery, #WordPress

Updating The Gallery Markup

I’ve wanted to use the WordPress gallery shortcode functionality for quite some time on my site–not that I would overuse or abuse it or anything–but it seemed rather useful for including multiple images in a post if I happened to want to do so.

The unfortunate part about using it is the resulting markup that ends up being generated by the shortcode. The original code utilizes a definition list (dl) for each image in the gallery, and inserts a line break (br) after each row. Not the cleanest code in the world. I’m also using a lightbox to display the full size image and could not utilize its native gallery functionality with the markup as is. What’s a man, or woman, to do? Improve the situation, that’s what!

Improved Markup

<section id="gallery-1" class="gallery gal-col-3 clearfix">
    <figure class="gallery-item">
        <a rel="gallery-1" href="img/link/src.jpg" title="generic title"><img src="img/link/src-thumb.jpg" class="attachment-images-thumb" alt="generic title" height="220" width="220"></a>
       <figcaption class="wp-caption-text gallery-caption">Generic Caption</figcaption>
    </figure>
    <figure class="gallery-item">
        <a rel="gallery-1" href="img/link/src.jpg" title="generic title"><img src="img/link/src-thumb.jpg" class="attachment-images-thumb" alt="generic title" height="220" width="220"></a>
       <figcaption class="wp-caption-text gallery-caption">Generic Caption</figcaption>
    </figure>
</section>

This code is much cleaner, and perhaps a little more HTML5 centric using the figure and figcaption tags, while also eliminating the page breaks. In the spirit of OOCSS, I’m keeping most of the original classes intact. How am I styling that up? Glad you asked.

The Basic CSS

I’ve created a base set of styles to get you started. I’ve purposely not styled certain items in this tutorial/plugin because you should modify these to fit your purposes.

.gallery {
    margin:1.5em 0;
}
.gallery-item {
    float: left; 
    padding: 1%;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
}
.gallery img {
    max-width: 100%;
    height: auto;    
    display: block;
    margin: 0 auto;
}
/* A gallery image caption */
.gallery .gallery-caption { }
 .gal-col-1 .gallery-item {
      width:100%;
      float: none;
      padding: 1% 0;
  }
  .gal-col-2 .gallery-item {
      width:50%;
  }
  .gal-col-3 .gallery-item {
      width:33.3333%;
  }
  .gal-col-4 .gallery-item {
      width:25%;
  }
  .gal-col-5 .gallery-item {
      width:20%;
  }
  .gal-col-6 .gallery-item {
      width:16.6667%;
  }
  .gal-col-7 .gallery-item {
      width:14.2857%;
  }
  .gal-col-8 .gallery-item {
      width:12.5%;
  }

Time To Change It All

You might be thinking, “that’s all well and good, but how do I get that beautiful markup on my site?” I’m glad you asked. There are a couple of approaches you could take. On my site I chose to create a new function in my theme functions file to manage the short code because that’s all I needed for my setup. For our purposes here, a plugin makes distribution easier.

If you wanted to go the theme function route, you can follow along to get a basic overview. First, unregister the default gallery shortcode in order to setup our own.

// replace gallery shortcode
remove_shortcode('gallery');
add_shortcode('gallery', 'mm_gallery_shortcode');

Next, we need to modify the default gallery shortcode function. One of the first sets of things we’ll change are the default attributes in order to ensure we’re using semantically correct tags.

extract(shortcode_atts(array(
    'order'      => 'ASC',
    'orderby'    => 'menu_order ID',
    'id'         => $post->ID,
    'itemtag'    => 'figure',
    'icontag'    => '',
    'captiontag' => 'figcaption',
    'columns'    => 3,
    'size'       => 'images-thumb',
    'include'    => '',
    'exclude'    => ''
), $attr));

Then we’ll reflect those changes just a little further down in the function.

$itemtag = tag_escape($itemtag);
$captiontag = tag_escape($captiontag);
$icontag = tag_escape($icontag);
$valid_tags = wp_kses_allowed_html( 'post' );
if ( ! isset( $valid_tags[ $itemtag ] ) )
    $itemtag = 'figure';
if ( ! isset( $valid_tags[ $captiontag ] ) )
    $captiontag = 'figcaption';
if ( ! isset( $valid_tags[ $icontag ] ) )
    $icontag = '';

The last portion I want to highlight in the code is the actual output. I changed the gallery div tag into a section tag and modified the classes to reduce their number. I then add one to reflect the column number. Using str_replace I also add a rel attribute to our image link. Additionally, I have eliminated all line breaks from the output.

function mm_gallery_shortcode($attr) {
    /*A LOT of excluded CODE.....*/
    $gallery_div = "<section id='$selector' class='gallery gal-col-{$columns} clearfix'>";
    $output = apply_filters( 'gallery_style', $gallery_style . "\n\t\t" . $gallery_div );
    $i = 0;
    foreach ( $attachments as $id => $attachment ) {
         $link = isset($attr['link']) && 'file' == $attr['link'] ? wp_get_attachment_link($id, $size, false, false) : wp_get_attachment_link($id, $size, true, false);
         $link = str_replace( '<a href', '<a rel="'. $selector .'" href', $link );
         $output .= "<{$itemtag} class='gallery-item'>";
         $output .= "$link";
         if ( $captiontag && trim($attachment->post_excerpt) ) {
             $output .= "<{$captiontag} class='wp-caption-text gallery-caption'> " . wptexturize($attachment->post_excerpt) . " </{$captiontag}>";
         }
        $output .= "</{$itemtag}>";
    }
    $output .= "</section>\n";
    return $output;
}

The code I’m highlighting above is incomplete, so I recommend you use the plugin if you have no clue what you’re doing. Otherwise, use it as a jumping off point.

Example

View Project At GitHub