PHPackages                             flokosiol/focus - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Image & Media](/categories/media)
4. /
5. flokosiol/focus

ActiveKirby-plugin[Image & Media](/categories/media)

flokosiol/focus
===============

Better image cropping for Kirby CMS

3.1.0(4y ago)18265.1k↑11.1%13[7 issues](https://github.com/flokosiol/kirby-focus/issues)MITPHP

Since Jan 3Pushed 2y ago4 watchersCompare

[ Source](https://github.com/flokosiol/kirby-focus)[ Packagist](https://packagist.org/packages/flokosiol/focus)[ Fund](https://a.paddle.com/v2/click/1129/36201?link=1170)[ Fund](https://www.paypal.me/flokosiol/10)[ RSS](/packages/flokosiol-focus/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (2)Versions (12)Used By (0)

Kirby Focus
===========

[](#kirby-focus)

[![Version](https://camo.githubusercontent.com/8e70aaf0af2ed3e83aa90ad3d33914b2d8b47b7fd81d055ce203931b62d79862/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56657273696f6e2d332e312e302d626c75652e737667)](https://camo.githubusercontent.com/8e70aaf0af2ed3e83aa90ad3d33914b2d8b47b7fd81d055ce203931b62d79862/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f56657273696f6e2d332e312e302d626c75652e737667) [![License](https://camo.githubusercontent.com/784362b26e4b3546254f1893e778ba64616e362bd6ac791991d2c9e880a3a64e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e2e737667)](https://camo.githubusercontent.com/784362b26e4b3546254f1893e778ba64616e362bd6ac791991d2c9e880a3a64e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d4d49542d677265656e2e737667) [![Kirby](https://camo.githubusercontent.com/cd2d20ceba86c87d3e60b47beff1004136b1f8f5536dec149c85a2ed9aa5806e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4b697262792d332e362e782d6630633637342e737667)](https://camo.githubusercontent.com/cd2d20ceba86c87d3e60b47beff1004136b1f8f5536dec149c85a2ed9aa5806e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4b697262792d332e362e782d6630633637342e737667)

With this plugin for [Kirby CMS](http://getkirby.com) you can prevent the most important part of an image from being cropped when creating automated thumbs.

Kirby 4
-------

[](#kirby-4)

Note

✨ **A core feature of Kirby 4** ✨

As of Kirby 4 this plugin has moved into core! Please find more infos on the [official Kirby feature page](https://getkirby.com/docs/guide/files#setting-a-focus-point).

There is a documented way [how to migrate](https://github.com/flokosiol/kirby-focus/issues/75) the existing data of your project using regex search and replace. Thanks [@FynnZW](https://github.com/FynnZW)!
And [@bnomei](https://github.com/bnomei) created a [Kirby CLI command](https://github.com/flokosiol/kirby-focus/issues/75#issuecomment-1834419319) to automate this process even further.

**Thanks for your amazing feedback in the last years!**

Kirby 3
-------

[](#kirby-3)

**The plugin does two things:**

1. It provides a **custom field** that allows you to set a focus point. The focus point is saved to the meta data file.
2. It provides a **new method** `focusCrop()`, which uses the focus point saved in the meta data file to crop an image in such a way that the focus point is in the center of the cropped image – or (if that's not possible) at least isn't cropped.

⚙️ Requirements
---------------

[](#️-requirements)

- Kirby CMS, Version **3.6**
- GD Library or ImageMagick

Please check out the `kirby-3.5` branch, if you are using [Kirby 3.5 or a version even older](https://github.com/flokosiol/kirby-focus/tree/kirby-3.5) than that.

💰 Commercial Usage
------------------

[](#-commercial-usage)

This plugin is free but if you use it in a commercial project please consider to [make a donation](https://www.paypal.me/flokosiol/10).

🛠️ Installation
---------------

[](#️-installation)

### Download

[](#download)

Download and extract this repository, rename the folder to `focus` and drop it into the plugins folder of your Kirby 3 installation. You should end up with a folder structure like this:

```
site/plugins/focus/

```

### Composer

[](#composer)

If you are using Composer, you can install the plugin with

```
composer require flokosiol/focus

```

### Git submodule

[](#git-submodule)

```
git submodule add https://github.com/flokosiol/kirby-focus.git site/plugins/focus

```

🖼️ Usage
--------

[](#️-usage)

### 1. Blueprint

[](#1-blueprint)

Add the focus field to the **fields of your [file blueprint](https://getkirby.com/docs/reference/panel/blueprints/file) (!)** and set type to `focus` like this:

```
fields:
  focus:
    label: My Focus Field
    type: focus
    width: 1/2

```

### 2. Template

[](#2-template)

Use the `focusCrop()` method in your template to get a complete `` tag:

```

```

As with every Kirby **image object** you can use all the known [methods](https://getkirby.com/docs/cheatsheet/file) like this:

```

```

### Some more stuff …

[](#some-more-stuff-)

The plugin comes with some helper methods to get the x and y coordinates as floats or percentage values.

```

```

### Focus (without cropping)

[](#focus-without-cropping)

As mentioned by several people ([Matthias](https://forum.getkirby.com/t/focus-define-an-image-focus-point/4249/11?u=flokosiol), [Guillaume](https://forum.getkirby.com/t/focus-define-an-image-focus-point/4249/53?u=flokosiol) and [Ola](https://forum.getkirby.com/t/focus-define-an-image-focus-point/4249/71?u=flokosiol)) the plugin can also be used to set a custom background position without cropping the image.

```