Tip: Resize your thumbnails in Blogger's Popular Posts widget

A common frustration, and one we too shared, was the limited sizes that thumbnail images can be displayed as. Widgets such as the Popular Posts widget have a pre-specified maximum size (72px squared) that is not changeable through any settings.

Using the wonders of JQuery we've developed a way for you to easily change the dimensions of these images without losing any quality in your thumbnail. To make it work simply copy and paste the clean version of the code below into your template before the </head> of your HTML. Change the value of "dimension" in the code to be the pixel size that you want the thumbnail to be. This code assumes that you're using Picasa, the default for Blogger image storage, for your blog's photos; if you're using some other 3rd party this won't work.


<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() {
  // change the dimension variable below to be the pixel size you want
  var dimension = 90;
  // this identifies the PopularPosts1 div element, finds each image in it, and resizes it
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
    image.attr('width',dimension);
    image.attr('height',dimension);
  });
});
//]]></script>


A Brief Tutorial on the Code

We first start by including the JQuery library into your template code (line #1). This is one of the standard libraries that Google supports and even hosts for your benefit.

We then create a function that initiates once the DOM is fully loaded (ready).

We set the pixel dimensions (var dimension) so we don't have to specify that value multiple times in the code below.

We identify the object container's ID, in this case the ID that is generated by the Popular Posts widget by default, #PopularPosts1, and then we find each image (img) within it.

For each image, we're looking at the source value (src), and using a regular expression to find and replace a specific part of the source URL.

Okay, a quick detour.

If you upload an image to Picasa (Blogger), the URL of that image looks like this: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicXTyFRlu_3fo7ognT0mujX9NuYfM6GZH14H4p_XrbvdRoN9ugaAXVdhU3e6KL60YQTQ7L5fAAkUM1ntsSkAciN50VBaXXi5PMb9fQl4Y4x3OomgHtygR4XgRygPeluMmFZCTcZeoA_a8/s72-c/31c896b2281111e19e4a12313813ffc0_7.jpg

Within that URL there is information that you can see and manipulate, specifically the size of the image that is returned and the attributes of it. The part of that image URL that looks like /s72-c/ means "return an image with the maximum dimension of 72 pixels and -c crop it to be a square. If the URL did not have that -c it would return the image in its original proportions, but resized down to 72 pixels maximum dimension.

So if we changed that URL to something like https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicXTyFRlu_3fo7ognT0mujX9NuYfM6GZH14H4p_XrbvdRoN9ugaAXVdhU3e6KL60YQTQ7L5fAAkUM1ntsSkAciN50VBaXXi5PMb9fQl4Y4x3OomgHtygR4XgRygPeluMmFZCTcZeoA_a8/s500-c/31c896b2281111e19e4a12313813ffc0_7.jpg we'd have a bigger image, also square.

Returning to our code, what we're doing is finding and replacing the 2-4 digit number following an "s" and replacing it with our new dimensions. And because the original widget hard-coded the dimensions, we're updating those dimensions with the new dimensions.