Saturday, July 7, 2012


Resize Blogger popular post thumbnails

I got a question in a comment how to change the thumbnail size in Blogger popular post gadget, in my Trim Blogger popular post snippets right article. Here's how to do it, hack is similar to my previous popular post hacks.

You must have jQuery loaded in your page for the script to work. Check your template, and if it does not have jQuery, insert this before </head:>
<script src='' type='text/javascript'></script>

You can install this hack by adding an extra HTML/Javascript gadget in your sidebar, or paste the code to an existing gadget. The gadget must be after the popular posts gadget! Or you can put this code in your template's html, just before </body>. If you have my other popular post hacks, like shuffle, shuffle and limit or Trim Blogger popular post snippets right, you can put this code in the same place, after those hack's code.

In the script there is the variable var newSize = 100; which defines the new size for thumbnails. You can set the new size smaller or bigger than the default size, which is 72.
[Hide comments] - [Show comments]
Click on a single comment to hide/show its text


Anonymous said... [reply]

nice idea, good job

Taufik Nurrohman said... [reply]

Hey, MS-potilas. I have the untested one (without JQuery) but I think this will work too :)

function resizeThumb(size) {
var popularPost = document.getElementById('PopularPosts1');
var image = popularPost.getElementsByTagName('img');
for (var i = 0; i < image.length; i++) {
image[i].src = image[i].src.replace(/\/s72\-c/g, "\/s" + size + "-c");
// Resize to 200 × 200

Check this demo:

Taufik Nurrohman said... [reply]

@Taufik Nurrohman Ops, and because the popular post thumbnails have the width and height attribute, so:

image[i].src = image[i].src.replace(/\/s72\-c/g, "\/s" + size + "-c");
image[i].width = size;
image[i].height = size;

MS-potilas said... [reply]

@Taufik Nurrohman
Hi, thanks for this javascript solution. Some notes: You could also get the previous size from image: var oldSize=image[i].width; and use it in the replace. But the default size seems to be 72 on many templates. Regular expression does not have to have "g" flag, the size is in the url only once.

Narendra kumar said... [reply]

Can't get different width and height for a thumbnail.. like 200 x 100
help please .. thanks

MS-potilas said... [reply]

@Narendra kumar
Post thumbnails are always square, they have the /s72-c/ in the img path. Non square images would require changing the html markup so, that the square image could be displayed in the wanted size. Here's how to "crop" images using CSS: Faux Crop any size image with CSS. So it is not possible with this hack, it would require another hack.

Artemisia Moltabocca said... [reply]
This comment has been removed by the author.
Artemisia Moltabocca said... [reply]

How do I get this to work on search/label pages? I tried wrapping the thumbnail with a class called post-searcharchivelabel and changed your script from this:

$(".popular-posts .item-thumbnail img").each(function()

to this:

$(".widget .post-searcharchivelabel img").each(function()

but it doesn't work. I added the jquery before the /head and added your script right before the /body

Artemisia Moltabocca said... [reply]

Okay. I got it to work but all this script does is add a width and height attribute to the image, which I can do by simply adding "width=100 height=100 to the proper img tag in the template code. I'd like to hardcode change the displayed html from s72-c to s100 so the image isn't blurry.

MS-potilas said... [reply]

@Artemisia Moltabocca

this script also changes the image src attribute in line 10. Script assumes that image has width attribute, as popular post thumbnails do, because the script gets the old size from that attribute. If applied to some other images, there might not be that width attribute, then you could add it to html, or simply change line 8 to:

var oldSize = 72;

(or whatever the image width is before)

Saeed Zia said... [reply]
This comment has been removed by the author.
Alessandra said... [reply]

Você tem ótimas dicas e tutoriais!Parabéns!!
E obrigada pele ajuda.


Laura Pazzaglia said... [reply]

MS politas, can you tell me how I can apply this to the featured post widget?

I tried to look at the code to find the .ico name but it all looks like spaghetti to the non-programmer!



MS-potilas said... [reply]

@Laura Pazzaglia
Try changing line 7 to:

$("div.bp_item_thumb img").each(function() {

Hope it works :)

Admin said... [reply]

In my blog, there are many popular posts IDs: PopularPosts1, PopularPosts2, PopularPosts3. I want to resize all thumbnails of them, what should i do. thank you

MS-potilas said... [reply]

you seem to have the same class for each popular post widget, that is "PopularPosts", other classes seem to be the same, so you should change line 7 to:

$(".PopularPosts .item-thumbnail img").each(function() {

Admin said... [reply]


Yeah, thanks you, it works fine.

faisal said... [reply]

lol and Funny, Troll Images, Prank Peoples, Funny Peoples, funny planet, funny facts, funny cartoons, funny movies pics, iphone funny, funny jokes, Prank Images, Fail Pictures, Epic Pictures, Lols and Gags, Lol Pictures, Funny Pictures, Lol is the Laugh out of Laugh where you can Fun Unlimited and Laughing Unlimited.

Sarah Los said... [reply]

great post! thank you! do you know how to get title under the image instead of at the right hand side?
thank you!

MS-potilas said... [reply]

@Sarah Los
One way to alter the order of the elements is to edit the template, but you need some experience. Go to Design, Edit template html, select Jump to widget -> PopularPosts1. There are four sections in the widget code, you'll probably want to edit the last one, "(4) Show snippets and thumbnails".

Sarah Los said... [reply]

the image in the popular post widget is blurry? did I do something wrong? Thanks so much for your help! @MS-potilas

MS-potilas said... [reply]

@Sarah Los
Hi Sarah, if you give me your blog address I can take a look if the script works. :)

Christine Beeman said... [reply]


Hi. Thanks for this post.

My popular post images seem to be blurry as well.

Any suggestions?

MS-potilas said... [reply]

@Christine Beeman

the images are blurry, because they are in photobucket instead of picasa/google+. They are now just enlarged thumbnails.

You could try following:

After this line:

$(this).attr("src", $(this).attr("src").replace("/s"+oldSize+"-c/", "/s"+newSize+"-c/"));

Add this line:

$(this).attr("src", $(this).attr("src").replace("/th_", "/"));

It should replace the thumbnail with the full image.

Taufik Nurrohman said... [reply]

You can now use the built-in function called resizeImage from Blogger:

<img expr:src='resizeImage(data:post.thumbnailUrl, 200, &quot;1:1&quot;)'/>

Twinkler said... [reply]


Pak wendi said... [reply]

assalamualaikum wr,wb
Ki nawe… saya Pak Wendi,tki di malaysia
mengucapkan banyak2 terima
kasih kepada ki.Nawe
atas dana ghaib yang
kemarin aki berikan alhamdulillah ternyata itu benar2 ada
dan berkat bantuan
ki nawe saya bisa
melunasi semua hutan2
orang tua saya yang ada di
BANK BRI dan bukan hanya
itu AKi NAWE alhamdulillah
sekarang saya sudah bisa
bermodal sedikit untuk
mencukupi kebutuhan
keluarga saya sehari2. itu
semua berkat bantuan KI NAWE sekali lagi
makasih banyak yah KI NAWE…
yang ingin merubah nasib
seperti saya hubungi KI NAWE di nomor
0852-1837-9259 dijamin
100% ada atau silahkan

baron tuts said... [reply]

I think I've found a nice informative blog after searching a long time. Thanks for your great articles and information, Its very Helpful for everyone.The contents are quiet interesting. I will be waiting for your next post
Add Custom Featured Image in Blogger | How to Create your Own Logo Online for Free

Blogspot Guidance said... [reply]

You share nice tutorial related blog, which give me some good ideas in creating my own blog, For More Popular Posts widgets you can
Visit my blog here

Xplore IT Corp said... [reply]

Hey Nice Blog!! Thanks For Sharing!!!Wonderful blog & good post.Its really helpful for me, waiting for a more new post. Keep Blogging!
advanced java training in coimbatore
best java training in coimbatore

Post a Comment

Related Posts Plugin for WordPress, Blogger...
See the hack
for this dynamic
views icon: