πŸ‘€ See Sanity in action: Watch product demo now β†’

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.io – build remarkable experiences at scale

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

Related topics

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
How to deploy Gatsby sites using official Sanity starter templates25Nov 30, 2020
How to generate RSS.xml files from Sanity posts with gatsby-plugin-feed6Jan 12, 2021
How to make Algolia work with Gatsby & Sanity8Jan 7, 2021
How to improve image loading with Gatsby and gatsby-plugin-sanity-image?10Nov 27, 2020
Set up Draft Previews with Gatsby Cloud Hosting4Aug 26, 2020
Is it possible to use gatsby-image to render images loaded in Portable Text / Rich Text?8Jan 1, 2021

Related contributions

Occo
- Made with Sanity

Complex product offering with nested product structure and tiered pricing.

Kevin Green
Go to Occo

Figma Config
- Made with Sanity

Website for Config, the global design conference by Figma.

Corey Ward
Go to Figma Config

The Agnes
- Made with Sanity

A high end rental real estate site built with Gatsby, Sanity and Shopify that pulls in listing data via API and includes a headless Shopify shop.

David Gross
Go to The Agnes