Join us live Sept. 27 – How Sanity and Vercel powered Morning Brew's transformation –>

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: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Give your team exactly what they need to edit and publish their content with the customizable Sanity Studio. Get real-time collaboration out of the box. Sanity.io comes with a hosted datastore for JSON documents, query languages like GROQ and GraphQL, CDNs, on-demand asset transformations, presentation agnostic rich text, plugins, and much more.

Don't compromise on developer experience. Join thousands of developers and trusted companies and power your content with Sanity.io. Free to get started, pay-as-you-go on all plans.

Categorized in

Related topics

Get more help in the community Slack

Go to How to deploy Gatsby sites using official Sanity starter templatesGo to How to generate RSS.xml files from Sanity posts with gatsby-plugin-feedGo to How to make Algolia work with Gatsby & SanityGo to How to improve image loading with Gatsby and gatsby-plugin-sanity-image?Go to Set up Draft Previews with Gatsby Cloud HostingGo to Is it possible to use gatsby-image to render images loaded in Portable Text / Rich Text?
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