Stacking two pictures with captions side by side and centered in Wordpress

Question

Hi all - this is driving me absolutely nuts. I'm not the most experienced with CSS, so I'm hoping it is something simple.

I'm running Wordpress 2.9.2 with "The Morning After" theme.

I am trying to write a post where I want to display two small pictures, with captions, side-by-side and centered in the middle of the page.

Here is the HTML code I am using to display the images:

[caption align="alignnone" width="150" caption="Protein rest"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg"&gt;
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>[/caption]
[caption align="alignnone" width="143" caption="Saccharification rest" captionalign="center"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg"&gt;
<img  title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>[/caption]

I tried using "aligncenter" and "alignleft" for the caption align - if I use "alignleft" the pictures are lined up perfectly, but all the way to the left of the page. If I use "aligncenter" the pics are in the center, but stacked one on top of the other.

My first thought was to wrap the images in a div using:

<div style="text-align:center;">image code</div>

but that doesn't work. Now, if I wrap in a centered div like that and omit the [caption] tags, it works, but I need the captions. Those caption tags are translated by Wordpress into it's own div of class wp-caption. I've also tried wrapping each separate image in its own div within a parent centered div wrapper.

Here are the pertinent parts of the style.css - please let me know if you need any other info, and if you can help me, I will postpone jumping off the nearest bridge!

Thanks!!

Style.css:

.aligncenter, div.aligncenter { display: block; margin: 14px auto; }
.alignleft { float: left; margin: 0 14px 10px 0; }
.alignright { float: right; margin: 0 0 10px 14px; }
.wp-caption { border: 1px solid #ddd; text-align: center; background-color: #f3f3f3; padding-top: 4px; /* optional rounded corners for browsers that support it */ -moz-border-radius: 3px; -khtml-border-radius: 3px;  -webkit-border-radius: 3px; border-radius: 3px; }
.wp-caption img { margin: 0; padding: 0; border: 0 none; }
.wp-caption p.wp-caption-text { font-size: 11px; line-height: 14px; padding: 5px 4px 5px 5px; margin: 0; }

PS - I am aware of the Gallery feature available in Wordpress, but would like to avoid it and would love to understand why wrapping in a div doesn't move the whole kit to the center.

Finally, just for the sake of completeness, here is the source of the page when loaded using the div wrapper and image code as above (so you can see how Wordpress translates the caption tags):

<div style="text-align:center;">
<div class="wp-caption alignnone" style="width: 160px">
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg"&gt;
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>
<p class="wp-caption-text" style="text-align:center">Protein rest</p>
</div>
<div class="wp-caption alignnone" style="width: 153px">
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg"&gt;
<img  title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>
<p class="wp-caption-text" style="text-align:center">Saccharification rest</p>
</div>
</div>

Answer 1

The issue you could be having is that a div container acts like an auto-sizing box. Therefore, When you tell it to align center it automatically notices that it should stretch downward (because thats the page flow) if you give the div container a set width and then have the images inside the div container and have the div centered on the page it will do what you want it to. Based on your code this is a small snippet of what it should look like in html:

<center>
<div width="300">
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg"&gt;
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg"&gt;
<img  title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>
</div>
</center>

I know you were looking for CSS but that would take a bit longer and I'm just walking out the door at work.

Hope this helps and best of luck. -Gale

Answer 2

Well, after much messing about, I finally got it working.

I created some new CSS elements as follows:

.stackwrapper {max-width: 311px;margin: 0 auto;}
#div1 {width: 162px;float: left;}
#div2 {margin-left: 162px;}

Realize that this was just coded up to meet my immediate demands, so the widths are hard coded for the post I was working on. Basically, one image is 150px wide and the other is 137px. The caption code adds a 5px padding and 1px border to each, so total width for my side by side images is 311px (image width + 10px L&R padding per image + 2px L&R border per image).

the wrapper is set to this width and the margin:0 auto seems to center it (although not exactly sure why...can anyone clue me in?)

Then I wrap image1 in div1 (with it's image+padding+border width) and image2 in div2 (with it's margin-left set to the first image's width)

Seems to work great, now I need to code it in a wordpress shortcode so i can specify the image widths and have it generate the html on the fly.

Thanks to Gale, you got me thinking along the lines of setting the width.

Answer 3

I am not sure whether you are looking for

1. A Quick Fix via Wordpress Editor using the caption and html code
2. A Quick Fix via Wordpress html Editor recreating the caption code by hand
3. A Permanent fix via the functions.php file and the add_shortcode() in wp-includes/media.php
4. A Permanent Fix via CSS which might affect all captions.

I am giving 1 keeping your code as untouched as possible

<div style="text-align:center;">
// This should align the entire block [it worked for me at least]
    <div style="display:inline-block;">
        <div style="float:left;">
        // Takes care of the centering down the middle
            [caption align="aligncenter" width="150" caption="Protein rest"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest.jpg"&gt;
<img title="Mash during protein rest" src="http://www.mysite.com/wp-content/uploads/2008/06/protein-rest-150x144.jpg" alt="Mash during protein rest" width="150" height="144" />
</a>[/caption]
        //Your caption code above with alignnone changed to aligncenter
        </div>
        <div style="float:left;">
            [caption align="aligncenter" width="143" caption="Saccharification rest" captionalign="center"]
<a href="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest.jpg"&gt;
<img  title="Mash during saccharification rest" src="http://www.mysite.com/wp-content/uploads/2008/06/saccharification-rest-143x150.jpg" alt="Mash during saccharification rest" width="143" height="150" />
</a>[/caption]
        </div>
    </div> // End the Block Div
</div> // End the Center Div

[EDIT : Just saw you answered yourself -.- posting anyway :D]

Answer 4

Not sure if it's proper stack etiquette to answer my own post twice (!) but I wanted to put this code out there in case it helps anyone else.

Here's a custom function (paste in your Wordpress theme's function.php file) and accompanying CSS elements which will allow you to use a shortcode to place two images side-by-side and align them left, right, or center (default is center if no alignment is specified).

It is coded for two images, but could easily be modified to handle more. It also requires you to use the [caption] tags on the images, since that is what I needed it for (and what it string splits on) but I might flesh it out later to deal with different situations.

Basically it parses the image code between your new [side_by_side] tags and splits it on [/caption], creating an array where each element is one image. It parses the widths (since each image tag has two widths specified - caption and the actual picture - it checks to see which is larger and uses that one) and then generates the code w/ properly sized div's.

Obviously, this is not a "catch all" solution or I'd be uploading it as a plugin! It was coded for my very specific needs, but it can be modified for your specific needs with a little bit of recoding. Use with my blessing, I accept no responsibility for what it might do to your website :) PS - I know using regex is typically bad form for parsing html, but in my case it was such a small small-scale job I didn't think it would be an issue. If anyone wants to optimize/recode let me know, I just taught myself enough PHP to do this today, by no means an expert...

/* CUSTOM FUNCTION ADDED BY JIM - 5/20/2010 TO ALLOW CENTERING SIDE-BY-SIDE IMAGES */

add_shortcode('side_by_side', 'side_by_side');

function side_by_side($attr, $content = null) {

extract(shortcode_atts(array(
    'align' => 'center'
), $attr));

$images = explode( "[/caption]", $content, -1);
foreach($images as &$image)
{
    $image = $image.'[/caption]';
}

$img = array();
foreach($images as $img_tag)
{
preg_match_all('/width=\"(.*?)\"/i', $img_tag, $img[$img_tag]);
}

$widths = array();

for ($i = 0; $i < count($images); $i++)
{
    $firstval = $img[($images[$i])][1][0];
    $secondval = $img[($images[$i])][1][1];
    if ($firstval >= secondval)
        $widths[$i]=$firstval;
    else
        $widths[$i]=$secondval;
}

return '<div class="main-img-wrap wrap' . esc_attr($align) . '" style="max-width: ' . (24 + (int) $widths[0] + (int) $widths[1]) . 'px"><div class="sub-img-wrap" style="width: '
. (12 + (int) $widths[0]) . 'px">' . do_shortcode( $images[0] ) . '</div><div style="margin-left: ' . (12 + (int) $widths[0]) . '">' . do_shortcode( $images[1] ) . '</div></div>';
}

And the CSS elements:

/* centered side-by-side image wrappers, added by Jim 5/20/2010 */

.main-img-wrap {} /* left blank for future style enhancements */
.sub-img-wrap {float: left;}
.wrapcenter {margin: 0 auto;}
.wrapright {float: right; margin: 0 0 10px 14px;}
.wrapleft { float: left; margin: 0 14px 10px 0; }