Putting two pictures side by side in a blog post

When you have many photos that you want to include in a blog post, it is important to vary the lay out from time to time. This way, the reader won’t have to scroll down forever and ever to see your pictures. You also should vary the images’ sizes in an aesthetic manner according to their importance.

However, are you sick of having to put up a photomontage every time you want to put two images side by side in your new blog post?

Here’s a simple solution to do that directly in your article from your editor with either Blogger or WordPress

Step 1: Insert your images one after the other

For example:

 

Step 2: Insert the code

In the HTML tab insert the following code to put two pictures on the same line:

<table><tbody>
<tr><td>photo 1-1
</td><td>photo 1-2
</td></tr></tbody></table>

 

Go back to the tab “text” and you should see this:

Step 3: Insert images into boxes.

Slide the two images you have inserted into the article in both boxes. Then remove the text “photo 1-1, photo 1-2.”

Tadam, here’s the result!

It’s your turn now!

EDIT 25 feb : If for any reasons you can’t drag the images in the box, here is another way to put the two pictures side by side:

1) Do the step 1 and step 2 as indicated above.

2) Copy image URL

3) Go in the HTML tab and instead of photo 1-1 paste the following code:

<img border=”0″ src=”INSERT YOUR IMAGE URL” width=”250” />

4) Do the same with your second picture.

You can vary the size of your picture by changing in the code the number of pixel 250.

 

*Credits: Garance Doré

38 Comments
  1. HI! I want to thank you for the code! I finally got it done.
    I did have to try a little before I got exactly how I wanted it. I have a liquid theme I guess that is the reason.

    I thought it might help others:

    I first inserted the photo’s in my post, then cut those codes and replaced them for photo 1-1 and the photo 2-2.

    One of the photo’s was cropped so it was a bit smaller than the other one. So after te image url (right after .jpg” ) I added width=”100%” and width=”98,3%” (the latter being the one that was a bit bigger). That fixed it 🙂

    I hope this might help some other people as well.
    So thanks again!!

  2. Thank you. I would like to also ‘center’ the two images in blogger (and increase image size a little) while still allowing visitor to click an image an have it enlarge to full screen like you have it.

    Bob

  3. Hi,
    where abouts on the HTML should you be putting the code in? also i dont see any boxes after just the text am i doing something wrong here?

    Thanks x

    1. Hi Robyn,

      Just put the HTML code where you want your images displayed into the article. If you are not seeing boxes you can just slide the images where you see the text “photo 1-1” and “photo 1-2”.

      If it doesn’t work stay in the HTML tab and paste the code of your image (from to ) instead of “photo 1-1” :

      COMPLETE HTML CODE OF YOUR IMAGE
      COMPLETE HTML CODE OF YOUR SECOND IMAGE

      Hope that helps!

  4. I tried it with text boxes base around the following code:

    My text here

    One in place of Photo 1-1 and another in place of photo 1-2. It works beautifully. Just one thing there is a dotted line around the text boxes(the table boxes?) How do I eliminate these extra lines?

  5. When I click on the “html” tab, there is already a bunch of codes there. Do I replace all of the code, or copy/paste the new code to the bottom of all of it…?
    anyway your blog is really cool and helpful

  6. what if the first option doesn’t work, and the for the second option, my pictures are personal photos, not from URLs?

    1. Hi Tracy,

      You just have to host your pictures with an hosting service such as Picasa, Imageshack, tinypic.com, etc and grab the url.

  7. Hi sophie. Just tried this both instructions but its not working. my site is mahubya.blogspot.com i don’t know if its because of my tempalte or what. hope you can help me with this

  8. Hi. Thanks for these instructions. I have a question. I was eventually able to slide the pictures into boxes. (It took a little work since there were no real “boxes” around the photo 1 and photo 2 text.) But now the pictures are different sizes next to each other and I want them to be equal. Do you know a way to change their dimensions once they are side by side? (My second picture is larger, even though they looked equal when I had them under each other.) They also go off to the right side of the page way past where the text ends so it looks funny that way. Thanks for your help!

  9. its perfect….. just made it very easily… thanks a lot…..
    i think for post two images side by side “width 300” would work

  10. Hi Sophie, wow, this is exactly what I needed! But for some reason I cannot drag the pictures into the boxes (even though the size of pictures is small)… So there’s just hanging there in the air one after the other with the text along the “photo 1-1” and “photo 1-2” (not in boxes though as on your screenshot).
    Do you know what might be the problem?
    Many thanks! xx

    1. Hi Natalia, I don’t know why you can’t drag the pictures in the boxes. I updated the post with a new solution for you, I hope it helps!
      Best,
      Sophie

  11. It worked! THANK YOU!!!!
    there were no boxes showing up in my version of Blogger, so I just dragged my photos to the text like you said (imagining it was in a box 🙂 ) and voila!

  12. Hi….this worked great but now i need to put a little space in between the two images…can anyone help with this?

    1. In your HTML tab, just put these both tags before and after your code : .
      You will get :

      photo 1-1
      photo 1-2

  13. Where in the code do I put the new piece of code? if I could figure out how to use this it would help me loads! I don’ t know how to do anything in HTML.

    1. Hi Emily! Just past the new piece of code where you want to place the pictures. Write your text in the visual tab and then go in the html tab to paste the code. You can contact me at sophie@madeinblog.ca if you want I make you a tutorial more detailed 🙂

  14. Hi Vanessa. This is the blind leading the blind. I know NOTHING about codes but I looked at what Sophie suggested and copied the second line again and put a 3 into it. It worked. But in Blogspot they have to bee small pictures. And it is a bit fiddly but I got the hang of it. It radically changes the look of a blog page. Go for it!
    F

    photo 1-1
    photo 1-2
    photo 1-3

    1. Worked perfect!! Thank you so much. So grateful for this as it has simplified my pages and improved the look!

  15. AMAZING. Thanks SO MUCH! I have been battling. And with a bit of tweaking I am now putting three side by side. So simple, but it seems so difficult. Got you down in my bookmarks now. Thanks again.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>