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).
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.