The Popular Posts Gadget
If you are reading this post you probably know that the Blogger Popular Posts gadget presents the option to include thumbnail images of the listed popular posts.
The default size of the thumbnail images is 72 pixels high by 72 pixels wide. There is no option to change the size of the thumbnails from the gadget settings and if you change the width and height attributes of img tag in your Blogger Template the images will be stretched and low quality.
The reason for this is that Blogger stores it's images using the Picasa web service and when the images are required for the Popular Posts gadget it calls them at a 72 by 72 resolution.
The Popular Posts Thumbnails
The resolution of the Popular Posts Thumbnails can be also seen by looking at the image url. As an example let us have a look at the Thumbnail image of one of the Posts from this Blog.
The link for the thumbnail image of the How To Completely Backup Your Blogger Data post is the following:
If you click on this image you will see the 72 by 72 pixel image. The image size is indicated in the link itself s72-c. If you were to take the same link and change s72-c to s500-c you would get this:
Which, as you can see, displays a 500 by 500 pixel version of the thumbnail image.
To see the original image you just have to change s72-c to s1600, getting:
Note that any link containing "-c" after the indicated image size will be displayed as a square so if you need to keep the original aspect ratio you will have to remove the "-c".
Why Would You Want To Change The Thumbnail Size?
By tweaking the Popular Posts Gadget code a bit you could create a better style to match your Blogger template or you could go even further and create a Popular Posts Carousel Gadget for your blogs header, like the one on the homepage of this blog.
I will soon write a tutorial on creating a Blogger Popula Posts Carousel so follow me on one of the social networks or subscribe by e-mail to get the latest updates.
What Is The Easiest Way To Change The Thumbnail Size
After finding a few pretty complicated methods online i have decided to write a tutorial presenting an easier method:
We will add a class to the thumbnail image in the Popular Posts loop in order to easily identify them later. After adding the class we will use javascript to find s72-c and replace it with the desired code.
1. Go to Template --> Edit HTML, find and expand the Popular Posts widget.
2. Hit Ctrl + F, or Cmd + F if you are using a Mac, and search for this code expr:src='data:post.thumbnail'.
3. As you can see this but of code generates the src tag of the Thumbnail image. Add the class resizethumbnail to the image tag, like this: class="resizethumbnail".
4. Now scroll down to the closing of the body tag and add this bit of javascript before it:
<script type='text/javascript'>
$(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's500-c' );});});
</script>
This will now resize all thumbnails to a 500 by 500 pixel resolution.
5. To get the image at the original aspect ratio use the javascript below:
<script type='text/javascript'>
$(document).ready(function() {$('.resizethumbnail').attr('src', function(i, src) {return src.replace( 's72-c', 's1600' );});});
</script>
Comments
Post a Comment