Posting Multiple photos on one line

If you want to post 2 or more photos on one line, but don't want to "collage them" (like I've done HERE), you can use this method. Usually it takes a little math. But because I hate math myself, I'll spare you that part if you already have a wide/stretched Beautify My Blog layout. To widen your layout yourself, visit HERE. Here are the values you'll need:

Wider layout: Your blog's "main wrapper," or posting space, is 650 px. So if you are posting 2 photos, they need to each be 310px wide, with a space bar "space" in between.

Basic Minima Blogger layout: the magic number is 195.

I just saved you a big math headache. I love you, too.

Now, follow these steps:
1. Upload your photos with the settings as "none" under layout, and "large" for the size:


2. Click on your HTML tab. You will need to delete the height—including the semi colon after it—of each photo (below in orange), and then enter the value of the width in place of the original width (below in purple). It will look like this (the value will be "195px" if you have the basic Minima template:

3. Click back on your Compose tab and see the results. I had to add a space between the two, and voila! Two on one line. You may have to tweak this a little bit to get the exact size and spacing, but once you determine the right size for two images (or three, etc.), make a note of it!

*****

NOW. If you are determined to do this the long, mathematical way, here you go. Bon chance.

1. Determine the width of your main wrapper. You can find it here:

Go to Layout/Edit HTML. Scroll down until you see the code that says "main wrapper". Find the width line:

#main-wrapper {
width: 650px; <------------ This is the value you want to remember
background: #ffffff;
padding-left: 12px;
padding-right: 10px;
border-right: 1px solid #C3E5E4;
margin-left: 0px;
padding-top: 0px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

2. Determine the padding and image border width of your template by following the same directions (repeat the steps above for "padding" and "image border").

3. Now, here's the formula...

main wrapper width - 2(padding + image border width) = how much space you have for two images on one line. In other words, if your main wrapper width is 650, your padding is 4px, and your image border is 1px, here's your equation:

650 - 2(4 + 1) = 650
or
650 - 10 = 650

That means, you'll have 650 pixels worth of width in your main column, in which you can post images. Now, there's a bit more math to be done, since you'll need to divide that number by the number of images you want to post in one line.

If you want to post two images in one line, you'll divide 640/2, giving you 320. But you need a space in between them of 10 px. So that means that both images will be 310 pixels wide, to sit on the same line.

To upload and resize those photos, follow Step 2 in the first part of this tutorial.