How to Format Your Images Into Rows - My Bloggiesta Tip

I've actually had a few people ask me about formatting photos, which is totally surprising, considering I'm not exactly the most savvy of bloggers.  So, I thought I'd tell you a little about how I do it (obviously in blogger).  Plus, bloggiesta is the perfect time for that, even if I'm not really participating due to moving this weekend.

Want your images to line up like this?

First, nearly all of my book cover photos come from Amazon affiliates pages, so that's what I'll show first.  To get them all lined up in the middle, here's what I do:

I can usually only fit about three across (of the large sized covers) on my blog format, so that's what I stick to.  You can play around with yours to see how many fit on your blog.  I copy and paste the html from the amazon links (um, in html mode, obviously).  They generally come without any alignment formatting (ie not automatically centered), but with loads of weird extra code, so both good and bad.  I usually will paste the three photos all in a row, putting one space between their codes. 

Then, when I have all three together, I will center them, by putting the html text in instead of using blogger's centering feature (ie: <div style="text-align: center;">).  I've had issues with blogger's centering option when I try to get all three centered together, so typing the code myself is generally the easiest.  This puts the three images all in the same <div> and centers them all together in a row.  To do multiple rows, I generally do one hard return between each set (<br/> in html), but more space can easily be added either in html mode or compose mode.  Then I start a new <div style="text-align: center;"> for the next set of three and so on.  Here's what the code looks like (in html mode, of course):

<div style="text-align: center;">
<img 1 code> <img 2 code> <img 3 code>
</div>
<br />
<div style="text-align: center;">
<img 1 code> <img 2 code> <img 3 code>
</div>

Now, for images that you add using blogger's insert image button, these will come automatically formatted, which can be good or bad.  They generally don't let you line up images neatly together, but put only one per row.  This is what the code looks like when an image is uploaded:

<div class="separator" style="clear: both; text-align: center;">
<a href="IMG LINK" imageanchor="1" style="cssfloat: right; margin-left: 1em; margin-right: 1em;"><img border="0" dea="true" height="192" src="IMG LINK" width="320" /></a></div>

Some of that extra stuff just gets in the way of what I want, so here's my method of fixing that:
Essentially, I will put the three images (or however many you want per row) all in one <div> - and I usually replace the <div class> code above with the shorter and simpler one from above, <div style="text-align: center;">  Putting multiple uploaded images in the same <div> will require you to delete the <div> code from the other uploaded images, since they all come with it attached (both the opening tag <div class, etc> and the closing tag </div>).  I also usually change the "margin-left" and "margin-right" to "0em", since I find it adds a little buffer around the edges of images that interferes with my alignment.  So here is what three uploaded images' code would look like:

<div style="text-align: center;">
<a href="IMG LINK 1" imageanchor="1" style="cssfloat: right; margin-left: 0em; margin-right: 0em;"><img border="0" dea="true" height="192" src="IMG LINK 1" width="320" /></a> <a href="IMG LINK 2" imageanchor="1" style="cssfloat: right; margin-left: 0em; margin-right: 0em;"><img border="0" dea="true" height="192" src="IMG LINK 2" width="320" /></a> <a href="IMG LINK 3" imageanchor="1" style="cssfloat: right; margin-left: 0em; margin-right: 0em;"><img border="0" dea="true" height="192" src="IMG LINK 3" width="320" /></a>
</div>

And that's it!  There is obviously other code there I could likely get rid of, but since I'm not sure what it all does, I figure it doesn't hurt to leave it :)  You can also change the size of the images from the code as well, but be warned it doesn't keep the height/width ratio the same, so they could look stretched. You can also put the images all together on the right or left by changing "center" in the <div> code to "right" or "left."

Anyway, hope this helps some of you align your images into rows!  Let me know if this was totally confusing or if you have any other questions.  

If you buy through my Amazon linkage, I will get a very small percentage