A lot of our clients are asking for a simple way to crop images to a custom aspect ratio. It would be great to add an option with a custom ratio field, where you could simply type in like 4:5, 16:9, aso.
Hi @mattias,
That sounds like a perfectly sensible feature request, so let’s leave that up!
But in the meantime, just as workarounds, are you already familiar with the “focal point” feature? New feature: control the cropping of your images with focal points That’s our normal recommendation for custom cropping.
If you use that, you can make a DatoCMS block with width & height fields, like this:
Which would look like this to your editors:
And in the GraphQL response, you can get those fields like this:
Then, on your frontend, you could combine responsiveImage.src with the widthRatio and heightRatio fields, composing it into an Imgix URL like https://www.datocms-assets.com/132750/1716244124-crater-lake.avif?ar=4:3&fit=crop.
If this were the original image: https://www.datocms-assets.com/132750/1716244124-crater-lake.avif
Adding those parameters woule get you a 4:3 crop centered on the focal point: https://www.datocms-assets.com/132750/1716244124-crater-lake.avif?ar=4:3&fit=crop (using the ar parameter, see Imgix docs for details).
I know this isn’t as smooth or easy as a built-in aspect ratio feature in the image editor, so let’s leave this feature request up too. But it might be a stopgap if you need that feature sooner 