Pages

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:>

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.

@Taufik NurrohmanHi, 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 kumarPost 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.

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.

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:

@Sarah LosOne 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".