Blogger Images Tutorial

If you want to arrange photos in other than what standard blogger provides, you'll need to upload those photos in html mode, rather than in compose mode, and modify the code that Blogger generates.

When you insert a single image with image alignment center and image size medium:

this is the code that blogger generates:

<div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtTr9pPpOidWB4m0Ei0HEtMAtGCOkTxZ6YxOEuWsUQ5mUAu7kFnQJeYLCWpFZCmK7hNvvjNVoeQggiuu1fDpjfHdRMv2RKHkTY8UwqFxb_8PwdYdl_a8PXetKhNqqLl3p4GvGC/s1600/NICOLE.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtTr9pPpOidWB4m0Ei0HEtMAtGCOkTxZ6YxOEuWsUQ5mUAu7kFnQJeYLCWpFZCmK7hNvvjNVoeQggiuu1fDpjfHdRMv2RKHkTY8UwqFxb_8PwdYdl_a8PXetKhNqqLl3p4GvGC/s320/NICOLE.jpg" height="320" width="223" /> </a></div>

... except for the color, which I added for clarification (Blogger is not so kind).

The code consists of three statements:

• The div statement, which begins with <div and ends with </div>, encloses a section of code. It specifies information about the code that it encloses --its alignment (style="...text-align: center;">) and other specifications that don't concern you.
• Enclosed within the div statement is an address statement, which begins with <a and ends with </a>. It specifies the address where the image that you uploaded is stored -- this is the original-size image that is displayed when you click on the image in the blog -- and specifications about the alignment of the image. (These would be quite different if you had specified right or left alignment instead of center.) None of the <a statement is of concern to you.
• Enclosed within the <a statement is an image statement that begins with <img and ends with just />.The img statement specifies information about the image as it will appear in the blog --the border around the image, the address where the image of the size you specified is stored, and the image dimensions (its height and width). Only the image dimensions are of concern to you.

When you want to display several images in row, you have to upload the images in html mode instead of in compose mode, because you have to specify "image alignment = none", and that's not an option in compose mode. (Dear Blogger!)

This is how to display several images in a row:

1. Select html mode.
2. Place the cursor where you want to place the images (not so easy to find in html mode, but just look for whatever words will precede the images.
3. Select the "insert image" icon.
4. Choose the images you want to display, one at a time, in the sequence you want them to appear.
5. Click each image to select it -- a blue border appears -- then click the " Add selected" button.
6. Select image alignment "none" and an image size that will display the images as you want. This takes some trial and error or experience. Let's start by selecting image size "small" Then click the "OK" button.

This is the result:



Well, that didn't work. Even the small size of these photos don't fit in one row. So we'll have to make them smaller.

To change the size of a displayed image, specify either its width or its height in the <img statement. You could figure out the proportional image size and specify both of its dimensions, but you don't need to -- when you specify either dimension, blogger will calculate and provide the other one.

So, experiment with this by making the three small images wide enough to about fill a row of your blog. Your blog width is about 380 pixels so each of the images would be about 126 pixels wide. Some experimentation revealed that you need to allow for a little space between and around the images, and 124 pixels turns out to be just right.

Insert the width specification in each of the three <img statements. I like to put it just before the <border specification because that stands out clearly to me. Like so (your modification is shown in red):

<img width="124" border="0" src= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9kHc9xPlNrnVVoy7Oe2x3nCEiD0-Lct8pYCNPUCMR5CQShqohPnqc4KrYDy9G9pTz_NJpwRDPoJi6keHJl-8-JaPDpAqSbJH2aSUjG5ZKBv25q4cQLBv-u0yWawe1KjUljm3/s200/NICOLE.jpg" />

Warning: In some cases, blogger generates an <img statement that does specify the width and the height of the image. If you're modifying such a statement, replace the existing width dimension and delete the height dimension.

So, here's the result. The images fill the row nicely, but I don't like their being different heights.

The solution is obvious -- specify the image height instead of its width. Determining an appropriate height again takes some experimentation. Hint: blogger's small size was 200 pixels high, which is indicated by the parameter "s200" that is part of the image address in the <img statement, and that was too tall. Turns out that a height of 180 pixels works fine. Like so:

<img height="180" border="0" src= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9kHc9xPlNrnVVoy7Oe2x3nCEiD0-Lct8pYCNPUCMR5CQShqohPnqc4KrYDy9G9pTz_NJpwRDPoJi6keHJl-8-JaPDpAqSbJH2aSUjG5ZKBv25q4cQLBv-u0yWawe1KjUljm3/s200/NICOLE.jpg" />

Here's the result.



Just one more thing. If you add two more images of the same size to this group, as I did in New's Wedding, they'll look like this.



Because you specified "image alignment = none", Blogger did not generate a <div statement to align the images, so the last two are at the beginning of the row and the leftover space is blank. If you don't like this appearance, you can enclose the group of <a and <img statements within a <div statement that aligns them in center. You could enclose just the last two images, but I think it's better to enclose the whole group. If you had chosen a height such that the first three images didn't quite fill their row, they'll be aligned too.

insert a <div statement before the section of code generated for the images and </div> after it, like so:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9kHc9xPlNrnVVoy7Oe2x3nCEiD0-Lct8pYCNPUCMR5CQShqohPnqc4KrYDy9G9pTz_NJpwRDPoJi6keHJl-8-JaPDpAqSbJH2aSUjG5ZKBv25q4cQLBv-u0yWawe1KjUljm3/s1600/NICOLE.jpg" imageanchor="1" ><img height="180" border="0" src= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy9kHc9xPlNrnVVoy7Oe2x3nCEiD0-Lct8pYCNPUCMR5CQShqohPnqc4KrYDy9G9pTz_NJpwRDPoJi6keHJl-8-JaPDpAqSbJH2aSUjG5ZKBv25q4cQLBv-u0yWawe1KjUljm3/s200/NICOLE.jpg" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnp6gEgRfhA_vuz6S_QeoI0ybHzkQfu9jRv62TCgmx3HQW2UvuXBDprjfCK-dOLDzYk0ey-hPzsjYeVnCVJvaLzP4x2DRk8cCX9MwaTyWtMKNvv6q0ABZtB5njAAV5GzBX561/s1600/CHARMIN.jpg" imageanchor="1" ><img height="180" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSnp6gEgRfhA_vuz6S_QeoI0ybHzkQfu9jRv62TCgmx3HQW2UvuXBDprjfCK-dOLDzYk0ey-hPzsjYeVnCVJvaLzP4x2DRk8cCX9MwaTyWtMKNvv6q0ABZtB5njAAV5GzBX561/s200/CHARMIN.jpg" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZODI3-vfSmkb0ETZYabQG7-PMY4FHXR_fjf-kijWwxqcvaa7LXjiuZ-RC96mXcAcrjnLqzVVGw9ur1gWBCYkHQdaypgjVYogMA6pAMSGENCRmL2aXbR98IzPIAPL3z3T91cmj/s1600/SHELLEY.jpg" imageanchor="1" ><img height="180" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZODI3-vfSmkb0ETZYabQG7-PMY4FHXR_fjf-kijWwxqcvaa7LXjiuZ-RC96mXcAcrjnLqzVVGw9ur1gWBCYkHQdaypgjVYogMA6pAMSGENCRmL2aXbR98IzPIAPL3z3T91cmj/s200/SHELLEY.jpg" /></a> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcU8USf7yN7gcLAgOs8e76CvDFDcRLriS0Q8n22PFP3QqNyIDahUM7eoxaWqwN8KVsfd5McBBq0j0hxxT1eEWW1r7gQzeKGtcFal4jKAldaH7lP24USgoQkCDNMePdRkNtVuY7wg/s1600/RAPP.jpg" imageanchor="1" ><img height="180"border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcU8USf7yN7gcLAgOs8e76CvDFDcRLriS0Q8n22PFP3QqNyIDahUM7eoxaWqwN8KVsfd5McBBq0j0hxxT1eEWW1r7gQzeKGtcFal4jKAldaH7lP24USgoQkCDNMePdRkNtVuY7wg/s200/RAPP.jpg" /></a><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvFJobGUMNSqQw7glBlQ3lyrE52hI8DOIRhvhECaNQLbq1aaISgl8Gh5sCbLJj4IEgbOa5ubRB9lEmU9dcxovpTrqRr6B3lgqWuwc-H8i5i-YtwQK08LK5edcCNXx30uP2fPyZ9Q/s1600/SEB.jpg" imageanchor="1" ><img height="180"border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjvFJobGUMNSqQw7glBlQ3lyrE52hI8DOIRhvhECaNQLbq1aaISgl8Gh5sCbLJj4IEgbOa5ubRB9lEmU9dcxovpTrqRr6B3lgqWuwc-H8i5i-YtwQK08LK5edcCNXx30uP2fPyZ9Q/s200/SEB.jpg" /></a>
</div>

This is the result -- perfection!