Better Image Cropping with Imagefield Focus

  • Posted on: 7 February 2012
  • By: Margaux
ImageField Focus in action

You have beautiful headshots of your staff, and you want to put them on everybody's bio. The problem: ImageCache changes your rectangular photo into a square (to fit your site design, of course), and in the process it chops off the top of everybody's head!

Never fear, the ImageField Focus module can help. It gives you (the end user) more control over the way Drupal crops images. It lets you specify which part of the image should be the center, which parts should always be kept, and which should never be kept. Here's a little guide for setting it up.

First, log in as admin, and install and enable your modules: ImageField, ImageCache, and ImageField Focus.

Now you need to enable the focus cropping on the relevant image field(s). As you edit the field, you'll see a new field set called "focus settings." Expand it and check the "enable focus" checkbox. There are some optional settings for minimum size and lock ratio, if you like. Don't forget to save the field settings.

Next come the ImageCache settings - you need to grant the focus ability to at least one of your image presets. So, edit the appropriate preset (or make a new one). You should see two new effects in your list of options - choose "focus scale and crop." Assign the dimensions as usual. Also choose a "focus strength" - I generally use the "high" setting, which displays the focus area as large as possible within the constraints of the dimensions you have set. Save.

Now, when you edit a node that uses this imagefield, you'll see more options! Instead of just the simple photo upload dialogue, you'll now see options for "focus rectangle" and "crop rectangle". In this example you'll only need the "focus rectangle", which is the part of the photo that you always want to display / never crop out. So, click into the "focus rectangle" field. Then use your mouse to draw a rectangle around the face (including the top of the head, and the shoulders if you defintely want to keep them). Scroll down and save the node. Voila!

(If you still see the poorly cropped version of the image, you might need to clear caches.)



Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.