GraphQL Gatsby Plugin Image set max-width to size of original image

Question

I am using Google Photos to host photos for a website I am managing, and accessing them via GraphQL and Gastby (gatsby-image-plugin)

The images are shown in a gallery, but open up in a light-box gallery slider - I'm using FancyApps/ui (v4.x). Anyway the maximum size of the images are the maximum size of the source set (i.e. 512px). This means on a big screen the full screen image looks small (only 512px wide). You can see these values on the screen-grab below:

"original": {
  "width": 512,
  "height": 341
}

The original image is 1200px width, which is confirmed by the media metadata:

"mediaMetadata": {
  "height": "800",
  "width": "1200"
}"

Which is the same as images > sources > sizes: "sizes": "(min-width: 512px) 512px, 100vw"

I realise I can force the value by specifying gatsbyImageSharp to have a width of 1200.

{
  allGooglePhotosAlbum(filter: {title: {eq: "assorted"}}) {
    nodes {
      title
      photos {
        file {
          childImageSharp {
            id
            gatsbyImageData(placeholder: BLURRED, width: 1200)
            original {
              width
              height
            }
          }
        }
        mediaMetadata {
          height
          width
        }
      }
    }
  }
}

However some of the images are not 1200px wide (i.e. the portrait images), I get the following warning:

The requested width "1200px" for a resolutions field for the file URL_HERE was larger than the actual image width of 512px! If possible, replace the current image with a larger one.

I don't like the warning, but more importantly I think this might make the height of the image too large to be displayed properly (i.e. either would be cropped or larger than the screen height - 100vh).

Surely there, should be a way to set the largest image width/height to the heights provided by the media metadata (i.e. the full un-adulterated image).

Answer 1

Just incase anyone else has this issue, I have managed to figure it out. It turns out that it wasn't related to the graphQL query at all, but rather with the gatsby-source-google-photos plugin I was using.

The this plugin has the option to set the maxHeight and maxWidth - these values are both 512px by default. Which was why that was the maximum image width I was seeing in my query was 512px (when the original image was 1200px). See the documentation

All I needed to do was to change these values to 1200px in my gatsby-config.js file and I got the larger images.