Using Gatsby Image in Storyblok
Storyblok is the first headless CMS that works for developers & marketers alike.
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.
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.
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.
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.
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.
| 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 |
Author
