Columns/Captions and Setting a Grid Demo

So my wife came to me the other day and asked if it was possible to utilize the image caption feature in WordPress to do a grid system so it would show the image size in one of 4 sizes, and then to get the caption to go to the right of the image. I worked up a little something to show how this could be done. It’s not fancy by any means, but learning how to do it could help in future endeavors.

I used the Simple Image Size plugin to record my different thumbnail sizes, and to have them show in the media upload/insert into post menu.

This was added to my functions.php

add_image_size( 'one-column', 100, 9999, true);
add_image_size( 'two-column', 200, 9999, true);
add_image_size( 'three-column', 300, 9999, true);
add_image_size( 'four-column', 400, 9999, true);

add_shortcode('wp_caption', 'fixed_img_caption_shortcode');
add_shortcode('caption', 'fixed_img_caption_shortcode');
function fixed_img_caption_shortcode($attr, $content = null) {
// Allow plugins/themes to override the default caption template.
$output = apply_filters('img_caption_shortcode', '', $attr, $content);
if ( $output != '' ) return $output;
extract(shortcode_atts(array(
'id'=> '',
'align' => 'alignnone',
'width' => '',
'caption' => ''), $attr));
if ( 1 > (int) $width || empty($caption) )
return $content;
if ( $id ) $id = 'id="' . esc_attr($id) . '" ';
return '<div ' . $id . 'class="wp-caption ' . esc_attr($align)
. '>'
. do_shortcode( $content ) . '<div style="width: ' . (400 - (int) $width) . 'px float:left;">
<p class="wp-caption-text">'. $caption . '</p>
</div><div style="clear:both;"></div></div>';
}

This was the CSS I modified

.wp-caption {
background: #eee;
margin-bottom: 1.625em;
width: 380px;
padding: 10px;
clear:both;
}
.wp-caption img {
display: inline-block;
float:left;
margin: 0 auto;
max-width: 98%;
}

There would be still more CSS modifications to do, but this should illustrate the point.