Need help? Check out our Support site, then


Positioning Photographs

  1. earthtojeremiah
    Member

    I have two photographs that I want to show side by side on my blog. They're both portrait-oriented, and I want them both to appear in the same gray box that appears on my blog, with one caption underneath. Is there a way to do it? They have to be side by side, not one under the other.

    The blog I need help with is earthtojeremiah.wordpress.com.

  2. earthtojeremiah
    Member

    Ah. I thought it would show the URL of my blog. Anyway, it's http://www.earthtojeremiah.wordpress.com

  3. Connections, the theme you are using has a maximum width in the post area of 510 px, so you will need to make the images about 240px wide each.

    After inserting the first image, click on that image, click on the edit image icon (upper left) and then click on advanced settings. In the width box, change it to 240 and then delete the number in the vertical box (that way it will resize it proportionally. Then click the update button. Click beside the first image in the editor, insert the second image and then do the same thing with the width and height.

  4. earthtojeremiah
    Member

    Well, the pictures I'm using have a width of 225px, so they both should fit within the limits of the post area, yet whenever I try to insert the second picture, it always ends up going underneath the first one. I tried using no alignment, but they still do the same thing.

  5. Make sure the cursor is not blinking below the first image when you insert the second. You can see two 225px images side by side on my test blog: http://opposablethumbz.wordpress.com/ .

  6. panaghiotisadam
    Member

    If you want two pics side by side, inside one frame, with one caption, you need to simulate the (automatically produced) appearance of the captioned images using table coding. For two 225px wide images, that would be:

    <table align="center" style="border:solid 1px #cdcdcd;background-color:#eeeeee;width:456px;padding:2px;">
    <tr><td>IMAGE1_CODE_HERE</td><td>IMAGE2_CODE_HERE</td></tr>
    <tr><td  colspan="2" align="center">CAPTION_HERE</td></tr>
    </table>

    Image alignment must be set to none.

    On another issue: You're uploading large images and downsizing them via the uploader. This way you waste storing space, plus you lose some quality. It's better to downsize copies of your images in an image editing application and upload those copies.

  7. earthtojeremiah
    Member

    Ok, I used the code, and it worked perfectly. I see the post, and the pictures are there, but my friend looked at it on her computer, and she said that all the pictures, including of the past days, were gone. Checking this, I went to our other computer and checked the blog, and all the pictures were there.

    I had another friend check it, and he said that only the latest post, in which the code was used, is missing pictures.

  8. The table code is perfect. It functions when I insert pictures using this model:

    <a href="URL_OF_1st_IMAGE">
    <img src="URL_OF_1st_IMAGE" alt="" width="225" /></a>

    But your source code indicates you are inserting pictures in a different way. What method do you use to add images?

  9. FYI, I clicked on your link while reading 1st post and the pictures weren't there. I read through the other posts and clicked again. They displayed perfectly. You must be working on page this very minute. Looks nice in Safari 4 on a Mac.

  10. earthtojeremiah
    Member

    1tess, I just used the table code panaghiotisadam provided, put in the image codes and the caption, and put that in the HTML tab when I create a new post.

    I haven't worked on it since last night, and when I returned a few minutes ago, the pictures were gone.

  11. earthtojeremiah
    Member

    OK. I just changed the IMG code using the code 1tess provided. Before, I put a more complicated code that I copied and pasted from somewhere. (Can't remember. It might have been from a previous post when I was experimenting with the concept of putting the two pictures together.) Now, the pictures are there. Hopefully, they'll stay.

  12. earthtojeremiah
    Yes, the pictures were showing up, but a refresh, oR click on the post made them disappear in both Safari and Firefox.
    Now the image with the music is there and visible in your source code, but not the piano pic:

    <tbody>
    <tr>
    <td><img src="http://earthtojeremiah.files.wordpress.com/2009/06/jun-13-11.jpg?w=225" alt="" width="225" /></td>
    <td><img src="http://earthtojeremiah.files.wordpress.com/2009/06/jun-13-21.jpg?w=225" alt="" width="225" /></td>
    </tr>
    <tr>
    <td colspan="2" align="center">061309</td>
    </tr>
    </tbody>
    </table>

    When I use the table code from Panos, I can insert pictures from the visual editor (or with html code into the html editor).
    They use code like this model, with the href and the scr both both both the same.

    < tr >
    means table row
    < td >
    means table data.

    If your table has 2 pictures in a row, then you need two < td > </td> and < td > </td>

    <td><a href="URL_OF_1st_IMAGE"><img src="URL_OF_1st_IMAGE" alt="" width="225" /></a></td>
    <td><a href="URL_OF_2ND_IMAGE"><img src="URL_OF_2ND_IMAGE" alt="" width="225" /></a></td>

    and those two items are in a row:
    between the table row tags (start: < tr> and end </tr>)

    <tr>
    <td><a href="URL_OF_1st_IMAGE"><img src="URL_OF_1st_IMAGE" alt="" width="225" /></a></td>
    <td><a href="URL_OF_2ND_IMAGE"><img src="URL_OF_2ND_IMAGE" alt="" width="225" /></a></td>
    </TR>

    How are you inserting your images?
    His whole table looks like this:

    <table align="center" style="border:solid 1px #cdcdcd;background-color:#eeeeee;width:456px;padding:2px;">
    <tr><td>IMAGE1_CODE_HERE</td><td>IMAGE2_CODE_HERE</td></tr>
    <tr><td  colspan="2" align="center">CAPTION_HERE</td></tr>
    </table>

    But again, how are your adding pictures to your blog?
    It's quite simple if you upload images to wp.com and add them from the "library"

  13. earthtojeremiah
    Member

    Well, everything's fine now, I believe. The pictures are still there, after I changed it last night. I think the problem was that I was using a weird, complicated code for the images. I remember that I copied and pasted the code from the HTML tab when I uploaded the pictures the first time, and they were separated. That code also had other elements, such as the width and the height of the image. I didn't realize that the only thing I needed in the code was the URL inside the tags. When I finally put in the correct IMG code, everything went fine.

    Thanks to everyone, especially to panaghiotisadam for the table code!

  14. I've seen cases in the past few days where the height and width has been tagged onto the end of the URL for the image. I'm thinking something is amiss in the backend somewhere.

  15. earthtojeremiah
    Member

    Ok, now I don't see the pictures either. Why is this so complicated? T.T

    What exactly should be in the <img code>?

  16. panaghiotisadam
    Member

    The URLs of those two images give a "file not found" response. Go to your Media Library and make sure the images are there; if they are, click View and get the right URLs.

Topic Closed

This topic has been closed to new replies.

About this Topic