An alternative way to fix blurry popular post images on Blogger

I’ve had a couple of questions recently about why the popular post images on Blogger are suddenly appearing blurry. I previously posted a fix to this issue here by automatically changing the S value which controls the quality, but it seems that Blogger has changed how it hosts images and no longer uses the S value but a W and H value instead. This only seems to be happening on some blogs, so here are 2 alternative fixes to help you fix this problem depending on your template.

1. Fix blurry popular post images on Blogger using a script

If your blog is using the older format of S Value such as s320 or s640 then follow the previous tutorial that is located here.

2. New fix for blurry popular post images on Blogger using a script

If your blog is using the new format of w72-h72-p-nu then follow this tutorial

1. Check if you are already calling a hosted jquery library. To do this go to Template > Edit HTML and search for jquery.min.js or jquery.js. It will look something like

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />

The version number 2.1.3 may be different. Having multiple jquery libraries in your template may cause issues and slow down your blogs loading time. If you do have this in your template already then skip to step 2.

If the jquery library is not in your template then you’ll need to install it first. Go to Template > Edit HTML and find </head>. Underneath it paste the following and save.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" />

2. Now we’re going to add a JavaScript to change the image quality used by the Popular Post gadget. Again go to Template > Edit HTML and find </head>. Underneath </head> paste the following and save.

<script type='text/javascript'>//<![CDATA[
/**
Written by XOMISSE. Do NOT remove credit!
**/
$(document).ready(function() {
  var dimension = 1600;
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/w\B\d{2,4}/,'w' + dimension)});
image.attr({src : image.attr('src').replace(/h\B\d{2,4}/,'h' + dimension)});
    image.attr('width', "100%");
    image.attr('height', "auto");
  });
});
//]]>
</script>

This script first sets a size of 1600 which is a high quality image, then we are telling it to find the image within the DIV that has the PopularPosts1 ID. Once it finds that, we tell it to change the quality from what it is set at to the full 1600 quality. This is similar to what we did manually in this tutorial to fix blurry images on Blogger. Finally we set the width to 100% and height to auto so the images span the width of our sidebar and height adjusts to that proportionately.

NOTE The /w\B\d{2,4}/ and /h\B\d{2,4}/ means a string that starts with / followed by w and h, then a 2 or 4 digit value and finally another /.

3. Fix blurry popular post images on Blogger by editing Popular Post Gadget

If your blog is using the new format of w72-h72-p-nu you can also adjust the quality by following this tutorial

1. Go to Template > Edit HTML > Jump to Widget > PopularPosts#

2. You’ll see the popular post code that will look similar to this

3. A few lines down, find the following code

<img alt='' border='0' expr:src='resizeImage(data:post.thumbnail, 72, &quot;1:1&quot;)'/>

4. Change 72 to 1600 to show the image in full quality so that the line now looks like the following

<img alt='' border='0' expr:src='resizeImage(data:post.thumbnail, 1600, &quot;1:1&quot;)'/>

5. Save the template and you should see your images in better quality.