Tip: Resize your thumbnails in Blogger's Popular Posts widget

A common frustration, and one we too shared, was the limited sizes that thumbnail images can be displayed as. Widgets such as the Popular Posts widget have a pre-specified maximum size (72px squared) that is not changeable through any settings.

Using the wonders of JQuery we've developed a way for you to easily change the dimensions of these images without losing any quality in your thumbnail. To make it work simply copy and paste the clean version of the code below into your template before the </head> of your HTML. Change the value of "dimension" in the code to be the pixel size that you want the thumbnail to be. This code assumes that you're using Picasa, the default for Blogger image storage, for your blog's photos; if you're using some other 3rd party this won't work.


<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/
$(document).ready(function() {
  // change the dimension variable below to be the pixel size you want
  var dimension = 90;
  // this identifies the PopularPosts1 div element, finds each image in it, and resizes it
  $('#PopularPosts1').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
    image.attr('width',dimension);
    image.attr('height',dimension);
  });
});
//]]></script>


A Brief Tutorial on the Code

We first start by including the JQuery library into your template code (line #1). This is one of the standard libraries that Google supports and even hosts for your benefit.

We then create a function that initiates once the DOM is fully loaded (ready).

We set the pixel dimensions (var dimension) so we don't have to specify that value multiple times in the code below.

We identify the object container's ID, in this case the ID that is generated by the Popular Posts widget by default, #PopularPosts1, and then we find each image (img) within it.

For each image, we're looking at the source value (src), and using a regular expression to find and replace a specific part of the source URL.

Okay, a quick detour.

If you upload an image to Picasa (Blogger), the URL of that image looks like this: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEHqzE5025s8Onfl9MfPLsrYSSAffnW5EdwXT3PfoVCK-6nJwN6rp3q36FAQXDjGSjdFpPMnHbs715Bq_Yq3HhsbUfwTbRtR69C1n2gVkVR5ayZpj79dw_2nFlLElrlefrJBrf6KEh0M/s72-c/31c896b2281111e19e4a12313813ffc0_7.jpg

Within that URL there is information that you can see and manipulate, specifically the size of the image that is returned and the attributes of it. The part of that image URL that looks like /s72-c/ means "return an image with the maximum dimension of 72 pixels and -c crop it to be a square. If the URL did not have that -c it would return the image in its original proportions, but resized down to 72 pixels maximum dimension.

So if we changed that URL to something like https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfEHqzE5025s8Onfl9MfPLsrYSSAffnW5EdwXT3PfoVCK-6nJwN6rp3q36FAQXDjGSjdFpPMnHbs715Bq_Yq3HhsbUfwTbRtR69C1n2gVkVR5ayZpj79dw_2nFlLElrlefrJBrf6KEh0M/s500-c/31c896b2281111e19e4a12313813ffc0_7.jpg we'd have a bigger image, also square.

Returning to our code, what we're doing is finding and replacing the 2-4 digit number following an "s" and replacing it with our new dimensions. And because the original widget hard-coded the dimensions, we're updating those dimensions with the new dimensions.

Comments

  1. its really great.

    In my case i want this code work for my home page only. How can I?

    ReplyDelete
  2. Hi Chandra,

    To make code only show on specific pages (or page types in this case), check out this link for PageType attributes and identification.

    -David

    ReplyDelete
  3. to resize your thumbnails in blogger's popular posts widget is really much simpler than all that... and no need to mess with your template... try this in your "add css"... and modify px to your liking

    #PopularPosts1 li img {
    min-width:50px;
    max-width:50px;
    max-height:32px;
    min-height:32px;
    }

    eman

    ReplyDelete
  4. Hi Eman,

    While technically true, your solution will only allow the user to resize the thumbnail images downward. The default Popularposts widget uses thumbnail images of 72px by 72px and that sizing is hard-coded into the URL (s72-c). So if the user wanted to resize upward from there, say for a 100px square thumbnail, to use the CSS method would result in a pixelated thumbnail image and a loss of image quality.

    The solution posted in this article enables you to resize upwards without any loss of quality as it is dynamically grabbing a higher-quality thumbnail based on the specific size that you are requesting. Your thumbnail could be 100px, 200px, 500px... the only limitation is your design and the original quality/size of your photo.

    -David

    ReplyDelete
  5. I tried adding a gadget (html) and then pasted the code into the empty box and added it above my popular posts gadget. Is that right?

    ReplyDelete
  6. Hi Amy,

    Not quite... but that might work? The better way is to add it to your template directly. Go to your Dashboard, then click on Template, then the button that says "Edit HTML", then the button that says "Proceed". Search for /head in your template and paste the code right before that line.

    You probably want to make a backup of your template before delving into the HTML! (clicking on the "backup/restore" button in the top right corner of the Template page.

    -David

    ReplyDelete
  7. Hi,
    Nice Tip, but how if I want that thumbnails to original proportions?

    Akhmad

    ReplyDelete
  8. Hi Akhmad,

    I wouldn't recommend it because it won't create clean lines (you could have images that are very long and skinny which would create an awful look). But if you did want to go that route, you could use the dimension variable to be your maximum dimension size and then set the height and width to be "auto" instead of "dimension".

    However, you'll also need to change the regexp so also remove the -c flag (square cropping).

    I haven't tested this, but it would look something like so:

    image.attr({src : image.attr('src').replace(/s\B\d{2,4}-c/,'s' + dimension)});
    image.attr('width','auto');
    image.attr('height','auto');

    -David

    ReplyDelete
  9. Hi admin,
    How can to setting thumnail image at frontpage post image to crop image (use s72-c code).

    I mean when we crete auto readmore the image will resize based on setting width and height we adjust. but sometimes the image look not best view if the image width more than height.

    If can use code s72-c to thumnail at frontpage post image the image can auto crop and the will look nice.

    Are you any idea to put s72-c at frontpage post image.

    ReplyDelete
    Replies
    1. Hi James, do you mind posting the URL of your blog? It would help me understand what you're trying to achieve here.

      If you're looking to resize the images in your blog posts, swap the two lines below.

      $('#PopularPosts1').find('img').each(function(n, image){

      with

      $('.post-body').find('img').each(function(n, image){

      -David

      Delete
  10. Hello!

    I'm really blessed to be able to found this tip. But change only width and height , the image still "s72-c". Was uploaded in Picasa.
    I haven't done any modification, and placed before /head. Maybe I'm doing something wrong...

    Thank you!

    ReplyDelete
    Replies
    1. My apologies, this line:

      image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + dimension)});

      should read:

      image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});

      Delete
    2. It's working now! Thank you!

      Delete
  11. My blog: http://inblug.blogspot.com/

    I am using < img expr:src='data:post.thumbnailUrl'/ > to render/display the images to my home page, but the size of the image generated is very small (72x72), I wanted larger images in Blogger my page. I tried < img expr:src='data:post.thumbnailUrl' style='width:200px; height:200px;'/ > but loses image quality, because only stretches.

    How to change the p bone these thumbnail size without losing quality? Or rather, I change 'data: post.thumbnailUrl' by another function to get/show the images?

    ReplyDelete
    Replies
    1. Hi Lucas,

      So one of the main reasons for creating this script was that post.thumbnailUrl only generates certain sizes, and those sizes max out at 72px. If you resize using CSS (as you've done), all you're doing is stretching an image that is generated 72px to be 200px. This article explains how the picasa image URLs work. There is no way to use post.thumbnailURL and get a larger image, hence using this script. This script finds all of the images in the PopularPosts1 widget (but can be substituted for anything else) and, by changing the url string, resizes the image.

      Looking at your blog it seems that you don't want this script, but instead the thumbnail and summary script that we just posted: http://www.blogxpertise.com/2012/07/tip-better-thumbnail-and-summary-script.html. That script has the thumbnail creation, as well as enables the setting of summary size and other customizations.

      Delete
    2. Thanks for helping me!

      I'd like to do "boxes with picture and title of the post" on my homepage and click User is redirected to the full article (as you noted). Except that my code uses the "thumbnail" to generate the image, I can replace it with an "id" or "class".

      Since it is not possible to change the CSS of the "thumbnail" how do I change the image function?

      Delete
    3. Don't use the post.thumbnailURL to generate the image, give the thumbnail and summary script I linked to a try instead. You'll be able to configure it to be like you've displayed in your page pretty easily.

      Delete
  12. Thumbnail URL end like this /default.jpg

    and needs to be replace with /mqdefault.jpg

    any ideas?

    ReplyDelete
    Replies
    1. Sure:

      var url = 'https://lh5.googleusercontent.com/-GCOQHsyihCU/UFz3GxRdp3I/AAAAAAAAFzA/hRZGcTxm-Io/s640/12%2520-%25201.jpg';
      var replacement = 'DUMMY';
      url = url.replace(/([^/]*)$/,replacement+'$1');
      alert(url);

      In your case you want to have replacement text of 'mq'.

      -David

      Delete
  13. Thanks for the excelent solution! I have one question, what happens if part of the image url includes before the "/s.." part? For example, this image http://2.bp.blogspot.com/-9Rd9dk6_sHc/UHaZ0bkuyPI/AAAAAAAApAw/1DNr5kyFmes/s320/my.jpeg contains an 's' right before the 's' part we want to replace. That causes an error, right?

    Is there a way to overcome this?

    Manos

    ReplyDelete
    Replies
    1. Hi Manos, the best way to test regular expressions is this tool.

      Put /s\B\d{3,4}/ in the top area, then put http://2.bp.blogspot.com/-9Rd9dk6_sHc/UHaZ0bkuyPI/AAAAAAAApAw/1DNr5kyFmes/s320/my.jpeg in the bottom area. You'll see that the expression looks for /sVALUE/ so the s right before it doesn't affect it.

      Delete
    2. Take for example this image: http://2.bp.blogspot.com/-_QRIlnb62rI/UHMHCUX3R_I/AAAAAAAAoGA/FOuRFs55iwI/s550/leptomita.jpg

      after applying the regex gives me this:
      http://2.bp.blogspot.com/-_QRIlnb62rI/UHMHCUX3R_I/AAAAAAAAoGA/FOuRFs72-ciwI/s550/leptomita.jpg

      is it more clear now? it replaced the 's' before the one we were aiming

      Delete
    3. What regex are you using? if using /s\B\d{3,4}/ I still don't see the trouble, it replaces the correct values.

      Delete
  14. Hi !!!
    my blog when I share in the facebook use 72px picture, and I would like to use 200px.
    I'm using this script to to that, but how can I change se picture size? I try your script but with no sucess. tks.

    ReplyDelete
    Replies
    1. Hi Gustavo, Facebook doesn't use these thumbnails, it uses something else entirely. Are you asking how to set the thumbnail that will be used for posting a URL to Facebook?

      Delete
    2. Sorry, I forget to paste de code. I use that one:

      < b:if cond='data:blog.postImageThumbnailUrl'>
      < meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
      < b:else/>
      < meta content='http://2.bp.blogspot.com/-rNMOIGfgM8c/TvG0ita4WNI/AAAAAAAADEo/-362fwwOSXc/s200/DSC_6286.JPG' property='og:image'/>
      < /b:if>

      So, how can I use your script to change the og:image information with a large picture?

      tks

      Delete
    3. Just use:

      < meta content='http://2.bp.blogspot.com/-rNMOIGfgM8c/TvG0ita4WNI/AAAAAAAADEo/-362fwwOSXc/s200/DSC_6286.JPG' property='og:image'/>

      Delete
    4. I'd like to know the same!

      David, I can't define the jpg directly because each Blogger post of mine has a different thumbnail, and I have no way to define each one of them. Since it's a webcomic, the thumb is basically the most important thing I need to share on Facebook, and I'd like it to be bigger than 72px. Facebook debugger tool is always complaining this to me.

      Does anyone know the answer to this?

      Thank you!

      Delete
  15. The code does that fot posts that doest have pictures. So, for the posts that have picture, the blogger get the first and create a tumbs picture, and insert in that variable the value for the picture, but small s72-c. I need to change that size.

    ReplyDelete
    Replies
    1. So what you need to do is 1) grab the url of that thumbnail, 2) resize it, then 3) have it export into your meta tag. If you're not able to do this I'll see if I can post this as a blog post tomorrow.

      Delete
  16. hi there. Just wanted to say thanks for the tip. Used the code as is and was able to change the popular post thumbnails to be nice and big now. It was simple and well explained. Thanks :D

    ReplyDelete
  17. Thank you so much for the help. I was able to change the dimensions on my blog to be what I wanted. Do you know, is there a way to make the descriptions be below the pictures rather than to the side?
    Thanks again!
    KC

    ReplyDelete
    Replies
    1. Hi KC,

      The default CSS on the popular posts item thumbnail looks like so:

      .PopularPosts .item-thumbnail {
      float: left;
      margin: 0 5px 5px 0;
      }

      If you re-add identical custom CSS to your template, removing that left float, you can style it however you'd like!

      Delete
  18. Hello,
    I have this problem about thumbnail images pixeled on my homepage, and I have tried your code, but it doesn't work or I haven't know to implement it. I am using the classic blogger template HTML. It would be interesting that images would not appear pixelate like they show now. Can you help me to get a better image?
    Thank you,

    ReplyDelete
  19. Sorry if you watch my blog and it appears well for the problem I commented on my last words, but I solved it. Only a line of java more and it worked for me.
    Regards,

    ReplyDelete
    Replies
    1. Hi Juan, can you post a link to your blog and what your fix was?

      Delete
    2. I am not very confident about javascript, but well.

      I had this line between the others on the java "widget" which gave me what I wanted, but pixelated. Because by default, the thumb only offers you a 72px picture:

      var thumburl;try {thumburl=entry.media$thumbnail.url;}catch (error)

      Evidently that if you resize a little picture to a big picture, it pixelates. It was what this line did.


      So, searching on the web, and modifying what I found, I added this only line below the other one:

      var thumburl=thumburl.replace('s72-c','s???-c');

      (change the ??? for the size-px you want) So, it resizes the image without pixelating it.

      I hope it will be useful, especially for people who as I, we like the old HTML classical template from Blogger.

      Regards,
      http://www.rubiocartoons.com

      Delete
    3. Hi Juan, that's exactly what the code we provided does. And yes, it should work in most blogger templates. Assuming you didn't install it correctly.

      Delete
  20. Hi David,
    Thanks for this code - it worked great for the Popular Posts pieces. I am trying to achieve the same result for the post previews on the home page as well and without any luck. Any thoughts that could lead me in the right direction?

    You can see my example of what I'm trying to acheive here: http://cment-template.blogspot.com
    **Specifically in Post #2: Shopping (you can see the photo of the purse doesn't look proportionate in the preview.

    Thanks!
    Chris

    ReplyDelete
  21. Bummer...I followed your instructions exactly and it doesn't chance my popular post image sizes at all :( Any thoughts?

    Ashley
    www.simplydesigning.net

    ReplyDelete
  22. I have an extremely frustrating problem with my blog, alwaysspanish.com which is running on Blogger. I am trying to implement the Blogger slideshow widget with my RSS feed URL as the image source instead of Picasa. While it's working perfectly well as far as functionality goes, the images it's picking up are the thumbnails from my posts which appear quite blurred. Is there any way your technique could be applied to my project? I need images to appear sharper on a magnified scale. I'm already using your script successfully to resize my Popular Posts images. Please help me out unless what I am trying to achieve is a pipe dream! Thanks...

    ReplyDelete
  23. Hi Amit, you're definitely trying to put a round peg into a square hole! But it's a good idea... let me take a stab at it, I think it'll be the next Blog Xpertise post! stay tuned...

    ReplyDelete
  24. Thanks a ton for the prompt response, Dave! Am all hopeful about your expertise successfully helping me crack this issue. By the way, feel free to let me know if I could provide any input to help you have a better look at the problem (template XML, the mod of your script, etc.)

    ReplyDelete
  25. Wow! Thanks for the hard work, Dave! Well, this seems to be a major portion of what I was looking for but not quite sure. Basically, I am fine with the static Popular Post widget as offered by Blogger with your code helping enlarge the images therein.

    What i wanted with the slideshow was to display thumbnails from random posts with the title overlaid as a hover effect. And of course the forward/backward button if possible. What I had done was include the slideshow widget as offered by blogger but instead of entering a Flickr or Photobucket feed as the URL for image source, I entered my blog's RSS feed which did the job of showing random post-thumbnails neatly with the forward/backward buttons as intended. The only problem with it, though, was the image size. I desperately tried to somehow increase the thumbnail sizes without losing on resolution but no success so far :(

    ReplyDelete
  26. Amit, read today's post: http://www.blogxpertise.com/2013/04/transforming-blogger-rss-feed-slideshow.html


    (please feel free to tip your waiter) ;)

    ReplyDelete
  27. This worked fine for adjusting the images in Popular Posts, but now it seems that the texts for the Headlines doesn't match up. Any way to fix that?

    ReplyDelete
  28. This will only work for Google-hosted images as it relies on the image's URL string for the manipulation.

    ReplyDelete
  29. actually, it still comes out pixelated. but there's a fix. you see that "c" there in that snippet of code you posted var thumburl = thumburl.replace('s72-c','s???-c'); well... as it turns out, i THINK that c stands for cubed. which means, any number you put in the ??? will get cubed, meaning ex: 150 x 150. if you don't want a square thumbnail, but one that's really true to size, then where it says ??? put the width of the desired thumbnail and then delete the "c" (not the minus sign, just the "c" after it so it should now read: (example, use your own dimensions!) var thumburl = thumburl.replace('s72-c','s150-'); and in my particular blog, i didn't add that snippet of code immediately after (catch)error, but a couple lines down next to another var line. adding it immediately after (catch)error made the whole thing disappear! so be careful where you place it, play around with it. hope this helps. don't ask for my url, it's still a work in progress! ;-)

    ReplyDelete

Post a Comment