Thursday, October 9, 2008

You've Got Questions; I've Got . . .

Well, a partial answer, but after yesterday's whiny post on my lack of germination, here's something of a thank you for not just telling me to shut up and sow.

How to Create Side-by-side Pictures
I tried to write this without just providing links, but while I have been doing a lot of learning around here, I haven't done enough to write about HTML code without having that HTML code function.

So to post side-by-side pictures in Blogger, upload your pictures. Go to the Edit HTML tab under posting (not the Compose tab), and see how your pictures are presented in HTML. The link will start with "a href" and end with "a." You also need to include the punctuation before and after the terms I just mentioned, but whenever I do that in this post, Blogger thinks I am trying to write some HTML code, and it does funky things, but I know you can figure it out. The title you gave your picture will appear in that very long code.

Copy the code on side-by-side photos from this link. (The part with first cell and second cell. Replace FIRST CELL and SECOND CELL with the code generated after you uploaded your pictures.)

(And continue reading there to learn how it is easier to move your pictures using the code for the picture under the Edit HTML tab, rather than trying to move the pictures under Compose.)

You will probably have to adjust the size of your photos if you want them to fit side by side. Your blog has columns with defined widths. The width of your main posting column is probably not wide enough to handle two photos at your regular posting size.

You can either investigate changing the width of your blog here, or you can right click on the picture in either cell you just created and you'll see some squares around the edges of your photos. On the lower right corner of your photo, you will also have a chance to zoom in or expand that photo.

(I don't know what you do if you have a Mac, but Macs are so intuitive that they probably just sense which photos you want to appear side by side and place them that way for you. Right?)

The total width of your two photos can't exceed the total width of that column of your blog, which is why you should scan through the post mentioned above on changing the width of your blog or at least learn what the width is. Look under Layout, and then Template, and look for the Wrapper information. If your Main Wrapper is say, 800, then you need each picture to be 400 (or slightly less if you have a margin) in order for each picture to fit.

If you are still here, you might also want to play around with changing the widths of other columns in your blog by using what you just learned about wrappers.

And then if your head still hasn't exploded, you can just go ahead and learn everything there is to know about HTML and CSS, and report back to the rest of us!


  1. What! I am going to try this after a copy and paste to another page,maybe then I can accomplish this! Thanks, Gail

  2. Vertie, THANK YOU! I'd been wondering how to do that.

  3. Thanks for the detailed information - you are awesome! Whether I can do any of this is another matter.

    Vertie, sometimes I go to a blog and everyone is commenting on how great the new/changed/recolored template is. Most of the time I didn't notice (only focused on the words and photos) and can't even remember what the old one looked like. That's why I have to ask - did you use the change-width function for this blog?

    I also see that dragging the photos around can break the code, which might explain why mine sometimes won't obey me!

    Annie at the Transplantable Rose

  4. Thanks Vert. It may take me a while to understand all you are saying, but while there is a discussion about posting can anyone tell me why when I add a photo it always appears at the top of the post. I don't seem to be able to get it to go in after the words I have composed. There must be a way round this rather than copying and pasting it in the right place. On our family blog on Wordpress there is no problem adding photos.

  5. Good luck, Gail and Cindy. Can't wait to see your photos.

    Annie, I did change the width of the main posting column, which changed the width throughout my blog so you can't see a before and after width. But it does show why I changed to putting the photos in the middle, instead of on the left.

    Jenny, the answer might be Word Press. I have considered switching to that format. I looked around a fair amount and wasn't able to find an answer for Blogger, but I did learn that using center photos will make the text placement easier. I have started importing all photos at once, and then moving them around using the HTML code.

  6. Great tips! I'd been assuming that people were just pasting two pictures in side-by-side in Photoshop and posting them as one pic.

  7. Wait a minute... I already know how to do what Lori said!


  8. Thanks. I'll save this for a child-less day when I can focus on it. It looks like great info.

  9. Cool thanks! I'll try it and let you know how it goes.

  10. Thanks a lot Vert ::slamming head against wall:: ;-)