ImageField Focus: scale and crop focusing on the important portion of the image
Focus Scale and Crop ImageCache action compared to standard Scale And Crop

This module allows to scale and crop images focusing on their important portions.

View an example (and click on the faces)
Try out a demonstration

If you are using ImageField and ImageCache, you might have had hard times trying to get Scale And Crop to show what you actually want of your images.
That is what ImageField Focus was made for.
It allows you to tell ImageCache what portion of the image you want to focus to, and what portion you want to be cut out.

Key features

  • Extends ImageField's Image widget (no separate widget!)
  • Adds a new Focus Scale And Crop ImageCache action.
  • Adds a new Focus Crop ImageCache action.
  • Uses a new jQuery plugin that will soon be also available as a separate download.
  • Integrates with Smart Crop.

Installation (D6)

Ensure the following required modules are installed and enabled: Content (CCK), FileField, ImageField, ImageAPI, ImageAPI GD2 or ImageAPI ImageMagick, ImageCache, ImageCache UI
Copy the imagefield_focus folder to your sites/all/modules directory.
Navigate to admin/build/modules and enable the module.

ImageField-level settings

Edit some ImageField(s) you want to enable focus feature on.
Expand the Focus settings fieldset.
Check Enable Focus.
You may provide a minimum size and lock ratio if necessary.
If you specify a minimum size, you may have to adjust the minimum resolution for the ImageField too.
Save changes.

ImageCache-level settings

Add some preset(s) you want to make focus-aware, by going to admin/build/imagecache.
You should notice a new ImageCache action: Focus Scale And Crop
Add this action to your preset and provide a width and a height in pixels.
Select Focus strength:

  • High: displays the focused area as large as possible without upscaling
  • Low: displays as much as possible of the original image while keeping focused area in
  • Medium: well, it's between the 2 above :-)

New! Integrates with Smart Crop
By default, Focus Scale And Crop performs a standard Scale and Crop when no focus data is available for the image. But if the Smart Crop module is available, an extra option will show up allowing you to set Scale and Smart Crop as the fallback action instead.

Save.

The other available action: Focus Crop

ImageField Focus also provides another new ImageCache action: Focus Crop.
It allows you to crop images based on Focus rectangle or Crop rectangle.

Usage

When you upload an image through a focus-enabled ImageField, two new textfields and an image box are displayed.

Focus rectangle

This allows you to define the important portion of your image, that is, the portion that you want Focus Scale And Crop to focus to, but never cut out.
Click on the textfield to activate Focus rectangle and draw it from the image box.
If you do not want to specify any Focus rectangle, just leave the textfield empty.

Crop rectangle

This allows you define the portion of the image that you want Focus Scale And Crop to always cut out.
Click on the textfield to activate Crop rectangle and draw it from the image box.
Focus Scale and Crop will always cut out the portion of the image outside this rectangle.
If you do not want to specify any Crop rectangle, just leave the textfield empty.

Important!

  • There is a major difference between Focus Scale and Crop and the standard Scale And Crop: while the latter always returns an image cropped to the exact width and height defined in the action settings, Focus Scale and Crop may return an image smaller than the asked size. This is by design, as Focus Scale and Crop is made to never cut out the focused area, nor to show the area outside the crop rectangle.
  • Limitation concerning node translations and node revisions: when a same image file is shared across multiple nodes, only focus data from the current revision of the source (i.e. not translated) node is taken into account. That means that editing Focus or Crop rectangles on a node translation has no effect. This limitation should be addressed in next releases.
  • Limitation concerning node preview: #1032666: Previewing can show stale images

Todo list

Contact

This module is sponsored by Absyx.

If you like this module, please review Absyx.

Project Information

Downloads