Using Gatsby Image in Storyblok

Contents
    Try Storyblok

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

    Hint:

    Please note that this article has already been updated to match Storyblok V2. If you haven’t already started using it, you can find out how to make the switch here.

    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.

    app.storyblok.com
    Storyblok editing capabilities
    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.

    app.storyblok.com
    Storyblok editing capabilities
    Resource Link
    Github Repository https://github.com/storyblok/gatsby-storyblok-boilerplate
    Gatsby Source Storyblok Plugin https://github.com/storyblok/gatsby-source-storyblok
    Storyblok Bridge Documentation https://www.storyblok.com/docs/Guides/storyblok-latest-js
    Gatsby Using GraphiQL Tutorial https://www.gatsbyjs.com/docs/tutorial/part-five/#using-the-graphiql-explorer
    Gatsby Refresh Content Docs https://www.gatsbyjs.com/docs/refreshing-content/
    Gatsby Page Generation with File System Route API https://www.gatsbyjs.com/docs/tutorial/part-seven/
    Gatsby Image Documentation https://www.gatsbyjs.com/docs/tutorial/part-seven/
    Gatsby Deployment Tutorial https://www.gatsbyjs.com/docs/how-to/previews-deploys-hosting/
    Storyblok Webhooks Storyblok Webhooks
    Gatsby Cloud & Storyblok Deployment tutorial Storyblok Webhooks