Blogger: JavaScript for image thumbnail?

Question

In Blogger, my image thumbnails are cropped and not showing the original image.

How do I show a thumbnail of the uncropped original image?

My blog: ravitejasps.blogspot.in

Screenshot of the original image on my blog post:

Screenshot of the cropped image on the homepage:

Snippets used to create thumbnail:

HTML:

<a expr:href='data:post.url'>
    <div class='img-thumbnail'>
        <span class='overlay' />
        <script type='text/javascript'>
           document.write(bp_thumbnail_resize(&quot;<data:post.thumbnailUrl/>&quotenter code here;,&#39;<data:post.title/>&#39;));
        </script>
    </div>
</a>

JavaScript:

function bp_thumbnail_resize(image_url,post_title)
{
    var image_width=200;
    var image_height=160;
    image_tag='<img width="'+image_width+'" height="'+image_height+'" src="'+image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')+'" alt="'+post_title.replace(/"/g,"")+'" title="'+post_title.replace(/"/g,"")+'"/>';
    if(post_title!="") return image_tag; else return ""; 
}

Answer 1

Images are cropped by default, but that can be changed

By default, Blogger automatically crops thumbnails to a 72-pixel square. In the snippet you have posted, you may change this in the .replace(…) statement by removing -c from the replacement string:

So, this…

image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'-c/')
                                                                ^^

…becomes this…

image_url.replace('/s72-c/','/w'+image_width+'-h'+image_height+'/')

In this scenario, the image will be restricted to the smaller of the two dimensions.

Alternatively, you can just change your replacement snippet to simply use a single "size" (this works like max-size) while removing the -c:

image_url.replace('/s72-c/','/s200/')

For more examples of ways you can configure the size and cropping of thumbnails, see: Resize the Default Resolution of Thumbnails in Blogger | mybloggertricks.com