How can I show these pictures in two columns in my page?

by

This page is long and cumbersome. I am trying to find a plugin/hack that would put the images on this page in two columns to make it a bit easier to digest. Removing the <p> tags doesn’t seem to accomplish that. I have all of the pictures hosted on S3 to keep the bandwidth usage down (hosted on home DSL). The gallery plugins I looked are kind of confusing and I really just want something really simple.

Here is a portion of my post I want to make two columns:

<p>

<a href="http://cdn.mikewills.me/charliesrepair/I_300_w_Hitachi_alt.jpg" target="_blank">
<img src="http://cdn.mikewills.me/charliesrepair/I_300_w_Hitachi_alt_thumb.jpg" alt="I 300 w/ Hitachi Alt" /></a>

I 300 w/ Hitachi Alt



<a href="http://cdn.mikewills.me/charliesrepair/Hitachi_mounting_bracket.jpg" target="_blank">
<img src="http://cdn.mikewills.me/charliesrepair/Hitachi_mounting_bracket_thumb.jpg" alt="Hitachi mounting bracket" /></a>

Hitachi mounting bracket
</p>

Any thoughts or ideas?

3 Answers
3

If it’s a usable option for you, you can change the output of to use <span> tag instead of a <div>.

This how you’d change the output (to be added in theme functions.php) of the Caption shortcode:

// Source code from http://core.svn.wordpress.org/trunk/wp-includes/media.php

add_filter( 'img_caption_shortcode', 'wpse57262_cleaner_caption', 10, 3 );

function wpse57262_cleaner_caption( $output, $attr, $content ) {

    if ( ! isset( $attr['caption'] ) ) {
        if ( preg_match( '#((?:<a [^>]+>\s*)?<img [^>]+>(?:\s*</a>)?)(.*)#is', $content, $matches ) ) {
            $content = $matches[1];
            $attr['caption'] = trim( $matches[2] );
        }
    }

    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) . '" ';

    $output="<span " . $id . 'class="wp-caption ' . esc_attr($align) . '" style="width: ' . (10 + (int) $width) . 'px">'
    . do_shortcode( $content ) . '<p class="wp-caption-text">' . $caption . '</p></span>';

    return $output;

}

The above function only changes the opening tags of a captioned image to be <span> instead of <div> (see the last lines). To further optimize the Caption output and make it more readable as well, follow this excellent article by Justin Tadlock.

Now here’s a pointer as to how your CSS should be:

span.wp-caption {
    display: inline-block;
    /* add padding, margin, etc. as needed */
}

Leave a Comment