Jul 28, 2012

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!
    // 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);
        var greater = Math.max(areawidth,newHeight);
        image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)});

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