Content aware image cropping for Kirby
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Kirby Autofocus

Content aware image cropping for kirby.



Autofocus is an extension for the Focus plugin.

This plugin acts as a JS image.upload / image.replace hook, processing the / each image with the focus component, determining its appropriate focus point and saving it to the meta data file.

Please note that :

  • This is an experimental plugin. The algorithm isn't foolproof, it works best with certain kinds of images, and obviously the more the context of an image is « clear », the more its efficiency increases. I have included a sample test with 30 images, as well as a way to run your own.

  • The aim of this plugin is therefore to provide a « better than nothing » fallback to the Focus plugin whenever the editor didn't specify a focus point (omission, too many images, you name it).


First, you must install the Focus plugin.

Note : the plugin would still work without it, but apart from adding the focus point to the .txt file, you wouldn't be able to preview / override / use it with the Focus methods.

Once it is done, put the autofocus plugin in the site/plugins directory.

The plugin folder must be named autofocus :

|-- site/plugins/
    |-- autofocus/
        |-- fields/
        |-- hooks/
        |-- routes/
        |-- autofocus.php


There's nothing else to do.

The plugin will now process any image you upload through the panel, find a focus point, and use the Focus' field key to write the coordinates. Then you can use the Focus plugin as you usually do.

Run tests

I have included a sample test with 30 images.

You can run you own tests to determine if the algorithm suits your needs. One simple way is to add the focus field in your blueprint so that you can have a preview of where the focus is set for every image you upload.

An other way is to open the index.html of the _test folder in a browser, and upload an image. The images used for calculation will be displayed on the page, as well as the coordinates in the console.


We worked on this extension together with flokosiol, many thanks for your time and great help !

Also, thanks to texnixe and CodeStalker for their help in the forum.

The focus component is used to determine the focus point on upload.