Custom aspect ratio

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

If this were the original image:

Adding those parameters woule get you a 4:3 crop centered on the focal point: (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 :slight_smile: