Trouble placing captioned images side-by-side

  • bradley1

    #2688

    I’m trying to place two images, each with its own caption, side-by-side on a page, and centered horizontally. I am able to do this with two images if I don’t include captions, as you can see here on my website (still under construction):

    http://www.ashishmacwan.com/sample-category

    However, as soon as I add captions, it forces the images to “stack” vertically and will not allow me to place them side-by-side anymore, as you can see here:

    http://www.ashishmacwan.com/sample-category/sample-sub-category

    I don’t know what I could be doing wrong. Any ideas?

    Mod

    Kenneth John Odle

    #21500

    Are you using Firebug? That will make it easy to see what the problem is. The solution is not so easy, however. That is because WP makes it relatively easy to add a CSS class to an image (which can float it to the left or right), but not to a caption.

    WP places a caption within a unique <div>, which contains the image and the caption text (which is a <p>). After you have added your images and the caption text, go back and edit the post using the HTML editor. You should see something that looks like this:

    <div class="wp-caption alignnone" style="width: 310px">
    <a href="http://www.ashishmacwan.com/wp-content/uploads/2011/11/SampleImage1.png">
    <img width="300" height="253" alt="" src="http://www.ashishmacwan.com/wp-content/uploads/2011/11/SampleImage1-300x253.png" title="SampleImage#1">
    </a>
    <p class="wp-caption-text">Fig. 1. Sample Caption #1</p>
    </div>

    That first line is the one you want to edit. Change

    <div class="wp-caption alignnone"

    to

    <div class="wp-caption alignleft"

    and that will probably take care of your issue.

    I admit, it’s not an elegant solution, but I think it will work. Let us know how it works for you.

    Mod

    Kenneth John Odle

    #21501

    Because you are now using floats, you will want to clear them afterward, to prevent further alignment problems.

    Either add this just afterward:

    <div style="clear:both;"></div>

    or use the Tiny MCE Clear plugin, which is what I do.

    macwana

    #21502

    Kenneth, I modified the html code as per your suggestion. Changing the figure alignment to “alignleft” does allow both figures to be placed side-by-side with captions, however, it is left-justified, whereas I wanted them to be centered. You can see the result here:

    http://www.ashishmacwan.com/sample-category/sample-sub-category

    Also, with this alignment, any text will flow around the figures, as you can see in the above link (the text “Text Line 2” sits beside the second image). I thought I might try manually entering indents on the left to push both figures to the center, but it just pushes the image; the caption doesn’t move with it.

    I also tried changing the alignment to “aligncenter”, but that just causes the figures to stack vertically again.

    Any other thoughts?

    P.S.: What is Firebug, exactly? Does it work as plugin that still allows me to use the WordPress Dashboard, but with added editing functionality?

    Mod

    Kenneth John Odle

    #21503

    Also, with this alignment, any text will flow around the figures

    That’s because you need to clear the floats after your captions. See my other post, above.

    I also tried changing the alignment to “aligncenter”, but that just causes the figures to stack vertically again.

    That’s because you can float divisions to the left or the right, but you can’t float something to the center. “aligncenter” just uses the {margin: auto} trick. If you are using the HTML editor, you can try enclosing your captions in a <div> with that style attached, like this:

    <div style="margin:auto;">
    (caption stuff here)
    </div>

    I’m not sure if that will work or not, but it’s worth a try.

    Mod

    Kenneth John Odle

    #21504

    macwana

    #21505

    Thanks for the suggestion, Kenneth. I gave it a try, but unfortunately, no luck – it just stacks the two figures vertically again. Just to make sure I did it correctly, the following is the modified HTML code:

    Text Line 1.

    <div style="margin:auto;">
    [caption id="attachment_203" align="alignnone" width="300" caption="Fig. 1. Sample Caption #1"]<a href="http://www.ashishmacwan.com/wp-content/uploads/2011/11/SampleImage1.png"><img title="SampleImage#1" src="http://www.ashishmacwan.com/wp-content/uploads/2011/11/SampleImage1-300x253.png" alt="" /></a>[/caption]
    </div>

    <div style="margin:auto;">
    [caption id="attachment_204" align="alignnone" width="300" caption="Fig. 2. Sample Caption #2"]<a href="http://www.ashishmacwan.com/wp-content/uploads/2011/11/SampleImage2.png"><img title="SampleImage#2" src="http://www.ashishmacwan.com/wp-content/uploads/2011/11/SampleImage2-300x253.png" alt="" /></a>[/caption]
    </div>
    <div style="clear:both;"></div>

    Text Line 2.

    With regards to “clearing the floats” by adding ‘<div style=”clear:both;”></div>’ after the caption, I recall that I did include it orginally. But I discovered that it only remains there as long as I stay in html mode. If I switch to the “Visual” option in Dashboard, and then switch back to “HTML”, I notice that this addition is automatically removed. That would explain why the text was still flowing around the images.

    I’ve come up with two alternative solutions which are not exactly what I want, but close enough. My first alternative is to align the first figure with “alignleft”, and the second with “alignright”, make both figures a little larger, and clear the floats at the end. This creates the illusion of 2 figures, side-by-side, and centered horizontally, more-or-less; you can see the result here:

    http://www.ashishmacwan.com/sample-category/sample-sub-category

    The second solution is to use this theme’s “Gallery” option. It’s an almost-perfect solution: it displays the two images side-by-side, and centered horizontally, but presents the images in “thumbnail view”. As a result both images are very small, and you have to click on them to enlarge them. You can see the result here:

    http://www.ashishmacwan.com/sample-category/sample-sub-category-2

    Is there any way to make the images larger in the thumbnail view itself? I couldn’t see any such option.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

Do NOT follow this link or you will be banned from the site!