Tip: Removing default spacing between images in Blogger

Sometime in the switch to the new interface (perhaps?) a new default behavior was added to Blogger: margins were added to images with inline CSS. This is different than whatever margin or padding is adding, well, margins or padding to your web page. This is a default action and code that Blogger adds when it inserts an image into your blog post or page.

For example:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoHDmjRjcsWWhp9mzwSFpnMslahElao0tHIgDc0lKm5oytnMIuHebVu_yx3wPsqFP9t3U19z5XuW6v9qMyYna7Ny3hjPn9MWvcQpDsyLu_kfxx4olH3XvOTEvzz0n_Btyr7gZeTwHjXVUc/s1600/homepage2.png" imageanchor="1" style="margin-left: 1em; margin-bottom: 1em;"><img border="0" height="229" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoHDmjRjcsWWhp9mzwSFpnMslahElao0tHIgDc0lKm5oytnMIuHebVu_yx3wPsqFP9t3U19z5XuW6v9qMyYna7Ny3hjPn9MWvcQpDsyLu_kfxx4olH3XvOTEvzz0n_Btyr7gZeTwHjXVUc/s320/homepage2.png" title="homepage" width="320"></a>

In this example you'll see style="margin-left: 1em; margin-bottom: 1em;" in the link that wraps the image.

This generally works fine if you're placing your images to the left with text wrapping, to the right with text wrapping, or centered.

When it becomes a problem is when you have a blog that typically uses large images to the full width of the column, and then likes to stack the images on top of each other with little or no space. That default behavior creates gaps that are annoying to get rid of; you'd need to go into the HTML for each and every post and remember to remove the margins in the wrapping HREF.

While the solution below might seem like a bit of an overkill, it shouldn't to the people that are frustrated by this default behavior with image-heavy blogs.

This code goes right above </head> in your template and uses JQuery to find each image in your blog article(s) at the time of the page being loaded and automatically removes the padding that is written in that default behavior.

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[

/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/

$(document).ready(function(){
$('.post-body').find('img').each(function(n, image){
        var image = $(image);
        image.parent().css('margin-left',0).css('margin-right',0).css('margin-top',0).css('margin-bottom',0);
    });
});
//]]></script>


View a clean version of the code.


Comments

  1. THANK YOU! This is the only one that worked that I could find! Thank you so much!

    ReplyDelete
  2. this is awesome! it worked first time! thank you so much!

    ReplyDelete
  3. I can't get it to work on my blog. Could I get help?

    ReplyDelete
  4. I put this into my HTML, and it worked great!! I notice it helps with pictures up and down from each other. I'm wondering if there's another code I could put in to work for pictures side by side? I still can't get them right next to each other without a gap. Any help would be so appreciated!!! grbuie@gmail.com

    ReplyDelete
  5. this problem alone made me consider moving to wordpress, whose themes have images flush with text.

    i can't say thank you enough. thank you, thank you, thank you...

    ReplyDelete
  6. Izabela JaszczyszynJune 12, 2013 at 8:43 PM

    Thank you, this really helped!

    ReplyDelete
  7. How do you use it?? could you show it with images??? plz..

    ReplyDelete
  8. Thank you, thank you so much! Your solution was the true one´s in all over the web! You are a ^^```´´´´,,, machine!

    ReplyDelete
  9. It won't work on my blog either :(

    ReplyDelete

Post a Comment