Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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?

share|improve this question
    
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. –  fdsa Jul 3 '12 at 3:02
add comment

3 Answers

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 */
}
share|improve this answer
    
@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. :) –  its_me Jul 4 '12 at 9:56
add comment

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.

share|improve this answer
    
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
add comment

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.

share|improve this answer
    
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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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