Focus // Define an image focus point


Version 1.0.3

This is just a maintenance release. I changed the structure of files and folders and added a focus class. If everything is fine for you so far you can also stick to version 1.0.2.



Version 1.0.4

If you are using ImageMagick and a multi-language site with a localized default language that uses comma for floats … this update is for you. Thanks again, @Malvese.


There are some small documentation fixes, too.


Thanks again to you for bug hunting, and for a fantastic plugin :wink:


Is it possible to use it with other thumb-options, like grayscale?
Thank you for this fantastic plugin :slight_smile:


Theoretically, yes :wink:

The focusCrop() calculates various params which are passed to the thumb() method. You could use thumb() and calculate these values by yourself but this is definitely not a good idea …

But I think I can extend focusCrop() to accept a third argument $params (Array) which will be passed to thumb(). This would be much better to handle …

<?php echo $image->focusCrop(200, 300, array('grayscale' => true)); ?>

If you like, you can open an issue on Github. Thanks for the suggestion.


I pushed a first draft to the develop branch. Seems to work pretty well, but I will do some more testing before merging it to the master.


Wow, that was fast :slight_smile: I can test it on monday and then I can give you a feedback


Hi @flokosiol,

I can’t get it to work. I’ve tested it with IM and GD, and the image doesn’t convert to grayscale.

<?php echo $image->focusCrop(200, 300, 90, array('grayscale' => true)); ?>

But I noticed that we need to set the quality. The following code would cause to this two notices:

<?php echo $image->focusCrop(200, 300, array('grayscale' => true)); ?>
Notice: Array to string conversion in /www/htdocs/w00b0859/ on line 179
Notice: Array to string conversion in /www/htdocs/w00b0859/ on line 175


Thanks for testing. I’ll have a look at this as soon as possible.

Please notice: I changed the third (so far undocumented) argument ‘quality’ to ‘param’, so that there’s no need to set the quality explicitly to use the params-option. This would be the new way to go …

<?php echo $image->focusCrop(200, 300, array('quality' => 80, 'grayscale' => true)); ?>

I will add a check here, if the third argument is numeric to keep backwards compatibility.

I think we should move further issue discussion to Github.


Version 1.0.5

Focus plugin now supports quality (correct filename), grayscale and blur.

<?php echo $image->focusCrop(300,300,array('quality'=>70,'grayscale' => true,'blur' => true));


Hi Flo, Thank you for your work. Everything works like a charme now :slight_smile:


thank you as well. this plugin has helped me alot getting much better cropping being able to select a focus point.


Thanks for the plugin, using it with css by multiplying the value by 150 to use as a background-position percentage offset. No real math logic behind this but it just works for me.


As of version 1.0.7 you can use the built in methods focusPercentageX() and focusPercentageY(). But this doesn’t include custom maths of course :wink:


Version 1.0.8

As suggested by @jenstornell*, Focus now supports forced coordinates. You can override the values of the field by setting focusX and/or focusY within the params array like this …

<?php echo $image->focusCrop(300, 300, array('focusX' => 0.5,'focusY' => 0));

The new version also fixes an issue with localized floats for default values (0.5/0.5). Special thanks to @ola* for the fix.

*It seems to be a „swedish driven“ update:stuck_out_tongue_winking_eye:


i once did something similar to your plugin but using or using that lib within the panel – hacking it al little bit – my customer had a preview of zoom and crop. i just had a custom file field storing the transformation json.

{ scale: 1.4, angle: 270, x: 10, y: 20, w: 400, h: 300 }


Alright, this is a little experiment:

I’m really curious about who is using my plugin and so I decided to add a wiki to the github page where you can add your website to the list, if you are using the Focus Plugin.

So please let me know! Thanks in advance! :heart:

I thought it would be easier to edit the wiki, than making a fork and sending a pull request. If you want you can just add a comment to this issue or contact me in any other way and I will add it to the list. Sorry for any inconvenience …


Do you want a pull request for the wiki? I use the Focus field on a lot of websites, including and

I am in the process of writing a case study for the Goldener Hahn, where I also mention the Focus field and how important it is for easy to edit responsive images: (WIP)


To be honest, I thought it would be easier for others to add something to the wiki. Forking the wiki and making a PR is a lot of work, just to add a few links :confused:

To answer the question: Yes, you can send me a pull request. Or just drop me line and I will add it to the list. [I did it for the two links you mentioned and updated my post above]

Wow. This is awesome. Thanks a lot for mentioning and spreading the word.


hey @flokosiol I’m experiencing a weird bug using Focus and latest Kirby version.
The plugin works fine until i use array('quality' => 85)

The I get an Array to string conversion warning coming from kirby/component/thumb.php

You want me to open an issue on github? Is it a known bug? Or am I just doing something wrong?