Getting text under two pictures to span both

  • Unknown's avatar
    drakeninja808 · Member ·

    Aloha! I’ll start with an apology as this is my first time on any forum and I’ll likely make some mistakes!

    I am pulling my hair out trying to figure out why the text under two different pictures in my blog breaks halfway across the page and drops to the next line. From the second line on, the body of the text runs all the way across.

    I do know it has something to do with the second picture because I went back and put the identical picture in twice and then the text was OK.

    The thing is, the second picture is supposed to be the exact same size as the first one. Each shows a width of 275 and a height of 183. Yet there must be something in the second one that is causing the text to bump down an extra line under it.

    When I look real close at the preview, it looks like the actual picture images are exactly the same size, but it does look like the caption border under the second one is a hair deeper.

    I’d appreciate your help before I have no more hair!

    Here is the link: http://withlovefromthailand.wordpress.com/2011/11/13/loy-krathong-yi-peng/

    You’ll see under the two pictures captioned “Playing fireworks in the street” and “Airburst” what I am talking about.

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    timethief · Member ·

    You are using captions and captions appear only under the image they are created for. There is no way to have a caption span two images and display text under two different pictures.

  • Unknown's avatar
    panaghiotisadam · Member ·

    @drakeninja808: Yes, you get a line break because the height of the right image is larger. The second picture is not “supposed to be the exact same size as the first one”, because the originals don’t have the same aspect ratio. Your post displays scaled down versions of the originals you have uploaded. Scaled down means smaller size but same aspect ratio. The left image is 2592×1589 pixels, the right one is 2285×1433. When they’re scaled down to a width of 275, they’ll retain the same proportions, so the left one becomes 275×168 and the right one 275×172. That’s what your post is actually displaying – none of the two thumbnails is 275×183. If you want two equal images, you need to edit them in an image editing application and make them equal. If you want to distort the right thumbnail to make it equal with the left, switch the editor to HTML and change this:
    <img class=ETC ETC
    to this:
    <img style="width:275px;height:168px;" class=ETC ETC

    By the way, there’s no point uploading 2500px wide images when most users’ screens are no wider than 1000 or 1200 pixels: you’re simply wasting your storage space and needlessly increasing the loading time.

  • Unknown's avatar
    drakeninja808 · Member ·

    Mahalo nui loa, Panaghiotisadam! Your fix worked like a charm. I will now set about learning how to make equal images before I upload them. Also, thanks for your tip about not uploading big picture files. I will also look to see how to make the pix smaller. I am sure I can do it through iPhoto on my MacBook Pro.

    I am very appreciative of your wisdom and help!

    @timethief: Thanks, Timethief. I think you misconstrued my question (perhaps owing to my lack of clarity). But as you see, Panaghiotisadam got me back on track!

  • The topic ‘Getting text under two pictures to span both’ is closed to new replies.