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

Question

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>[caption id="" align="alignnone" width="350" caption="I 300 w/ Hitachi Alt"]
<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>
[/caption]
[caption id="" align="alignnone" width="350" caption="Hitachi mounting bracket"]
<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>
[/caption]</p>

Any thoughts or ideas?

It looks like the wordpress caption plugin is outputting each picture into a <div>. If you found a way to to make those <div>s into <span>s then you could put more on one line.

its_me · Answer 1 · 2012-07-04 01:33:02Z

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 */
}

@MikeWills Lets clean this conversation (plz delete all your old comments). Then, if the solution still doesn't work, do let me know in a new comment. If you've your own solution, you can post it as an answer. :)

Jon Schroeder · Answer 2 · 2012-07-03 05:30:28Z

up vote 1 down vote

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.

answered Jul 3 '12 at 5:30

Jon Schroeder
543

I can't believe I didn't think of this. – Mike Wills Jul 3 '12 at 13:22

2

This will not work. Test it out and you'll see wp-caption has the css clear:both;. It also introduces a potential float clearing bug after the last image – Tom J Nowell Jul 3 '12 at 14:57

You're correct that this will fail to clear at the end. To be honest, if I were making this site, I'd consider creating a new loop that pulls in a custom post type's featured images, so that you could have Wordpress automatically crop them. If this is an option (it would be much more time consuming, but would almost certainly give you a better product that's easier to edit), you may want to consider approaching the problem from that perspective. – Jon Schroeder Jul 5 '12 at 1:10

Simon · Answer 3 · 2012-07-03 19:24:32Z

up vote 0 down vote

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.

answered Jul 3 '12 at 19:24

Simon
50618

I guess I didn't say it in the post, my CSS is not very good. I know enough to be dangerous, but not enough to think I know what I am doing. I am working on it, but am not exposed to it enough. I'll look at what you are suggesting. – Mike Wills Jul 3 '12 at 19:29

I'd say it's less dangerous to change some CSS than using PHP functions. Make a copy of your style.css file first, so you could roll it back, just in case. Search for .wp-caption and add the proposed lines at the end of the rules, before the }. Note that each line should end with a ; . You cannot do much harm by trying this (at worst, you won't like the result ^^) – Simon Jul 3 '12 at 19:33

asked	10 months ago
viewed	332 times
active	10 months ago

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

3 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged gallery or ask your own question.

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

3 Answers

Your Answer

Sign up or log in

Post as a guest

Not the answer you're looking for? Browse other questions tagged gallery or ask your own question.

Related