How to display Sanity images in Gatsby-powered photography sites

11 replies
Last updated: Jun 16, 2020
I'm looking for the best practice to render images from sanity. I want the best quality possible because it's for a photography/cinematography website. For now, I have a document 'page' with an array field of different object types to make flexible landing pages. So to source images fields in these objects, I query _rawContent in my page template. But then I can't use GatsbyImageSharpFixed_withWebp what I normally use... 🤔
Are there options? With functions or something?
Jun 16, 2020, 5:40 PM
Yess! The gatsby-source-sanity has a nifty plugin:
Jun 16, 2020, 5:46 PM
import {getFluidGatsbyImage, getFixedGatsbyImage} from 'gatsby-source-sanity'
Jun 16, 2020, 5:46 PM
Jun 16, 2020, 5:47 PM
But can I use this when i query my data with resoleReferences?
Jun 16, 2020, 9:30 PM
_rawContent(resolveReferences: { maxDepth: 10 })*
Jun 16, 2020, 9:30 PM
Yup. You just need the image asset id which is returned when you query that raw data
Jun 16, 2020, 9:31 PM
But can I use this when i query my data with resoleReferences?
Jun 16, 2020, 9:30 PM
_rawContent(resolveReferences: { maxDepth: 10 })*
Jun 16, 2020, 9:30 PM
Oh ok, so then I don't need GatsbySanityImageFluid_withWebp at all?
Jun 16, 2020, 9:37 PM
I don't understand the difference between gastbyImageFluid and gastbuSanityImageFluid
Jun 16, 2020, 9:40 PM
Now, it's clear! fantastic I was thinking to get my first painpoint but no, still amazed about this technology (speaking drupal developer)
Jun 16, 2020, 9:50 PM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?