Focus // Define an image focus point


#1

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:


Autofocus - Content aware image cropping
What plugins do you miss?
#2

Love it! Great job on this plugin.


#3

Wow, this looks really good and incredibly useful!


#4

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.


#5

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

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


#7

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


#8

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


#9

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?


#10

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.


#11

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.


#12

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;

#13

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.


#14

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!


#15

##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:


#16

I added support for ImageMagick to the develop branch.

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


#17

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.


#18

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

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

#19

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.


#20

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.