Prismic Previews Render Gatsby Images Differently

Developing with Prismic
1

Hi,

After much effort, I have my Gatsby App deployed on Netlify and almost working with Prismic Previews.
However, I have a feature built into my application that is being broken by the way Prismic Previews render gatsby images. For some reason, the rendered html of the Gatsby Image in the PrismicPreview is fundamentally different from that of a production build.

Notably, here is what the production gatsby-image dom structure looks like (simplified for clarity)

<div data-gatsby-image-wrapper class="gatsby-image-wrapper my-class">
    <div aria-hidden="true" style="padding-top: 177.778%;"></div>
    <picture>{<source> image data}</picture>
    <picture>{<source> displayed image data}</picture>
</div>

Here, the padding-bottom css styling is maintaining the aspect ratio of the image. Notably, I am using ArtDirection for this GatsbyImage. What I found, is that ArtDirection only supports images that have the same aspect ratio. So I developed a component that calculates the different aspect ratio's of each of my ArtDirectedImages, and applies styling to the aria-hidden

in order to update the padding-bottom to display the correct aspect ratio. Works great.

However, for reasons I don't fully understand, this is how the GatsbyImage is rendered when viewing the site in PrismicPreview mode:

<div data-gatsby-image-wrapper class="gatsby-image-wrapper gatsby-image-wrapper-constrained my-class">
    <div style="max-width: 1080px; display: block;"><img alt="" role="presentation" aria-hidden="true" src="data:image/svg+xml;... height='1920' width='1080'..." style="max-width: 100%; display: block; position: static;"></div>
    <div aria-hidden="true" data-placeholder-image="" style="opacity: 0; transition: opacity 500ms linear 0s; object-fit: cover;"></div>
    <picture>{<source> displayed image}</picture>
</div>

This completely breaks what I have going for the ArtDirectedImages, and makes it impossible for my client to properly preview image changes in this section.

I guess as a start, can someone help me understand why there is this divergence in the way the GatsbyImage component is rendered in Previews vs. not? Note that there is even an added class on the wrapper of gatsby-image-wrapper-constrained. Any help is much appreciated!

2

Hi Erik,

Thanks for sharing all of those details! I can provide some backing info on why you're seeing those HTML differences and some workarounds.

why there is this divergence in the way the GatsbyImage component is rendered in Previews vs. not

When not previewing, gatsbyImageData is generated by Gatsby's GraphQL server. With this, you are able to pass arguments to adjust the returned object, such as which kind of layout (CONSTRAINED, FULL_WIDTH, FIXED). This gives you full support of gatsby-plugin-image's features.

When in a preview session, gatsbyImageData is generated by gatsby-plugin-prismic-previews. This happens in the browser at runtime. As a result, it does not have access to GraphQL or any of your gatsbyImageData arguments. It can only simulate how the GraphQL server works. The plugin returns an object matching gatsby-plugin-image's defaults.

This means arguments like layout will not be previewable. Based on the HTML you shared, it looks like you are using the FIXED layout. In a preview, gatsbyImageData is using a CONSTRAINED layout (the default layout). This is why you see the constrained class on the image wrapper.

For full preview compatibility, I recommend using the CONSTRAINED layout for all images rather than FIXED. Depending on your site, this may require changes to your CSS. You effectively would be using CSS rather than gatsby-plugin-image to ensure your image is sized correctly.

Notably, I am using ArtDirection for this GatsbyImage. What I found, is that ArtDirection only supports images that have the same aspect ratio .

Are you using gatsby-plugin-image's withArtDirection helper?

Even when using withArtDirection, it only works with images of the same aspect ratio as you found. Gatsby provides suggestions on how you can fix this with CSS here: Gatsby Image plugin | Gatsby

I'm just sharing that link in case changing to CONSTRAINED requires changes to your current art direction setup. :)

Hopefully this helps. If you find you are unable to get previews working as expected, I recommend trying Gatsby Cloud's Preview feature (Netlify Deploy Previews - Share, Review, & Gather Feedback on Web Projects). It runs Gatsby's full build system in the cloud during previews, meaning all of your GraphQL queries will work the same during build time and previews.

You can learn more about setting up Gatsby Cloud and enabling previews here: https://prismic.io/docs/technologies/prismic-gatsby-cloud