Simple and exact image cropping

Published May 18, 2009

We all know imagecache is a great module to grab images of any size that are in your site's files/ directory, but sometimes it's hard to get every image to be the right size without black borders on the sides or top. The trick is to know the proper "order of operations".

Here's a fast recipe for square thumbnails that will work with landscape or portrait picture orientations:
Scale - width: 85, height: , upscale: No
Crop - width: 85, height: 85, xoffset: , yoffset: top
Scale And Crop - width: 25, height: 25

This is a recipe I use for user profile pictures, and it handles very wide or tall images well. Adjust the values proportionately to fit your needs. Step 3 is an optional step I apply in order to make a super-small thumbnail in certain places in the theme.

NOTE: the original size of the picture in this case is usually larger than 170px, but at the very least, it should be larger than the size of the initial scale. If you are starting with a very small picture, this recipe won't work as well.

Comments

Thanks for this tutorial. However, I'm still having problems with landscape images. I scale with width, in my case to 188, no height, not upscaling. I then crop to 188x188 with the yoffset of top. Portrait images work great, perfect width with bottom cut off. Landscapes, however, each have a black bar across the bottom.

I suppose I could scale huge and then crop, but I'm wanting as much of the image in the thumb as possible.

Submitted by Guest (not verified) on Sat, 11/14/2009 - 22:28

Thank you very much for this post.
This was very helpful to me as I am very novice to drupal.
The "Scale And Crop - width: 25, height: 25" had gave me a bit small thumb than what I have assumed so I have edited it to "Scale And Crop - width: 40, height: 40", Then it gave me the exact thumb what I have assumed for.
Thank you very much again for this tutorial.

Pradeep.

Submitted by Guest (not verified) on Sat, 11/13/2010 - 04:24

Sign up to receive email notifications of whenever we publish a new blog post or quicktip!

Name
CAPTCHA