Image Editor: Remove "focal point" and "custom"

Question

Is there a way to remove "focal point" and "custom" options from the image editor?

Custom ratios are documented here: https://craftcms.com/docs/4.x/config/general.html#image-handling

But I found no option to remove these (for me) not wanted options.

Sorry for German screenshot! :)

Answer 1

Not sure if there is a way to limit the available options, but I would argue that you don't need to. If your frontend layout requires images to be cropped to specific aspect ratios, I would enforce that in the templates using image transforms. This is much more robust than expecting editors to crop the image to specific aspect ratios. To control which part of the image should stay visible when cropping, your editors can set a focus point.

It enables image reuse and improves the longevity of your content. It will be difficult to use the same image in different places where different aspect ratios are required if you've already cropped the image to a specific aspect ratio for a specific placement. If your editors upload the original full-resolution image, they can simply select the image and you can crop the image differently depending on context.

Furthermore, you enable future design changes. Maybe at some point, the client wants their teaser images displayed in a 3/2 aspect ratio instead of 1/1. If you've cropped all your images already, you won't be able to re-use those very well. But if the original image is retained, you can simply change the aspect ratio in your templates at any time.

If you need to give editors control over the aspect ratio for specific image placements, you can create a Dropdown or Radio field with some predefined options (16/9, 3/2, 1/1, etc). Then use that field in your template as the aspect ratio for the image transform.

You can use the value in your templates like this:

{% set aspect_ratio = entry.aspect_ratio.value|float %}
{% set width = 600 %}
{% set transform = {
    width: width,
    height: (width / aspect_ratio)|round|integer,
    mode: 'crop',
} %}