Imgix Params + Gatsby Plugin Image functionality

🆘 Support
1

We’re currently moving our Dato-based site from gatsby-source-graphql to gatsby-source-datocms. Most of the process has been seamless (though a bit tedious), though we’ve encountered an issue with Imgix parameter use with Gatsby Image / the gatsbyImageData field - specifically with the “fit” argument when it is equal to ‘crop’.

Consider the following query:

photo {
    gatsbyImageData(
        imgixParams: {
            auto: "format",
            ar: "43:33",
            fit: "crop",
            q: 100,
            w: "600",
            crop: "focalpoint",
            fpX: 0.5,
            fpY: 0.5
        })
    url
}

The source plugin marks any gatsbyImageData query which specifies the ‘fit’ parameter in its arguments as receiving an Invalid Response, and no image is generated. Removing the ‘fit’ argument restores the image (however now wrongly sized).

Consider also the following:

photo {
    gatsbyImageData(imgixParams: {
        ar: "1", w: "600", facepad: 3.5, fit: "facearea",  auto: "format", q: 100
    })
    url
}

This works, still using the ‘fit’ argument, but set to ‘facearea’. It generates the image and outputs it as expected with the correct size and transformation.

Is this potentially a bug in the plugin, or an undocumented change in the way it works? It seems strange that running the same Imgix arguments as we were previously, which worked as intended (with gatsby-source-graphql) generates an invalid response in the official plugin.

Appreciate any guidance possible.

2

@brainbits I believe you also have to set the h along with the w, if you want to use fit=crop. From their docs: Resize Fit Mode | Size Parameters | Rendering API Documentation

Could you please try that and see if it helps?

Alternatively, perhaps fit=clip might work if you don’t want to manually specify the height?