Focus point in use with CSS

Is anyone using the focus point when displaying images on posts to make sure the image is cropped nicely? It’s something I’m thinking of doing for responsive reasons as the page scales (so wouldn’t want to generate thumbnails). I’m very glad the UI to set the focus point is in k4!

I can see myself spending a while fiddling with object-fit this and background-position that, so if anyone has done it already and is happy to share I would appreciate it lots, thank you.

You can use something similar to:

First, you need to know the values of x and y. You can do this in your template or in a controller.

$image = $page->image()->toFile();
$image->focus()->or('50.0% 50.0%')->value();
[$x, $y] = explode(' ', $focus);

Then you need to set the values inline in the image.

<img src="<?= $image->url() ?>" style="object-fit: cover; object-position:<?= $x ?> <?= $y ?>">

If you use something like tailwindcss

<img src="<?= $image->url() ?>" class="object-cover" style="object-position:<?= $x ?> <?= $y ?>">

I hope this can help you.

This should be enough. I don’t understand why you’re exploding it only to split it by a space again?

style="object-position: <?= $image->focus()->or('50% 50%') ?>"

Thanks for the help!

Off-forum I was sent this, which I’ll include below in case anyone else is looking for it:

https://johannesodland.github.io/2023/02/26/cropping-images-with-css-while-keeping-a-focal-point-in-the-center.html#tldr

Sure, I’m agree with you.

But if you’re trying to understand how it works, it’s a good way to explain what’s going on under the hood.

I use the same solution as @thguenther does. You don’t have to complicate things when it’s not.