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

1 Views

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:

Read More
<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?

Post Views: 1

Related posts

Leave a Reply

3 comments

  1. If it’s a usable option for you, you can change the output of [caption] 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 */
}

  2. It appears that each div is being given the class “alignnone.” If you change that to “alignleft” (select “left” when you upload the picture or edit the source), that will also float the pictures to the left, allowing for two columns.

  3. Why don’t use CSS to align images ?

    If I don’t miss something obvious on this case (if so, my bad), but CSS is meant for that (instead of changing source, change layout).

    You could use ;

    .wp-caption {
    float: left;
    margin: 20px 40px;  /* spacing a bit */
    clear: none; /* or remove the clear:both from style.css */
 }

    and, that’s it. Using Firebug I could see it’s not perfect (as there is images without captions on the page, so the design isn’t consistent) but it’s better.