Pages

Saturday, July 7, 2012

34

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='http://code.jquery.com/jquery-latest.js' 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

34 comments:

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
resizeThumb(200);


Check this demo: http://jsfiddle.net/tovic/kw7LD/21/

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.

MadEagles 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.

costumingdiary.com said... [reply]
This comment has been removed by the author.
costumingdiary.com 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

costumingdiary.com 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
Hi,

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)

Unknown 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.

Bjos

Unknown said... [reply]

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

http://www.bloggerplugins.org/2011/09/featured-posts-widget-for-blogger.html

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

Thanks,

L

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]

@Admin
Hi,
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]

@MS-potilas

Yeah, thanks you, it works fine.

Unknown 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".

Unknown 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. :)

Unknown said... [reply]

@MS-potilas

Hi. Thanks for this post.

My popular post images seem to be blurry as well.

http://njkg76.blogspot.com/

Any suggestions?

MS-potilas said... [reply]

@Christine Beeman
Hi,

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;)'/>

http://www.dte.web.id/2016/06/mengubah-ukuran-thumbnail-tanpa.html

Twinkler said... [reply]

HAPPY NEW YEAR, MSPOTILAS!!! WISH YOU THE BEST!!!

Unknown 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

Anonymous said... [reply]

Like your work..very nice keep doing good work.

Compress JPG Online Free
Online Compress JPG
Compress JPG Online

ordansmith said... [reply]

This blog was really helpful for me. Hope you will write more and publish.

Bike Rental in Goa
Rent a Bike Goa
Bike Rental in Goa Airport

Anirban Ghosh said... [reply]

It resembled an extraordinary treat shouting out to me to eat it. This is acceptable substance.
SAP training in Mumbai
Best SAP training in Mumbai
SAP training institute Mumbai

BestTrainingMumbai said... [reply]

I consistently wouldn't be so associated by any articles identifying with this subject, yet yours got my attention.
SAP training in Kolkata
Best SAP training in Kolkata
SAP training institute in Kolkata

TopzMobile said... [reply]

Thanks for sharing.Amazing information
zakkitech

Post a Comment

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