Resize the Default Resolution of Thumbnails in Blogger

Resizing Blogger Thumbnails As promised in part9 we are sharing today the trick to resize Blogspot thumbnails. Blogger stores media thumbnails in dimensions of 72 x 72 pixels in size. All pictures that you upload inside your blog posts are stored inside JSON feed and XML feed with 72px width and 72px height. The thumbnail images are saved originally in small square sized snapshots which if stretched out using CSS distorts the original resolution of the pictures and as a result they are displayed in poor quality resolution. In this tutorial we will fix this problem by changing the original dimensions of the picture in its URL using simple JavaScript technique and using the Recent Posts widget code that we have been using so far. It is just a one liner code and quite easy to implement.

Note: Click the Button below to see full list of topics under discussion.

Topics List

Fact
The default resolution of Blogger thumbnails can never be changed using just CSS. It requires JavaScript to modify the actual URL structure.

URL structure of Thumbnails in JSON feed

You clearly know now that thumbnails are stored inside the media$thumbnail node and have the following URL structure:

blogger thumbnail URL structure

If you observer the URL closely you will notice that each URL is assigned a parameter /s72-c/. Because of this parameter each thumbnail is assigned a default size of 72px by 72px i.e. Square image and cropped due to the parameter -c. The thumbnail thus gets a smaller size which when stretched using CSS gives a low quality image as shown below:

default blogger thumbnails

Our task is to replace this parameter with a custom variable so that the image size can be resized dynamically to any resolution we want by maintaining the aspect ratio. This will auto create a HQ thumbnail with clean and clear resolution.

The thumbnail will then appear in its original dimension with no forced width or height sizes.

thumbnail with dynamic size

The images are cropped due to the parameter  ( -c ), we will remove this to make sure the blogger thumbnails are not cropped and shown in full width.

Lets now get straight to interesting but simple coding!

Resizing Blogger Thumbnails

We will use the exact same code for recent posts widget that we shared in Part#9. All the modifications made are highlighted in pink.

<!-- ######### Writing Callback Function ############# -->
<script type="text/javascript">
//----------------------------Defaults
var ListBlogLink = window.location.hostname;
var ListCount = 5;
var TitleCount = 70;
var ListLabel =" ";
var ChrCount = 80;

var ImageSize = 100;

//----------------------------Function Start
function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{

//-----------------------------Variables Declared
var listing= ListUrl = ListTitle = ListConten = ListContent =ListImage =thumbUrl =sk = "";
//----------------------------- Title URL
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//----------------------------------- Title Stirng
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}

//----------------------------------- Content Check

ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substr(0, ChrCount);

//------------------------------------ Thumbnail Check

if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;

sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}

// Support For 3rd Party Images
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
ListImage json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}

else
{
ListImage= "'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGBaoO_i2u7kTRZvG6GBbHHO97n5RtxCjYQeBEoyXWIVKquEE5xXh4kgUGZnVBKy5yfkOYCTitIMnhUgO8zZHT7Oa0SN5EEVh5JgdI3KUj66cqgZ7EVuzPXOV_pewp5n0Ydrog0K1Rdfs/s200/Icon.png'";
}


//----------------------------------- Printing List
var listing = "<li><a href="
+ ListUrl+
  "><img src="
+ListImage+
"/></a>
<a class='mbttitle' href="
+ListUrl+
"target='_blank'>"
+ListTitle+
"</a><span class='icontent'>"
+ListContent+
" ...  <a href="
+ListUrl+
" class='imore'>»</a></span>
</li>";
document.write(listing);
}
document.write("</ul>");
}
</script>
<!-- ######### Invoking the Callback Function ############# -->
<script>
ListBlogLink = "http://www.mybloggertricks.com";
ListCount = 4;
TitleCount = 70;
ListLabel = "Announcement";
ChrCount = 150;

document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>
<!-- ######### Styles for Look ############# -->
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style>
.mbtlist {list-style-type:none;overflow:hidden}
.mbtlist li {margin:0px auto 20px auto; clear:both; color:#666; font-family:Helvetica; font-size:12px; border-bottom:1px dotted #ddd;padding-bottom:10px;}
.mbtlist .mbttitle {font-family:oswald; font-size:16px; color:#0080ff; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover {color:#00A5FF;}
font-family:georgia; font-size:15px; font-weight:bold}
.mbtlist div span{margin:0 10px 0 0; display:inline-block;}
.mbtlist span {display:block; margin:5px 0px 0px; padding-right:5px;}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666; line-height: 0.7em;}

.mbtlist img {float:left; margin:0px 10px 10px 0px; border:6px solid #fff; padding:0px; width:80px; height:65px; box-shadow:-1px -1px 4px #777; }
.mbtlist .icontent {text-align:justify;}

</style>

How it works?

1.  We first declared a variable ImageSize  to dynamically adjust the image size parameter from /s72-c/  to /s100-c/. 100px here means /s100-c/ i.e. 100px X 100px.

Note that image size can easily be changed using CSS as well like we have done (i.e. width:80px; height:65px). The CSS image size must always be less than or equal to ImageSize but not greater than it else the resolution will collapse. Normally thumbnails are displayed in size of 100px by 100px, if you want much larger thumbnails you can surely increase the value for ImageSize. and then customize the width and height using CSS like we did.

2. We then declared another variable sk and set it to null.

3. The third most important step is:

sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");

Here we first used the JavaScript replace () method to replace s72-c with ImageSize. We then saved this new Image URL inside sk. We also removed the parameter -c to prevent images from getting cropped.

4. Finally we removed the parameter ?imgmax=800 from the Image URL inside sk using the replace method and saved the new clean URL inside ListImage

Normal Size

recent posts with small thumbnails

 

Custom Size

I made these changes:

  • set ImageSize to 150px
  • set width to 130px and height to 90px

recent posts with large thumbnails

See no loss in image quality even if you stretch it to 500px!

Update: Prevent Cropping of Images

To make sure images are not cropped we removed the parameter -c from /s72-c/. The thumbnails will now look like this:

uncropped blogger thumbnails

Need Help?

Let me know if you need any assistance till this part of the tutorial series. Do post your questions and let us know if you found any part confusing. In our coming tutorials we will cover Dynamic sliders, carousels and all sorts of animated widgets and much more. This is just the trailer! =>

Peace and blessings buddies! :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

22 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. Salam Bro!
    i want your this Template please :)

    ReplyDelete
    Replies
    1. Its not for sale buddy. It is our identity

      Delete
    2. and can i take a copy of this blog? i mean template?

      Delete
  2. Hello Muhammad bhai thanks for your awesome tutorial, is there anyway to prevent from cropping images...!!!

    ReplyDelete
    Replies
    1. Excellent question Ishtiaq!

      To avoid the cropping of images we need to remove the parameter -c from the Image URL. I have updated the post above just for you :)

      Delete
  3. Hi Mohammad,
    could we use this kind of trick to display for example infographics which usually have great height and displayed on Blogger very pixelated?
    Thx for your job.

    ReplyDelete
    Replies
    1. Yes this will work for almost any image! But since infographics have too long a height. Do you think showing them as thumbnails would look neat?

      I have updated the srcipt above to make sure the images are not cropped and shown in original size. You can read the update

      Delete
  4. This is such a useful trick. I would definitely use it the next time.

    ReplyDelete
  5. Where in the template do you paste the code?

    ReplyDelete
    Replies
    1. I think you have a simple solution too.
      Please go to the blogger dashboard. Then go to layout and then click on add widget link text. Then from available widgets, select html/javascript and then paste your code on the text box and save it.
      you probably need to place that code onto your template if you wanna show widget in post area and its a little more complicated.

      Just let us know if you need further help. Thanks

      Delete
  6. I want to show all post. How can I do? Thanks.

    ReplyDelete
    Replies
    1. You can at most display 25 posts. Simply change the number of ListCount = 4; to 25

      Delete
  7. hi i have a problem in my blogger mobile view i want that when i search my labels the post visible with very little thumbnail size here is the link http://www.urdujob.com/search/label/Android%20apps?m=1

    what i want that it just come like a big thumbnail which speread to full width of mobile screen and down title can you please tell me how to do that ?

    ReplyDelete
    Replies
    1. Blogger official mobile templates can not be customized that easily as compared to custom templates.

      To do this first manually customize your template to make it mobile responsive by reading this tutorial series:

      >>> Make your Blogger template mobile responsive

      Then you can customize the image size using the @media query and specifying the new image size like this:

      @media only screen and (max-width:480px) {
      .post img{width:98%; float:none;}


      Delete
  8. hi your article is very difficult you did not mention what to replace what to search in template what thing to replace you just mention the code and did not even tell us where to put and replace this code what we need to delete what we need to search in the template please explain it

    ReplyDelete
    Replies
    1. To understand this code you will first need to read part#1 of the series. This post is a part of a tutorial series on JSON API. We aim at educating our readers with coding.


      You just need to paste the above code inside a HTML/JavaScript widget. That's it!

      Delete
  9. you can only customize the youtube thumbnails sizes in the code above. Read this post: Display YouTube thumbnails in recent posts


    You can customize the image sizes also from the CSS code by changing width:80px; height:65px;

    ReplyDelete
  10. hi my blogger is already i choosed custom from template options and i addes media js quiries thats why when a post is open the images inside the post automatically stretch to full width but the problem is i put labels in different posts suppose softwares is a category when i search a post by label the list came in mobile view is very little thumb and title is also un complete what i want is a big size thumb which spread to full width in the list of posts displaying by label search . i hope you understand. and if i need to use this widget i only need to add this code in html widget and just replace the my blog url ok i will try this today and then tell u

    ReplyDelete
  11. Admin please Help Me!!
    This is a part of my HTML widget and i want to resize s72-c to s320 ??
    Help Pleasse !!!

    http://pastebin.com/83APKnY0

    ReplyDelete
  12. Hi, would it be possible to stop thumbnail images in a mobile template from cropping itself while keeping the aspect ratio? I don't want to resize anything, just keep the aspect ratio while removing the crop section.

    ReplyDelete
  13. please Mohammed i sent you a message on youre email please can you read it ?

    ReplyDelete