Focus // Define an image focus point

I’m using your plugin on a soon to be released site. It’s a brilliant plugin in all its simplicity but with a lot of power. Our client loves being able to define focus point to the large hero images so the important parts of the image is always shown on desktop or mobile.

One of the best plugins for the Kirby ecosystem in my opinion.

For the record, I rarely use your plugin to crop the images to thumbs on the server. Instead I use your plugin to output the coordinates of the focus point for images used as a background image or an image with the object-fit: cover; css property.

Example:

<div style="background-image: url(image.jpg); background-size: cover; background-position: 40% 80%;"></div>

<img src="image.jpg" style="object-fit: cover; object-position: 40% 80%;" />

For fullscreen images it’s better to let the browser crop the images depending on screen size and orientation (portrait/landscape).

6 Likes