How To Change Thumbnail Size for Blogger Images, Popular Posts Widget

Blogger by default assigns a 72 x 72 pixel size for thumbnails generated from your post images. You may desire to change the image thumbnail size on the Popular posts widget or even thumbnails displayed on homepage, generated from blog posts.

In your template, you'll find a couple of instances of the
"<img expr:src='data:post.thumbnailUrl'/>" tag . Using this tag, you can pick up the first image from a post and generate its thumbnail. By assigning a class/id to this tag and using a simple jquery code, we can define a custom thumbnail size for it.

Before you begin, make sure you have jquery installed in your template. If not, copy the latest version from below and paste it above the closing head tag </head>.


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Custom thumbnail Size for Post Images 

As mentioned in the begening, a 72 x 72 pixel size thumbnail from post image can be created using the tag: 

<img expr:src='data:post.thumbnailUrl'/> 

1. To the relevant image tag, simply add a class or id to the tag like this: 

<img class="post-thumb" expr:src='data:post.thumbnailUrl'/> 

2. Just above the closing head tag </head> in your template, paste the code below.

<script type="text/javascript"> $(document).ready(function() {$('.post-thumb').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});}); <!-- helparchive.blogspot.com --> </script>

3. The "120" is your new thumbnail size. You can increase or decrease the thumbnail width by changing the "120" to any other number. Lastly, ".post-thumb" is the class you have assigned to your images.

Changing thumbnail Size In Popular Posts Widget

Changing the thumbnail size for Popular Post images is simple. Just paste the code below just above closing head tag </head> in your template.

<script type="text/javascript"> $(document).ready(function() {$('.PopularPosts img').attr('width', '100%').attr('height', 'auto').attr('src', function(i, src) {return src.replace( 's72-c', 's120-c' );});}); <!-- helparchive.blogspot.com --> </script>

Change "120" to any other number to set the desired size for popular posts thumbnail images and you are all done.

Share:

Read More