Tip: Automatically resize your Blogger post's images

You've been blogging along for a while now, inserting your images into your blog posts and sizing them to fit nicely into the template that you've selected. A few hundred posts later you decide it's time to make some changes to your template... the unfortunate part? Now all of the images in all of your posts have a set size leaving a gap in your blog posts.

Note: this article also applies to you if you simply want all of your images to go full width for the content column.


You have 3 options:
  • You can live with it and/or change your template back
  • You can go back and edit the images in each post
  • You can add a script which will resize the images automatically for the viewer, but leave the underlying post untouched.
The script below uses JQuery to automatically find the width of your Blog1 element (the standard place where blog posts are displayed), then manipulate all of the images within the post-body elements within your page. Here is the clean version of the code. Please this code into your template before the <head> tag.


<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(){
    // the dimension of your content within the columns
    var areawidth = $('#Blog1').width();
    $('.post-body').find('img').each(function(n, image){
        var image = $(image);
        var height = image.attr('height');
        var width = image.attr('width');
        var newHeight = (height/width * areawidth).toFixed(0);
        image.attr('width',areawidth).attr('height',newHeight);
        var greater = Math.max(areawidth,newHeight);
        image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)});
    });
});
//]]></script>


As usual, please leave any questions, feedback or bugs in the comments below!

Comments

  1. I put this script before the closing head tag of my blog, is that the correct location?

    The reason I ask is because... the images in individual blog posts size properly but only the image of my first post resizes on the home page of my blog. I've checked the action in both Chrome and IE and it appears the same. Any input?

    ReplyDelete
    Replies
    1. You're right, there was a tiny bug in the script which has now been fixed! Grab the clean version from the link above which now includes the fix. Please let me know if anything else crops up

      Delete
  2. after putting it, the images resize at first but then it dissapear =|

    ReplyDelete
    Replies
    1. can you point me to a link where this behavior occurs? it resizes then disappears? that's a new one...

      Delete
  3. it's not working can u please check in my blog

    allmytutorials.blogspot.com

    what i'm doing wrong

    ReplyDelete
    Replies
    1. Please be a bit more specific; which page and where is it not working?

      The main reason(s) seem to be that your template does not contain a Blog1 element on the homepage, nor do you use the .post-body class in any of your interior pages. You need to change both of those element references in the script to match your customized template in order for the script to work.

      Delete
  4. Nice Script David makes ones image galleries look sharp.
    Kr
    Jan

    janditlev.com

    ReplyDelete
  5. brilliant this is just what i needed! thanks

    ReplyDelete
  6. Hi there,
    great script. I'm using it now with your BoyBurnsBlog template.
    My problem is this: Auto-resizing works great for horizontal images, but for vertical images, they are resized too large. Blogger uses a low-res preview image (s320) that links to the original image when you click on it (s1600). When your template resizes a vertical preview image, it looks low-res and aliased.
    http://thirdeyedea.blogspot.ca/2010/06/kaolack-rides-motorcyle-taxi-drivers-of.html

    I've tried replacing the "s320" with "s1600" in the link of the image directly in the post (on the html side), but the template always seems force the preview image to default to "s479" resolution no matter which way I rub it (right clicking and selecting "view image" gives this:
    https://lh3.ggpht.com/_dgGOI8ej24o/TBKvQVF19GI/AAAAAAAAH7w/PSUtg2vhilE/s479/08+-+F1000029.jpg)
    Where is it pulling this number from?

    Is there any way to
    a) force it to use a hi-resolution image for the preview image, or
    b) force a maximum size for vertical images?

    Any help you could give would be much appreciated.

    Thank you.
    P.M.

    ReplyDelete
  7. Hey. Thanks it worked great! All my images are resized. It happens now and then that I want a smaller picture in a post. That does not seem to work. They are all resized and I can't change my images size at all. Is there a way I can get a specific photo to a smaller sizy by editing it in the post while I have this code on?

    ReplyDelete
  8. Hi Anton, that's unfortunately the point of this code, it's to automatically resize all of the images in your blog post to full width! I might make a version of this that would look for a "do not resize" attribute, but that's currently not in the cards, sorry.

    ReplyDelete
  9. Hola! Please! it's not working in Home, can you please check in my blog? Tk!

    http://www.lamoulinex.com.ar/

    ReplyDelete
  10. I'm desperately trying to get this script to work, but when I create a post with it, the images will look fine for a quick second and then disappear. There is a bounding box around where the images should be, but the icon for a broken image is all that's inside. Any suggestions?
    Thanks a lot!

    ReplyDelete
  11. Any chance you can help? This worked for me but now my images are going into the right sidebar and changing the widths in the blogger template isnt working http://jessstylerules.com

    ReplyDelete
  12. It first helps if the code is in your template (it isn't when I just checked). But also you have so many javascript errors in your site as is you really need to fix that template.

    ReplyDelete

Post a Comment