Focus Pocus

I often do posts with sets of images in a row, and if those images aren't the same aspect ratio they can look a bit messy:

It doesn't look terrible, it's got a scrapbook or pinned-to-the-fridge vibe to it. But, maybe I want them to look a bit neater.

OK, they line up now and form a nice neat image block on the page, but the subject of each of the photos is positioned awkwardly, especially on the moon and snail photos (I think Safari now detects a focus point automatically so it might look fine if you're using that). Now, normally I'd crop the actual images before uploading, but maybe I don't want to always do that. You can click each of these images to see the full thing, and sometimes I'd like the 'on page' view to be a preview. Having a nicely positioned crop of the original image means creating and uploading (and downloading, for you) only one image.

There, better.

What's changed is the CMS I use, Kirby, lets you set a focus point on images (a lot of other CMSs do this too, but I like Kirby and recommend it). The built in stuff for it in the CMS seems to be around creating separate thumbnail images, which is fine and great, but like I said above, I only want one image and to display it nicely using CSS. I ran into a documentation issue, where the use-case in the documentation isn't anything like what I want to do. Ironically if I hadn't updated how I do my blog to match the new way the CMS works, the documentation would have been fine for me.

And then I run into my usual problem with everything to do with my site, I just don't use PHP often enough. I also don't have the time to stay current with it. I could just use some hosted thing and not have to deal with all that, but that wouldn't interest me at all: I like making things and customising things and I just have to deal with the frustration that causes. But I needed help getting this thing to work. Thankfully Jasper offered to help, and on a Zoom call very patiently took me through how to get the values from the CMS into my CSS. I'd posted on the forums asking for help so I posted the solution Jasper helped me with there, in case anyone needs it.

I thought getting the CSS to work would be simple. Where I work we needed to do almost exactly this kind of thing for user avatars. I'd found this article which explains the whole thing very well: Keeping the Focus Point in the Centre with CSS. But! The way I'd made my templates meant the technique didn't work so well. I simplified it a lot and it works fine enough for me:

img {
    display:block;
    max-width:100%;
    object-position: 
        clamp(0%, var(--crop-focus-x), 100%)
        clamp(0%, var(--crop-focus-y), 100%);
}

So there it is. I think I'll be using that a lot. Probably quite soon as I've taken a lot of photos of things in the garden and I've only posted a few of them online (to Mastodon).