Focal point crop with aspect ratio

🆘 Support
1

Unsure if this is expected behaviour or not, but my responsive image queries are not having their focal point set automatically when an aspect ratio is also used.

From the announcement on the blog:

“When requesting a cropped version of an image without explicitly specifying a crop mode, DatoCMS will automatically center the crop on the focal point.”

Does setting the aspect ratio count as specifying a crop mode? If so, it would be great to be able to get the focal-point functionality when using aspect ratios.

2

hey @hayden.osborne, can you please send an example of your usage and your expected behaviour? Thank you!

4

Running a query with the aspect ratio set on a responsive image field:

image {
  responsiveImage(imgixParams: { ar: "1:1", fit: crop }) {
    ...responsiveImageFragment
  }
}

Results in the images being returned without focal point values being set (some fields have been omitted for clarity):

aspectRatio: 1
height: 600
sizes: "(max-width: 600px) 100vw, 600px"
src: "https://www.datocms-assets.com/[url].jpg?ar=1%3A1&fit=crop"

Running the same query using dimensions instead of aspect ratio:

image {
  responsiveImage(imgixParams: { w: 400, h: 400, fit: crop }) {
    ...responsiveImageFragment
  }
}

Results in the images returned having their focal point set (again, some fields have been omitted for clarity):

aspectRatio: 1
height: 400
width: 400
sizes: "(max-width: 400px) 100vw, 400px"
src: "https://www.datocms-assets.com/[url].jpg?crop=focalpoint&fit=crop&fp-x=0.6&fp-y=0.31&h=400&w=400"

If possible, I would like the first query to return the same result as the second (aside from the different dimensions).

5

ok, looks like a bug to me, we’ll investigate and get back to you!

6

@hayden.osborne setting just the ar parameter has no effect on the output, see https://www.datocms-assets.com/205/1597757278-austin-distel-wd1lrb9oeeo-unsplash.jpg?ar=1:1 for example.

You need to set ar toghether with either w or h!

7

That is not the case, you can set ar without w or h. See imgix documentation.

However, you need to set fit=crop.

8

What is the current status of this issue? We’re running into this bug as well.

9

Hello @adam2 and welcome to the community!

As you said, adding fit=crop will also work, using Stefanos example, we can see that it crops the image for it to maintain the 1:1 aspect ratio: https://www.datocms-assets.com/205/1597757278-austin-distel-wd1lrb9oeeo-unsplash.jpg?ar=1:1&fit=crop

Do you have a specific image + imgix parameters that is not returning the expected image as the one i linked above?

10

Thanks for investigating!

I have a media asset on DatoCMS with a focal point configured.

Query using w and h:

query MyQuery {
  page {
    hero {
      image {
        responsiveImage(imgixParams: {fit: crop, w: 800, h: 600}) {
          src
        }
      }
    }
  }
}

The output responsiveImage.src is:

With aspect ratio:

query MyQuery {
  page {
    hero {
      image {
        responsiveImage(imgixParams: {fit: crop, ar: "4:3"}) {
          src
        }
      }
    }
  }
}

The returned responsiveImage.src is:

Expected result:

11

Thank you @adam2 ,

Indeed as you said, when using the width/height the focal point information is passed, but not with just the Aspect ratio.
I’ve contacted the development team about this and i’ll get back to you as soon as we have any updates.

1 Like
12

Hello once again @adam2

We just shipped a fix for this issue, if you re-try to the the request, you will see that now it will provide you with the URL with all of the right parameters, including the focal point.

Thank you once again for the feedback!