Focus // Define an image focus point

With this plugin editors can set an individual focus point to any image, which can be considered when the image is cropped.

See github page for more information …

Any testing and feedback appreciated :slight_smile:

16 Likes

Love it! Great job on this plugin.

Wow, this looks really good and incredibly useful!

That’s a great plug-in!

Just an idea for another helpful feature: It would be great if on can not only define a point but an area to crop the image (including a given aspect ratio). For example on my website there’s a gallery with square thumbs and big images of various rations and sizes. At the moment I got two files for each image (thumb + original). Being able to define the thumb area on the original image would make life much easier. Especially for clients who can’t use Photoshop etc. to do the cropping before uploading.

Thanks for your feedback.

I thought about this, too. But I think the „one-click-one-point“ solution is much more stable. I had really bad experience with third party „rectangle-cropping-plugins“ for Drupal. So I decided to keep it simple … and of course it was easier for me to implement :wink:

But this could be an option for the future …

6 Likes

Hi,
what I miss is a demo to see the plugin in action.
Apart from that great Plugin.

Here’s a short video (mp4) with the plugin in action.

1 Like

This is really great - I like the “simplicity”; just point and click :slight_smile:

For those interested in a more complex solution (which is not meant a “bad” solution) you can check out the Kirby Advanced Image Cropper;

https://github.com/blankogmbh/kirby-cropper

Panel - Cropper for Images

Like @flokosiol I think a single point is much easier to use (just click on the most important element, boom. Done.) and also much more future-proof: if/when you update the design and the image ratio changes you may have to re-crop every image.
But I also see use cases where a crop would fit better: more “art directed” thumbs or image headers may require precise cropping. In this case a preview is also very important, but I believe not the purpose of this plugin.

@flokosiol This is so timely, I was thinking of trying to hack one myself. I’m a lousy dev so I’m glad you wrote one first :blush:

PS: can it work with Image Magick?

2 Likes

Thanks for your reply, @Malvese.

Unfortunately it doesn’t work with ImageMagick at the moment :disappointed_relieved:

The reason for this is, that I need to use a custom thumbs driver (GD and IM have different ones) and mine is based on GD (because I use it).

But I created an issue on github and this will be the next thing to do, I guess.

1 Like

Really great work, @flokosiol. Is it possible to get the x- and y-position (in percent) of the focus-point, like $image->focus->x()? Often you need a flexible “cropping” by showing an image as a css background-image (with background-size: cover), where the size of the image depends on the users viewport. If you now set the background-position value to the focus point, you can be sure, that the desired focus of the image is always visible.

2 Likes

The x and y values are stored in the file meta field as JSON string, e.g.

Focus: {"x":0.42,"y":0.55}

So you can get the values like this:

$focus = json_decode($file->focus()->value());
$x = $focus->x;
$y = $focus->y;
3 Likes

Combining the focus with css backgrounds is a great idea, @jash. I didn’t even think about that!

The solution @texnixe mentioned is exactly the way I do it.

Version 0.2

There was a bug with thumbs getting squeezed by the focusCrop() method. I thought I had already fixed it for the initial version … but obviously I had not … :confused:

Thanks to @thguenther for testing and reporting!

1 Like

##Version 0.3

Hopefully the main cropping issues are fixed with this version. Thanks again @thguenther for extensive testing and fighting against the issues. I really appreciate your work! :slight_smile:

3 Likes

I added support for ImageMagick to the develop branch.

Is there anybody out there who would like to test it?

Yes! I will try it for the next few days, I use it on a site that goes live soon :slight_smile:
Expect feedback on thursday/friday.

1 Like

Great! Thanks a lot @Malvese
Please make sure to adjust your config file …

c::set('thumbs.driver', 'focusIM');
1 Like

Did you have time to check the ImageMagick support @Malvese? Don’t worry if not … just wanted to ask :stuck_out_tongue_winking_eye:

Maybe I should publish it without further testing!? Works fine for me so far.

Yay! Sorry for the delay, I didn’t have time to really test, and I’m now on holydays :wink:
So far it doesn’t seem to work for me: I can set the focus point in the Panel but focusCrop() doesn’t seem to do anything. The portraits below should all be round (well, square actually, but I added a border-radius)

I set c::set('thumbs.driver', 'focusIM'); in the config file as instructed, not sure what’s wrong yet.

I’ll dig a little bit when I have some time.