Almost EVERYONE who tried headless systems said they saw benefits. Download the state of CMS now!

Storyblok now on AWS Marketplace: Read more

O’Reilly Report: Decoupled Applications and Composable Web Architectures - Download Now

Empower your teams & get a 582% ROI: See Storyblok's CMS in action

Skip to main content

Using Gatsby Image in Storyblok

Try Storyblok

Storyblok is the first headless CMS that works for developers & marketers alike.

INFO:

On May 13th, 2024, Storyblok started gradually rolling out a new design for its Visual Editor. Therefore, the Visual Editor product screenshots depicted in this resource may not match what you encounter in the Storyblok App. For more information and a detailed reference, please consult this FAQ on the new Visual Editor design.

Section titled Using Gatsby Image in Storyblok Using Gatsby Image in Storyblok

Using the new gatsby-plugin-image through GraphQL is supported by the gatsby-source-storyblok plugin. If you are interested in adding Gatsby Image support outside of GraphQL, we recommend looking at the community plugin gatsby-storyblok-image.

To use it, we need to declare the plugin use and its options in gatsby-node.js file. To enable gatsby-plugin-image, make sure to set the localAssets option to true.

gatsby-config.js
        
      module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-storyblok',
      options: {
        accessToken: 'YOUR_TOKEN',
        version: 'draft',
        localAssets: true, // Optional parameter to download the images to use with Gatsby Image Plugin
        languages: ['de', 'at'] // Optional parameter. Omission will retrieve all languages by default.
      }
    }
  ]
}
    

Gatsby provides two ways to display responsive images. You can choose between StaticImage component and GatsbyImage component to display images depending on the image types you would like to display. StaticImage component is used for static images, while GatsbyImage is used for dynamic images.

HINT:

If you’re in a hurry, You can look at our example usage from gatsby-source-storyblok README.

We have seen how StaticImage component is used in Gatsby’s default starter. Thus, let’s take a look at GatsbyImage to display dynamic images.

First, import GatsbyImage component and getImage function from gatsby-plugin-image.

HINT:

GatsbyImage component accepts all props (shared props) that can be passed to both GatsbyImage and StaticImage. If you would like to take a look at more shared props options, here is Gatsby’s documentation.

getImage is a helper function that is provided from Gatsby's side. It will get a gatsbyImageData object. gatsbyImageData is a resolver to return image data objects.

Then, we use gatsbyImageSharp with gatsbyImageData and eq filter to filter by image file names. This time, we have an image, “image-1.jpg” uploaded at Storyblok Assets.

src/index.js
        
      import * as React from "react"

import { graphql } from "gatsby"
import { GatsbyImage, getImage } from "gatsby-plugin-image"
import { useStoryblokState, storyblokEditable, StoryblokComponent } from "gatsby-source-storyblok"

import Layout from "../components/layout"
import Seo from "../components/seo"

const IndexPage = ({ data, location }) => {
  let story = data.storyblokEntry
  story = useStoryblokState(story, location)

  const components = story.content.body.map(blok => {
    return (<StoryblokComponent blok={blok} key={blok._uid} />)
  })

  const image = getImage(data.image1)

  return (
    <Layout>
      <div {...storyblokEditable(story.content)}>
        <Seo title="Home" />
        <h1>{story.content.title}</h1>
        {components}
        <GatsbyImage image={image} />
      </div>
    </Layout>
  )
}

export default IndexPage

export const query = graphql`
  query HomeQuery {
    storyblokEntry(full_slug: {eq: "home"}) {
      content
      name
    },
    image1: file(name: {eq: "image-1"}) {
      name
      absolutePath
      childImageSharp {
        gatsbyImageData(
          width: 500
          placeholder: BLURRED
          formats: [AUTO, WEBP, AVIF]
        )
      }
    },
  }
`
    

Lastly, return GatsbyImage component. Remember that the GatsbyImage component requires an image prop to pass image data objects returned from the gatsbyImageData.

When we check the Visual Editor, image-1.jpg is displayed with a blurred effect from GatsbyImage.

Author

Patrick Odey

Patrick Odey

Patrick is a Software Engineer with a passion for web technologies, Cloud computing and community building. He is from Nigeria and works as a Developer Relations Engineer at Storyblok. He is also a skateboarder.