Something that we've discovered is that there is more to the crazy URL string that you get when uploading to Picasa then meets the eye. In fact, you can use that crazy URL to your advantage, having it automatically resize images (uploading a large size than having it generate small, optimized versions to your page needs) and automatically thumbnail images to a specified square dimension.
For example, this is the link to the full size image that I upload through Blogger:
http://1.bp.blogspot.com/-jrlpdLzy4_0/ThzZ62NS6rI/AAAAAAAACgQ/qS3Z-oe7Ho8/s320/%255BUNSET%255D
Changing the s-value
By adding a value (s150) before the filename, I can get the image returned but resized to a specified dimension with a maximum dimension of 150 pixels:
http://1.bp.blogspot.com/-jrlpdLzy4_0/ThzZ62NS6rI/AAAAAAAACgQ/qS3Z-oe7Ho8/s150/%255BUNSET%255D
Changing the optional flag
Other variations on this include adding -c, -p and -d to this string, each with different results, and there are others that have specific uses from other Google applications, but the below examples have been the ones that we've found ourselves using for various projects.
Optional -c flag
http://1.bp.blogspot.com/-jrlpdLzy4_0/ThzZ62NS6rI/AAAAAAAACgQ/qS3Z-oe7Ho8/s200-c/%255BUNSET%255D
This returns a square crop of the image to the specified dimension. If the image is a rectangle it returns the largest square of that rectangular image, then returns it in the specified dimensions.
Optional -p flag
http://1.bp.blogspot.com/-jrlpdLzy4_0/ThzZ62NS6rI/AAAAAAAACgQ/qS3Z-oe7Ho8/s200-p/%255BUNSET%255D
This returns a center-square of the
original image with the specified dimension. You'll notice how this is different than the -c flag above.
Optional -d flag
http://1.bp.blogspot.com/-jrlpdLzy4_0/ThzZ62NS6rI/AAAAAAAACgQ/qS3Z-oe7Ho8/s200-d/%255BUNSET%255D
This prompts to download the image.
THANK YOU! I've been doing proportions for my sidebar photos for ever. Now I can skip the math. :)
ReplyDeleteMy pleasure! Do you mean on your right side for the previous posts? And have you read this article for customizing your PopularPosts gadget? You could essentially make your Popular Posts gadget look identical to your recent posts list.
ReplyDeleteThanks for a wonderful insight into the resizing of the images. This is a genuine new idea. Keep great work going for the benefit of bloggers.
ReplyDeleteYou can use this too if you just want to center and crop the thumbnail to a square. Adjust the s320 to what ever size you want the square to be. For example if you want the thumbnail to be 200X200 make it /s200/ but to tell the server to crop the image add -c to it like this /s200-c/
ReplyDeleteWhat's amusing is that I use the -c code in TONS of scripts that we've posted here, but for some reason left it out of this page post and I can't figure out why!
DeleteUpdating the post momentarily, thank you for pointing this omission out to us.
hey david,
ReplyDeleteawesome posts. recently analyzing one of the javascript function i saw that it is using replace method to replace image href by s250-c. so i googled it out of curiosity and came to your blog.
i understood its usage from your post and used it for function createSummaryAndThumb function used by many templates.
thanks a ton. i am going to use it my next blog - fingers on a screen
http://fingersonascreen.blogspot.com
Have you read our better version of the summary and thumb script?
Delete