Using Gatsby Image in Storyblok
Storyblok is the first headless CMS that works for developers & marketers alike.
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 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.
![](https://a.storyblok.com/f/88751/2864x1680/4106e2f93a/add-assets.png/m/840x0/filters:quality(90))
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
.
![](https://a.storyblok.com/f/88751/2864x1680/4292edf7bd/gatsbyimage.png/m/840x0/filters:quality(90))
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 |