I originally had this setting in twig for gallery thumbnails:

{% set square150 = {
    mode: 'crop',
    width: 150,
    height: 150,
    quality: 75
    position: 'center-center'
} %}

<img width="{{asset.getWidth(square150)}}" height="{{asset.getHeight(square150)}}">

I noticed focal point doesn't apply, so I removed the position property as described on https://docs.craftcms.com/v3/image-transforms.html

So now it's

{% set square150 = {
    mode: 'crop',
    width: 150,
    height: 150,
    quality: 75
} %}

and the focal point works (I'm writing this out here because it took me some time to find out).

But it seems to me that the cropping is kind of generous, the area of the thumbnail is quite large. It does contain the focal point, true. But the focal point isn't always in the center of the image, as I'd have expected.

I'm sure the current behaviour is fine for many use cases.

In mine, what I'd expect is that for the focal cropping, the extract of the image is zoomed in so far that the focal point is in the center.

So something like...

{% set square150 = {
    mode: 'crop',
    width: 150,
    height: 150,
    quality: 75
    position: 'focal-point-center-center'
} %}

Is that possible and did I interpret the behaviour correctly?

  • PS I'd rather stay with native functions – Urs Oct 5 at 7:32
up vote 2 down vote accepted

There's no way of doing that natively.

When you're cropping an image with Craft, it zooms in as little as possible. So, if you have an image that's 800x600 and you crop a square at 500x500, Craft won't zoom in at all.

When cropping is finished, the next task is to get the focal point as close to the center of the final image without crossing out of bounds.

Consider if Craft tried to put the focal point in the center no matter what. If the focal point was 100 pixels away from an edge and you wanted a square of 300x300, that would result in 1.5x zoom which would be a less desired outcome for many people.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.