add focal point support

Here's the article that spurred this discussion: http://designshack.net/articles/css/focal-point-intelligent-cropping-of-...

This initially seemed like a good idea.

This particular implementation uses CSS to do the cropping. It looks nice, but it's not great for performance. We would want those crops to be made server-side. Then, if you're viewing an image on a smaller screen, with a smaller crop, you're not downloading all of that extra image data for a larger image.

The demo implementation had one breakpoint, and a defined amount of cropping that is done below that breakpoint.

The more I think about this, the more I think this is one of those things that sounds good in theory but doesn't work out well in practice.

Both examples in the demo are medium to wide shots. The cropped versions are a little bit closer in.

But what if the image I upload isn't a wide shot, but a close-up of a face? The automatic cropping appropriate for a wide shot might not work as well as we zoom in on just the eyes, nose and a mouth.

I would think you would also want the breakpoints where cropping takes place to line up with the breakpoints in the theme, not just one generic breakpoint.

Is there a setting where you look at your breakpoints for each responsive style (for each type of image) and set a percentage crop at each breakpoint?

The whole idea of cropping images at smaller breakpoints is to provide art direction. I just don't think you can automate that. The amount of cropping is going to vary by image.

I could see a process like this:

1. Upload image
2. Choose responsive style for the image
3. Create a preview page, that shows one version of the image for each breakpoint, at the size at which it would appear on the page based on the image styles associated with that breakpoint.
4. For each breakpoint, adjust the cropping, using a UI similar to imagefield_crop: http://drupal.org/project/imagefield_crop

Keep in mind, if somebody is using the Media module, step one could be selecting the image from the media library. In that case, if somebody uses the same responsive style as they have used before, do you just use the crops they may have set up the previous time they used the image with that style? Do you allow the crops to be adjusted? If they are adjusted, does that mean there are now two sets of crops for this particular image with this particular responsive style? If they haven't used this responsive style for this image before, then we probably allow them to select the crops for that responsive style, as the image sizes and breakpoints will likely be different?

This gets really complicated really fast.

I think if we found a way to make this intuitive and easy, it would be a huge win.

I spent some time on this and I found out that Media, Picture and Imagefield Focus work together pretty nicely. Setting it up is doable if you know all modules, but nowhere near intuitive. However, once all configurations are in place, the work flow completely makes sense (assuming you understand how the media browser works and what imagefield focus does). Combined with some instruction, I would feel comfortable giving this to a client.

My test site allows me to:
- add an image using the "Media file selector" widget (you know, the media browser pop up) on the node form, or at file/add;
- on the next screen, specify the focus area (the area that should always be visible in a derived image) using the drag interface;
- enjoy responsive images that always include the focus area.
This is obviously a more simple approach than the 4 steps described in #1, the main difference being that you specify a focus point once for all derived images. The user does not have total control over the exact crop that is made for every image style. However I think that that much control would be a usability problem to most users, not a feature.

Modules I used are:
Drupal 7.18
Administration menu (admin_menu) 7.x-3.0-rc3
Breakpoints (breakpoints) 7.x-1.0
Chaos tools (ctools) 7.x-1.2
File entity (file_entity) 7.x-2.0-unstable7
ImageField Focus (imagefield_focus) 7.x-1.0
Media (media) 7.x-2.0-unstable7
Picture (picture) 7.x-1.1
Views (views) 7.x-3.5
Imagefield Focus was patched for Media support using http://drupal.org/files/iff-media_1.patch found in #1781778-8: Integrate imagefield_focus with the Media module. I'm attaching a drush make file if you want to try it out using the same code.

tl;dr: The combination of Media, Picture and Imagefield Focus may not fit all uses cases but it looks very promising to me.

@attiks you're welcome!

I chose Imagefield Focus for my test because I like to have manual control over the focal point and because I like the support for Media module. For other users an automated solution like image_focus or smartcrop may be better. I have found comparisons of image crop modules at http://drupal.org/node/1179172 and http://larsolesen.dk/node/362.

Imagefield Focus can use Smart Crop as a fallback if no manual selection is made. Best of both worlds.

The combination of Media, Picture and Imagefield Focus may not fit all uses cases but it looks very promising to me.

I agree that this is promising.

I recently delivered a responsive site that uses Manual Crop with a Smart Crop fallback (Media wasn't required but support is there had I needed it). It works well but the client has to specify a manual crop for every image style that is to be used by an image field (hence the use of Smart Crop as a fallback - often the client can't be bothered). Imagefield Focus could have reduced any manual intervention to once per image (still with Smart Crop fallback for lazy people or for an image that doesn't warrant the attention). The only reason that Imagefield Focus wasn't delivered is because Manual Crop's UI blew it out of the water.

Imagefield Focus needs more work in the UI department for many clients to "get" it. That and the concept is still a little alien to many people (clients), however I feel that this can be overcome with basic training and good example use cases.

Please take a look at the focal point module. It does not use the framework referenced in the original post, but it can make the process of integrating quite a bit easier.