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

4 comments

1. 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">
   <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">
   <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]

   Log in to Reply

2. 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">
   <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">
   <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

   Log in to Reply

3. 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.

   Log in to Reply

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; }
   

   Log in to Reply