Crop doesn't respect the focus point

[maru3l]

Hi, I'm trying to use the crop filter with the Gatsby image but the focus I've made in Prismic is not the one given by the graphql request in Gatsby.

If I'm getting the picture with the Prismic URL https://images.prismic.io/hotel-griffintown/286cbbc2-6536-451b-9e5c-f45c3cf1d51f_GriffintownHotel-Confort-8.jpg?auto=compress,format&rect=0,1212,5000,1152&w=2560&h=590 the focus point and the crop is perfect, but the picture generated on the render get the center.

This is the exemple of the graphql query:

query MyQuery {
  prismic {
    apartment(uid: "confort", lang: "fr-ca") {
      featured_picture
      featured_pictureSharp(crop: "headerWide") {
        childImageSharp {
          fluid(maxHeight: 590, maxWidth: 2560) {
            src
          }
        }
      }
    }
  }
}

the result is :

{
  "data": {
    "prismic": {
      "apartment": {
        "featured_picture": {
          "dimensions": {
            "width": 5000,
            "height": 3335
          },
          "alt": null,
          "copyright": null,
          "url": "https://images.prismic.io/hotel-griffintown/286cbbc2-6536-451b-9e5c-f45c3cf1d51f_GriffintownHotel-Confort-8.jpg?auto=compress,format",
          "headerWide": {
            "dimensions": {
              "width": 2560,
              "height": 590
            },
            "alt": null,
            "copyright": null,
            "url": "https://images.prismic.io/hotel-griffintown/286cbbc2-6536-451b-9e5c-f45c3cf1d51f_GriffintownHotel-Confort-8.jpg?auto=compress,format&rect=0,1212,5000,1152&w=2560&h=590"
          },
          "homeCard": {
            "dimensions": {
              "width": 676,
              "height": 812
            },
            "alt": null,
            "copyright": null,
            "url": "https://images.prismic.io/hotel-griffintown/286cbbc2-6536-451b-9e5c-f45c3cf1d51f_GriffintownHotel-Confort-8.jpg?auto=compress,format&rect=599,0,2776,3335&w=676&h=812"
          },
          "apartmentPageCard": {
            "dimensions": {
              "width": 860,
              "height": 538
            },
            "alt": null,
            "copyright": null,
            "url": "https://images.prismic.io/hotel-griffintown/286cbbc2-6536-451b-9e5c-f45c3cf1d51f_GriffintownHotel-Confort-8.jpg?auto=compress,format&rect=0,103,5000,3128&w=860&h=538"
          }
        },
        "featured_pictureSharp": {
          "childImageSharp": {
            "fluid": {
              "src": "/static/123daaee2f19d0a2c13cde71212d5f5b/ad318/286cbbc2-6536-451b-9e5c-f45c3cf1d51f_GriffintownHotel-Confort-8.jpg"
            }
          }
        }
      }
    }
  },
  "extensions": {}
}

this is my config:

  System:
    OS: macOS 10.15.7
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.5 - ~/.nvm/versions/node/v12.18.2/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 88.0.4315.5
    Firefox: 82.0.2
    Safari: 14.0
  npmPackages:
    gatsby: ^2.25.3 => 2.25.3 
    gatsby-background-image: ^1.1.2 => 1.1.2 
    gatsby-image: ^2.4.21 => 2.4.21 
    gatsby-link: ^2.4.15 => 2.4.16 
    gatsby-plugin-favicon: ^3.1.5 => 3.1.6 
    gatsby-plugin-google-analytics: ^2.2.1 => 2.4.1 
    gatsby-plugin-google-tagmanager: ^2.3.4 => 2.4.1 
    gatsby-plugin-intl: ^0.3.3 => 0.3.3 
    gatsby-plugin-react-helmet: ^3.2.1 => 3.3.14 
    gatsby-plugin-react-svg: ^3.0.0 => 3.0.0 
    gatsby-plugin-resolve-src: ^2.0.0-beta.1 => 2.1.0 
    gatsby-plugin-sharp: ^2.7.1 => 2.7.1 
    gatsby-plugin-sitemap: ^2.5.1 => 2.5.1 
    gatsby-plugin-styled-components: ^3.3.14 => 3.3.14 
    gatsby-transformer-sharp: ^2.5.21 => 2.5.21 
    @prismicio/gatsby-source-prismic-graphql: ^3.6.13 => 3.6.13 

[maru3l]

I did a little research and found that the image with the crop isn't saved. I've logged all the download request made by the plugin and it's downloading every crop and sizes but only the full resolution is saved in the .cache folder. Could it be a naming conflict when it's saving the different image size and cropping?

[maru3l]

I think the issue #41 is related

[maru3l]

I found, the issue is when saving the picture with createRemoteFileNode, the URL params is removed with querystring.unescape(url).replace(/\?.*$/g, ''). I've found that it was added with the PR https://github.com/birkir/gatsby-source-prismic-graphql/pull/187.

On my side, I've removed the filter on the URL and everything is working as expected and the download time is faster.