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.
Post Comments (Atom)
Click on a single comment to hide/show its text
34 comments:
nice idea, good job
Not working
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 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;
@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.
@MS-potilas I got it.
Can't get different width and height for a thumbnail.. like 200 x 100
help please .. thanks
@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.
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
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.
@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)
Você tem ótimas dicas e tutoriais!Parabéns!!
E obrigada pele ajuda.
Bjos
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
@Laura Pazzaglia
Try changing line 7 to:
$("div.bp_item_thumb img").each(function() {
Hope it works :)
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
@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() {
@MS-potilas
Yeah, thanks you, it works fine.
great post! thank you! do you know how to get title under the image instead of at the right hand side?
thank you!
@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".
the image in the popular post widget is blurry? did I do something wrong? Thanks so much for your help! @MS-potilas
@Sarah Los
Hi Sarah, if you give me your blog address I can take a look if the script works. :)
@MS-potilas
Hi. Thanks for this post.
My popular post images seem to be blurry as well.
http://njkg76.blogspot.com/
Any suggestions?
@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.
You can now use the built-in function called resizeImage from Blogger:
<img expr:src='resizeImage(data:post.thumbnailUrl, 200, "1:1")'/>
http://www.dte.web.id/2016/06/mengubah-ukuran-thumbnail-tanpa.html
HAPPY NEW YEAR, MSPOTILAS!!! WISH YOU THE BEST!!!
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
Like your work..very nice keep doing good work.
Compress JPG Online Free
Online Compress JPG
Compress JPG Online
Like your work..very nice keep doing good work.
Car Rental in Goa
Self Drive Cars in Goa
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
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
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
Thanks for sharing.Amazing information
zakkitech
See the hack to make the 'Post a Comment' link bigger.
Post a Comment