search

datocms / gatsby-source-datocms

Official GatsbyJS source plugin to pull content from DatoCMS
MIT License
140 stars 51 forks source link

Image height constraint is ignored when cropping (using gatsby-plugin-image) #151

Closed Hless closed 3 years ago

Hless commented 3 years ago

I'm using gatsby-source-datocms in combination with gatsby-plugin-image, but I can't get cropping to work as expected.

I'm using the following query to get a source set of images with my prefered width/height:

   ...
    myImage {
          gatsbyImageData(width: 160, height: 152, layout: FIXED, imgixParams:{
            fit: "crop"
            crop: "focalpoint"
          })
     }

The resulting srcSet that is generated looks like this (urls obfuscated):

https://www.datocms-assets.com/x/y.png?auto=format&crop=focalpoint&dpr=0.33&fit=crop&w=486 160w,
https://www.datocms-assets.com/x/y.png?auto=format&crop=focalpoint&dpr=0.66&fit=crop&w=486 320w

If I understand correctly the gatsby image parameters get converted automatically to imgix params, however since I'm requesting a FIXED layout should it not also add h to the imgix query?

Relevant package versions:

"gatsby": "3.1.2",
"gatsby-plugin-image": "1.1.2",
"gatsby-source-datocms": "2.6.6",
Hless commented 3 years ago

Quick update for anyone else experiencing a similar issue, I found a workaround using the aspect ratio parameter:

gatsbyImageData(
    width: 160
    height: 152
    layout: FIXED
    imgixParams: {ar: "160:152", fit: "crop", crop: "focalpoint"}
)

Edit: Focalpoint parameters are not getting created by the dato plugin either it seems (my asset does have a focalpoint), so I'm still figuring that out

stefanoverna commented 3 years ago

Hi @Hless, please try version 2.6.7, the following should work (also with focal points)

gatsbyImageData(
    width: 160
    height: 152
    layout: FIXED
)
Hless commented 3 years ago

@stefanoverna Whoa that was fast 🎉 . While with version 2.6.7 the focalpoint parameters do work, it seems to ignore the outputPixelDensities parameter specified by gatby-plugin-image (default is [0.5, 1, 2] for CONSTRAINED and [1, 2] for FIXED). Basically the 2.6.7 update is effectively breaking retina support across my whole website, because constrained images are also affected.

I verified that densities were still working on 2.6.6, should I open a new ticket?

stefanoverna commented 3 years ago

You're right, 2.6.8 should do the trick!

Hless commented 3 years ago

@stefanoverna Yes, can verify that the pixel densities are working correctly in 2.6.8, and automatically adding 'ar' to the query is a nice addition.

It just does not seem to work in conjuction with focal points, is this a limitation of the library, or an oversight? Right now I'm not getting focal point information added to the query in any way. I have resorted to using a combination of 'face,edges' for now (which is fine for my use case). But it would be great to have focalpoints working gatsby image

stefanoverna commented 3 years ago

Damn it, you're right again :D

73a12d61744cf6 solves the final issue with focal points, released as 2.6.9!

Thanks for reporting!

Hless commented 3 years ago

Awesome! It's working beautifully now 👍