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.

Are your post images on Blogger blurry? Find out why and how to fix them here.

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.

3 ways to easily fix blurry images on bloggers popular post gadget

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

3 ways to easily fix blurry images on bloggers popular post gadget

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

3 ways to easily fix blurry images on bloggers popular post gadget

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 ways to easily fix blurry images on bloggers popular post gadget

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.

Leave a Reply

Thank you so much for taking the time to comment! Your email will not be published or shared but you will recieve an email if your comment has a reply. Need help with a tutorial? Check out our Coding + Consultation service for one-on-one assistance.

11 comments

    • Elaine Malone on

      Hello Stephie, what method did you try? Your blog is using the new way for hosting photos so method 2 or 3 should work for you. I don’t see either currently active in your template.

      The height and width are currently set to a fixed size in your template (height: 180px !important; width: 300px; for .PopularPosts .item-thumbnail a), you may want to change this to height: auto; width: 100%; since the width is a little wider than your sidebar but the overflow is being hidden.

      Reply
  1. Paolo on

    Hello , I’m using the code for the automatic resizing of photos for this page , http://www.domusdesignstore.it/, but the photo of the first post is not displayed correctly , as the part relating to the size is not in the right way . You can fix ? Excuse my English by automatic translator !

    Reply