Hi @online,
Hmm… I’m noticing some strange behavior here and I’m not sure if it’s a bug. I’ll check with the devs on that. I’ll explain what the possible bug is in a sec.
But first, just in case it wasn’t clear, the focal point is actually a separate parameter you have to retrieve with the CDA and then add to the Imgix URL query. Imgix is a CDN that doesn’t modify the original source images, so we don’t have a way to “save” that focal point information to the file permanently.
Their other documentation is clearer about this: https://docs.imgix.com/en-US/getting-started/tutorials/cropping-and-enhancement/focal-point-cropping (emphasis added)
Using the focal point parameters, we can adjust his position vertically. First we set the focal point, using the fp-debug parameter to show the coordinates and adjust until he is vertically at the center
The fp-debug parameter is meant to help you see what your fp-x and fp-y values are pointing to as you adjust them. The image itself doesn’t contain those values. Imgix itself only takes the x and y values from the URL parameters; the “click to set focal point” feature is a separate feature we added to DatoCMS.
In our system, that focal point data lives in a separate metadata layer that we store alongside your image (like with its title, caption, extra info, etc.) Then we send that to Imgix, in the form of URL params, on an as-needed basis. You can always explicitly ask for the raw focal point values from us by asking the GraphQL CDA for the focalPoint property of the asset, like this:
query MyQuery {
upload(filter: {id: {eq: "YOUR_IMAGE_ID"}}) {
responsiveImage(imgixParams: {fpDebug: "true"}) {
src
}
focalPoint {
x
y
}
}
}
The resulting response will include:
"focalPoint": {
"x": 0.6,
"y": 0.24
}
Which you can then append to the Imgix URL, like https://www.datocms-assets.com/29954/1602837432-kvinde-der-gar-ved-siden-af-bil.jpg?fit=crop&fp-debug=true&fp-x=0.6&fp-y=0.24
So far so good, I hope?
What’s strange is that we actually automatically add the fp-x and fp-y params for you, but only if you explicitly provide an image width and height and force fit=crop:
But I don’t see why that should be necessary, since https://www.datocms-assets.com/29954/1602837432-kvinde-der-gar-ved-siden-af-bil.jpg?fp-debug=true&fp-x=0.6&fp-y=0.24 works fine even without the explicit w, h, and force=crop. So that part might be a bug, or it might just be an optimization we do (why send the focal point at all if we’re not doing any cropping). I’ll double-check with the devs for you.
In the meantime, you can either specify those additional parameters (w, h, and fit=crop) or just manually append the x and y values from the focalPoint GraphQL property. Sorry for the extra hassle!
I’ll let you know what the devs say.
