Image cropping with focus points

[thomasaull]

I've read in the official roadmap announcement there will be support for predefined crops in the core in 2018. I want to opt for a slightly different approach: Instead of predefined crops, I feel like it would make more sense to make use of focus points (actually there is an outdated module for that)

The reason is simple, in times of responsive websites and images, it doesn't really makes sense to have a predefined dimension for an image. I want different dimensons for mobile, tablet, large screens, … Of course it'd be possible to define multiple crops but the concept of defining a focus point and cropping the images after that, makes much more sense in my opinion.

[gmclelland]

I agree, I think it could work similar to the https://www.drupal.org/project/focal_point module for Drupal. Here's an article about it https://www.deeson.co.uk/labs/drupal-focal-point-module-making-most-your-images.

[gmclelland]

A little more CMS research.

I noticed Umbarco (a .net CMS) is using focal point image cropping. https://our.umbraco.org/documentation/getting-started/backoffice/property-editors/built-in-property-editors/image-cropper#set-focal-point

With CraftCMS it sounds like https://github.com/smcyr/Craft-FocusPoint is popular:
https://nystudio107.com/blog/creating-optimized-images-in-craft-cms and https://medium.com/parliament-perspective/creating-focal-points-in-craft-cms-f4d4ebd0fb7e

Squarespace.com - https://support.squarespace.com/hc/en-us/articles/205826028-Using-focal-points-to-center-images

wix.com - https://support.wix.com/en/article/changing-the-focal-point-of-an-image-or-video-in-the-wix-pro-gallery#!

Silverstripe - https://www.silverstripe.org/blog/focuspoint-smarter-image-cropping-for-silverstripe/

Sitecore (a .net CMS) - https://inverseproportion.wordpress.com/2017/04/12/image-field-with-focus-cropper-in-sitecore/

I like checking other CMSs because it gives different UI ideas. I like wix's focal point button

Hope that helps

[thomasaull]

Wow thanks @gmclelland I really hope this idea picks up :)

[ryancramerdesign]

I agree, the focal point options seems like a more useful one. Also seems like it would be simpler for editors to define, easier on developers to work with, and more scalable long term—if some dimension or proportion need changed, it wouldn't require defining a new crop, etc. Thanks for the suggestion.

[gmclelland]

Haven't tried it, but I came across https://github.com/boschni/FieldtypeFocusPointImage for anyone interested.

[ryancramerdesign]

I've added support for this in the latest commit to the dev branch. To use it, click the "Focus" button that appears with every image. You should then get a focus point you can drag around wherever you want it. After saving the page, any $image->size() calls that specify both width and height will crop to the focus point you defined. In addition, any existing image variations (that specify both width and height, but not crop) will be re-created to reflect the new focus point.

I think this is pretty useful as it is, but icing on the cake would be the ability to specify a zoom setting as well. For instance, using the drawing in the first post of this thread, adding the ability to not just make the left mountain the center, but also the ability to do those green boxes too (which I'm assuming represent zooms into the photo). So I'm looking at potential ways to implement that as well.

cc: @horst-n

[thomasaull]

Wow! I just tried it, and everything so far works like a charm and is looking good. I'm seriously amazed, how fast this went from request to execution! This basically solves all my needs I did have with images for the last couple of projects :)

Initially, the different frames in my sketch should illustrate different crops. However, I made a small mistake: the turquoise and green crop could not happen this way – at least one side would have to be on the edge of the original image.

Personally I'm not sure if it does need a zoom function, since you could achieve the same result with a combination of doing a crop first and using the new focus function second. Maybe others have different opinions or I'm missing a more specific use case.

Good work Ryan!

[jmartsch]

Hi. I just tried it, and it does not work in my case. Maybe I am doing something wrong.
Set a focal point and saved the page.

Then I embeded the image with
<img src="<?php echo $newsItem->images->first()->size(480,320)->url; ?>" />
and here is what I get:

Did I do something wrong? Why does the final image not reflect the focal point?

[ryancramerdesign]

@thomasaull Thanks, glad you like it, and thanks for the great suggestion. I didn't know about focus point solutions prior to this, but it seems to be a great fit for PW.

@jmartsch I just tried to duplicate that issue, but can't here. I noticed in your screenshot that you are using something beyond a core images field. I see a download icon next to the filename, and also a "predefined crops" area, neither of which are in the core images field. I'm guessing that's got something to do with it. Can you try switching it to a core images field (or turn off whatever is adding those things to it) and see if the issue remains? Make sure to change the focus point when testing again, as it's not going to re-create image variations unless the focus point changes.

[ryancramerdesign]

@jmartsch also double check that it's not simply a browser cache issue. If you've got Chrome dev tools enabled, your browser cache is likely off. Or you can hit reload a couple of times, or use "->URL" uppercase in your API call, which will use a cache busting filename.

[adrianbj]

but icing on the cake would be the ability to specify a zoom setting as well.

Ryan - perhaps you could get some inspiration from this module: https://processwire.com/talk/topic/8079-imagefocusarea/

Maybe you have already seen it, but just in case you haven't.

[jmartsch]

It works on a fresh PW installation. So now I have to find the culprit in my existing site. I am using multiple languages, and ImageExtra and CroppableImage3 modules.

[jmartsch]

Found the culprit. I had the module ImageFocusArea installed and it caused a conflict. Removed it and everything works fine.

[horst-n]

@ryancramerdesign it works nicely in my tests!
I digged not into the code, but want to point out my thoughts early, so please bear with me if something is still answered within the code:

1. when changing the focal point, I sometimes don't get updated variations in the browser output, only when I call $images->removeVariations(). Maybe something like cache-busting URLs would be usefull? (Set to the timestamp of the last modified focal point selection!)

2. I'm definetly for some sort of zoom param. Maybe something basic like additionally to the current behave have a medium and a closeUp setting. (Or one zoom setting with something like a percent value 80 to 20 in steps of 10.)

That would cover everything I currently can think of. :)