🍪 Cookie Notice

We use cookies to learn how you interact with our content, and show you relevant content and ads based on your browsing history. You can adjust your settings below. Here's our policy.

Cookie settings
Skip to main content

Using Gatsby Image in Storyblok

Try for Free

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

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.

ResourceLink
Github Repositoryhttps://github.com/storyblok/gatsby-storyblok-boilerplate
Gatsby Source Storyblok Pluginhttps://github.com/storyblok/gatsby-source-storyblok
Storyblok Bridge Documentationhttps://www.storyblok.com/docs/Guides/storyblok-latest-js
Gatsby Using GraphiQL Tutorialhttps://www.gatsbyjs.com/docs/tutorial/part-five/#using-the-graphiql-explorer
Gatsby Refresh Content Docshttps://www.gatsbyjs.com/docs/refreshing-content/
Gatsby Page Generation with File System Route APIhttps://www.gatsbyjs.com/docs/tutorial/part-seven/
Gatsby Image Documentationhttps://www.gatsbyjs.com/docs/tutorial/part-seven/
Gatsby Deployment Tutorialhttps://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/
Storyblok WebhooksStoryblok Webhooks
Gatsby Cloud & Storyblok Deployment tutorialStoryblok Webhooks