Resize and Crop Thumbnail Image

We all know one of the most annoying things in most of the Blogger Template is the thumbnail image distortion due to the adjustment in css. After a period of time to find out I discovered a trick to help resize and crop the image the correct size by tweaking the url. From there I make this jQuery code that automatically adjust thumbnail for any Blogger Template.

Features

• Resize images without blurring.
• Crop the image to the correct size.
• Only works with image uploading in Blogger and Picassa.
• Works with many elements of the blog.

How to use in Blogger

Login into Blogger choose your blog and go to Template >> Edit HTML. Now in the template coding, search for </head> and just above it paste the following code.

<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
  var w = 200;
  var h = 150;
  $('#PopularPosts1, #Related-Posts, .Something-Else').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + w + '-h' + h +'-c')});
    image.attr('width',w);
    image.attr('height',h);
  });
});
//]]></script>

Now to resize and crop images you just have to add the ID or CLASS of the tag so that it could fetch all the images in it and do job. You can add many common IDs and Classes as you like.

If you want to do this for auto readmore with thumbnail, then you should use this ID "#Blog1" and put the above code in this code.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
  <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    PUT CODE HERE.
  </b:if>
</b:if>

So ít wont resize and crop at post page.

Once everything is done, save the template by pressing that orange “Save” button located at the top of the screen and now the quality of your images won’t let you down.