Mommy Hacks #4 - Get Images to Behave in Blogger

First off, I am a fan of Blogger.

I love the way you can easily link images into your posts.

But, I absolutely don't love how hard it is to make a group of images look half way decent.

Take for example the 3 images below, I wanted to feature at The Friday Baby Shower.

Using the Compose mode in Blogger, the best I can do is get them in a column - pretty rubbish, particularly because I've got another two to include as well.

Luckily, this is very easy to fix in the HTML and I'll show you how below.

Before You Get Started

Before you get started with a Mommy Hack please do BACK UP YOUR BLOG! It will only take a minute and could save you so much grief.

Take the Images out of their Containers

The problem is Blogger typically puts each image into a "Container" called a div, which doesn't behave very nicely when you try to group it together with other divs.

So what we're going to do first is take all these images out of the div containers that Blogger has put them in - these are the bits highlighted in pink below.

We then strip out the image styling, highlighted in green - the bit which starts style="

And finally, we make all the images the same height - highlighted in blue - and remove their widths - highlighted in yellow - which aren't needed.

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfz1YUz3Ev99muNDtRyQIaoEPuBVZW7Qpyc1FAYZMZf7r_LIhgOLV5agquiQ-dkBvMKySGGzFldi1aVPP_h_Eu_nmqSQYPGtf7kpvdteTr6aH4fO73X3Fi8_XAU8y_s3sFKd_3T-ZUutgE/s640/Day+7.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: right;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfz1YUz3Ev99muNDtRyQIaoEPuBVZW7Qpyc1FAYZMZf7r_LIhgOLV5agquiQ-dkBvMKySGGzFldi1aVPP_h_Eu_nmqSQYPGtf7kpvdteTr6aH4fO73X3Fi8_XAU8y_s3sFKd_3T-ZUutgE/s200/Day+7.jpg" width="150" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYh4UmEkzkYfPxh9Iab3wwPA4Wlr-CfXU5UGKVkjAmGfg3BH0QRtOAhCHOVVQtqsOxUVMcRRJ9JbuAhyxQ9WmwSJimPBYwri78hRRhyphenhyphenzP_IKnIYLQ5YaCMH9FtYCouaKS3V5KnIz576-X/s640/014.JPG" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: left;"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYh4UmEkzkYfPxh9Iab3wwPA4Wlr-CfXU5UGKVkjAmGfg3BH0QRtOAhCHOVVQtqsOxUVMcRRJ9JbuAhyxQ9WmwSJimPBYwri78hRRhyphenhyphenzP_IKnIYLQ5YaCMH9FtYCouaKS3V5KnIz576-X/s200/014.JPG" width="200" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://bakingaitch.files.wordpress.com/2012/11/dsc_2372.jpg?w=167&amp;h=300" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="130" src="http://bakingaitch.files.wordpress.com/2012/11/dsc_2372.jpg?w=167&amp;h=300" width="111" /></a></div>

Put the Images Back in One Container

The images now look like this - much better but I don't want them all squidged on the left.



So we're going to put them all back in one container which we can tell to display in the centre ... this is very simple just add the lines in purple around all three images.

<div style="text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfz1YUz3Ev99muNDtRyQIaoEPuBVZW7Qpyc1FAYZMZf7r_LIhgOLV5agquiQ-dkBvMKySGGzFldi1aVPP_h_Eu_nmqSQYPGtf7kpvdteTr6aH4fO73X3Fi8_XAU8y_s3sFKd_3T-ZUutgE/s640/Day+7.jpg" imageanchor="1"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfz1YUz3Ev99muNDtRyQIaoEPuBVZW7Qpyc1FAYZMZf7r_LIhgOLV5agquiQ-dkBvMKySGGzFldi1aVPP_h_Eu_nmqSQYPGtf7kpvdteTr6aH4fO73X3Fi8_XAU8y_s3sFKd_3T-ZUutgE/s200/Day+7.jpg" /></a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYh4UmEkzkYfPxh9Iab3wwPA4Wlr-CfXU5UGKVkjAmGfg3BH0QRtOAhCHOVVQtqsOxUVMcRRJ9JbuAhyxQ9WmwSJimPBYwri78hRRhyphenhyphenzP_IKnIYLQ5YaCMH9FtYCouaKS3V5KnIz576-X/s640/014.JPG" imageanchor="1"><img border="0" height="130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheYh4UmEkzkYfPxh9Iab3wwPA4Wlr-CfXU5UGKVkjAmGfg3BH0QRtOAhCHOVVQtqsOxUVMcRRJ9JbuAhyxQ9WmwSJimPBYwri78hRRhyphenhyphenzP_IKnIYLQ5YaCMH9FtYCouaKS3V5KnIz576-X/s200/014.JPG"  /></a></div>
<a href="http://bakingaitch.files.wordpress.com/2012/11/dsc_2372.jpg?w=167&amp;h=300" imageanchor="1"><img border="0" height="130" src="http://bakingaitch.files.wordpress.com/2012/11/dsc_2372.jpg?w=167&amp;h=300"/></a>
</div>

And now, if I go through the same process for my other 2 images, I have my five featured posts looking all neat and tidy together ...

Feedback

Do let me know if this was useful - was it too easy? too hard?  And what other problems have got you stumped? Tell me about them and I'll come up with a solution.

If you found this post useful, you might also enjoy ...

Mommy Hacks Newsletter

If you would like to receive more Mommy Hacks and blogging tips subscribe to the Mommy Hacks mailing list

This post has been shared at ... Sugar Bee Crafts,  Home Stories A to Z,  The Shabby Creek Cottage,  Joyful Homemaking,  Serenity Now, The Gunny Sack, Crystal and Co, Ginger Snap Crafts, Trendy Tree House, Domesblissity, Ladybird Ln, Not Just a Housewife, Clever Chicks, Be Different Act Normal, Sumos Sweet Stuff, Keeping It Simple, Lines Across, Get Your Crafts On, A Bowlful of Lemons, Clean and Scentsible,  Delightful Order, We Are That Family, By Stephanie Lynn, Whipperberry,  More the Merrier Monday,  I Should Be Mopping the Floor,  Carolyn's Homework, Shabby Creek Cottage, 36th Avenue, Six Sisters Stuff, 52 Mantels, My Uncommon Slice of Suburbia, Elizabeth and Co, Whatever Goes, Finding Fabulous, The Thrifty Home, Skip to My Lou