Wednesday, July 04, 2007

Side by Side Pictures with Blogger Templates

This tutorial replaces the first one I posted about side by side pictures. That one is fine, but I found myself wanting to know more about the templates and now see that I can do better in one post. (I've kept that post, just backdated it so it goes to the bottom of the heap. I'm leaving it because of the Edit Html technique I included in it and Rima's interest in it. Otherwise, everyone else can skip it without hurting my feelings at all.)

So, let's try it again. First know that if you upload your pictures through Blogger, you have three sizes available. I only played with landscape dimensions, but since portrait dimensions are less wide you might, with certain templates, be able to squeeze one more picture in a single line. I'll leave that up to you to play with. Using just the landscape test, though, here's what I found.

Small will result in a 200 X 150 pixel picture.
Medium will result in 320 X 240 pixel picture.
Large will result in a 400 X 300 pixel picture.

If the picture you upload is actually smaller than the size you pick, it will post the dimension of your original picture.

I wanted to see how every standard template available from Blogger handles the attempt to put pictures side by side. I have decided for now to find a solution without modifying the actual template. Templates can be tricky and I wanted to know how things work without being tricky. Not today, anyway.

So, how do each of the standard templates handle these standard sizes if you try to put them side by side?

Group 1: Will never put a two pictures side by side. The body of the template is too small for even a pair of the "small" pictures. (Portrait sizes might fit side by side, or a custom size smaller than 200 pixel width. For my examples I'm only using the standard sizes of everything. This information should get you started, and then you can experiment too.)
  • Minima
  • Rounders
  • Minima Lefty
  • No. 897
  • So of Moto
  • Snapshot
Group 2: Will at most pair two of the "small" size pictures.
  • Denim
  • Scribe
  • Dots
  • Thisaway
  • TicTac
Group 3: Will post both the small and the medium sized (320 wide) pictures side by side. If you wanted three pictures across this would be the first group you could use, but your pictures would have to be of the small size.
  • Herbert
  • Harbor
  • Tekka
Group 4: Can accommodate all three sizes of pictures, paired side by side. In addition, you could squeeze up to four of the small sizes to be side by side, but still only two of the medium size in the landscape dimension.
  • Sand Dollar
  • Sample II. But don't use Sample II. Not only is it ugly, but after you use that template, even if you switch back to another template, your template won't line up left and right any more. You'd have to fix it by hand.
That covers the templates Blogger offers. In the end, of course, all of this is based on mathematics. Each template has its own maximum body size and sometimes even its own padding it does within elements of the template. Using that knowledge you could do all of this that I've done today mathematically. I thought it might be helpful to everyone though to get a quick overview of each template's possible accommodations.

Here's some other tidbits that might help you:
  • You can upload more than one picture at at time. On the Upload screen, you'll see a link "Add more pictures." You can do up to five pictures in one upload. Start the upload, go take out the trash. It takes a few minutes.
  • After my pictures were uploaded, even when I did them as a group, Blogger always put each on a line by itself. To get them side by side, I hovered over them until I saw the cross-hair-x-shaped thingie. I held the left button of my mouse and moved the picture to where I wanted it. When I was happy with the move, let go of the mouse button. Sometimes this works well, sometimes it doesn't. Maybe it's me. (And that other post I wrote has another option for handling the inserted Blogger line break. Probably instructions for the brave-hearted only.)
  • There are other Blogger templates out there available from other users. It might be fun to try one of those, and if all else fails, you can always go back to one of the standard, reliable Blogger ones. Again, that's for those that want to branch out and have a high tolerance for growing pains. And extra time. Lots of extra time.
  • And lastly, just to make things interesting, here's one more element that dictates whether your pictures will line up side by side: the pixel size of your screen, or your viewer's screen. If what I've written here doesn't work for you, then likely you have a screen too small to display the pictures as I've said they would. Try a template from Group 2 with only small sized pictures.

I hope that helps. This has been a good exercise for me too because I've been thinking about going with a standard template for a while and needed to know which would suit my needs best.

When I do that I'll write another tutorial showing step by step how I modified and customized it. Won't that be fun!

I need a long nap now, though.


Hannah's Mom said...

Oh my gosh!!! You are a wealth of information!! Thank you and maybe tomorrow I can actually sit and play. Happy 4th of July!!

Frances said...

You are such a sweet one, Debi
I shall study this at leisure and try out the techniques
I left that because it was so interesting, I yawned when i typed thanks and that new word appeared.

Bobbie said...

Frances, was that pronounced tuh-jamils, rhymes with puh-jamas? :)

Debi, thank you for this wealth of information. I was really expecting that you put all your photos in Photoshop and somehow combines them into one, then uploaded it. Some of this stuff gets complicated, huh?