Automatic Post Image Resizing to 100% in Blogger Blogs

Post design is always the major key to great readership, how you add text, images and videos to your posts really matters, their size, colors and everything depends on your creativity. So the one thing you can do is to get your images in good quality so that when ever a person comes to read your posts he should be satisfies with you post design so I have posted on how you can make your image fit to your blog’s width using CSS, so using this css trick you can automatically make every image fir in your blog’s width so if the image is too large than your blog’s width it will be still kept in the boundary while maintaining its overall dimensions.

But many people requested me that if I can provide them with some script that can automatically make every image fit to blog width even if its small width and height, well I just found a script that can do exactly what you are seeking out. With this script added to your blog every latest and older posts images will get 100% blogs width that means automatic image resizing to the edge, so if you have some smaller images then they will also get expanded to the 100% + every image will get caption in their footer with the alt text you will add in them.

1. Open Blogger > Template > Edit HTML
2. Now press Ctrl + F and search for </head> and paste below code above it.

   <script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
   <script type='text/javascript'>//<![CDATA[
   $(document).ready(function(){
        var areawidth = $('#Blog1').width();

       //$('.sidebar').find('.clear').each(function(n, layer){   
            //var layer = $(layer);
            //if (layer.css('clear') == "both") layer.css('clear','none');
        //});
        $('#Blog1').find('div').each(function(n, layer){   
            var layer = $(layer);
            if (layer.css('clear') == "both") layer.css('clear','none');
        });

       $('.post-body').find('img').each(function(n, image){
            var image = $(image);
            alt = image.attr('alt');
            id = image.index();
            imageAltId = 'imagealt'+n;
            var originalWidth = image.width();
            var originalHeight = image.height();
            image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + 1200)});
            image.attr('width',areawidth);
            //var newHeight = (originalHeight/originalWidth * areawidth).toFixed(0);
            image.attr('height','auto');
            image.css('height','auto').css('float','none').css('margin','0');
            image.parent().css('margin-left',0).css('margin-right',0).css('margin-top',0).css('margin-bottom',0);
            image.parent().addClass('postImage');
            image.parent().parent().css('clear','none');
            if (alt) {
                image.after($('<div>').css('padding','5px 5px 8px 5px').css('background-color','#ffffff').css('opacity','0.6').css('filter','alpha(opacity=60)').attr('id',imageAltId).text(alt));
                var divHeight = $('#'+imageAltId).height() + 13;
                $('#'+imageAltId).css('margin-top','-'+divHeight+'px');
            }
        });

   });

   // the following values are in milliseconds
   var speedOut     = 2200;
   var speedIn        = 2200;
   var pauseShow    = 6000;

   function goSlideshow(imageDestination, captionDestination, picasaEmail, picasaAlbum, picasaResults, picasaDimension){
        var url = 'http://picasaweb.google.com/data/feed/api/user/' + picasaEmail + '/album/' + picasaAlbum + '?kind=photo&imgmax=' + picasaDimension + '&max-results=' + picasaResults + '&alt=json';
        ($.getJSON(url, 'callback=?')).success(function(data){
            var slides     = new Array();
            var captions     = new Array();
            var heights    = new Array();
            var widths    = new Array();
           
            $(data.feed.entry).each(function(i, entry){
                slides[i]     = entry.content.src;
                captions[i]    = entry.summary.$t;
                heights[i]    = entry.gphoto$height.$t;
                widths[i]    = entry.gphoto$width.$t;
            });

           if(slides){
                var urlValue = 'url(' + slides[0] + ')';
                if (heights[0] > widths[0]){
                    $(imageDestination).css('background-size','auto 100%');
                } else $(imageDestination).css('background-size','100% auto');
                $(captionDestination).text(captions[0]);
                $(imageDestination).css('background-image',urlValue);
                var counter = 1;

               window.setInterval(function(){
                    if (counter >= slides.length) counter = 0;
                    $(imageDestination).fadeOut(speedOut,function(){
                            var urlValue = 'url(' + slides[counter] + ')';
                            $(imageDestination).css('background-image',urlValue);
                            $(captionDestination).text(captions[counter]);
                            if (heights[counter] > widths[counter]){
                                $(imageDestination).css('background-size','auto 100%');
                            } else $(imageDestination).css('background-size','100% auto');
                            $(imageDestination).fadeIn(speedIn);
                            counter++;
                        }
                    );
                },pauseShow);
            }
        }).error(function(data){
            console.log('error getting feed data');
        });
   }
   //]]></script>

3. Now if you have the blue line stating the jquery already in your blog than there is no need to add it again so you can remove that line and then Save the Template.
4. Now refresh your blog and see that every image in your blog posts will be resized to full blog’s width even if it is small in size.

Remember Using this script on your blogger blog can make your image blurry as resizing them looses their overall quality but still if you need to resize every image in your blog to 100% that this is the ultimate solution.