Community Plugin
View plugin on GitHubgatsby-plugin-storyblok-image
gatsby-plugin-storyblok-image let you use gatsby-plugin-image with Storyblok service v2.
This is helpful when your images are dynamically in content.
Let you take advantage of optimizing any images inside dynamic content (run-time optimizing), gets out of build-time complex processing of download -> markup each source -> static query for each component.
Plugin write with Typescript. Options design to be gatsby-plugin-image liked.
Install
npm i gatsby-plugin-storyblok-image
or
yarn add gatsby-plugin-storyblok-image
Usage
import { GatsbyImage } from 'gatsby-plugin-image'
import { getGatsbyImageProps } from 'gatsby-plugin-storyblok-image'
export default function Image({ image }) {
const gatsbyImageData = getGatsbyImageProps(image, {
// layout can be 'fixed' | 'constrained' | 'fullWidth'
// see more: https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#layout
layout: 'fixed',
// Use width & height when layout is 'fixed' or 'constrained'
// No need when layout is 'fullWidth'
width: 900,
height: 900,
// Optional:
// quality: 100,
// outputPixelDensities: [1, 2, 3], // For fixed or constrained
// breakpoints [750, 1080, 1366, 1920], // For fullWidth or constrained
// backgroundColor: '#fff', // Just pass to gatsby-plugin-image image prop
/** Storyblok image service additional options: */
// `fitIn` set `true` to make the image like fixed object to "contain". Refer to https://www.storyblok.com/docs/image-service#fit-in
// fitIn: true, // Default false (act like "cover")
// fitInColor: '#fff', // Color to fill when fitIn true. Default is transparent. okay to add `#` prefix.
// smartCrop: true, // Default true
// fallback: true, // Set false to disable fallback image. Default true
// fallbackQuality: 70, // Default 70
})
return (
<GatsbyImage {...gatsbyImageData} />
)
}
Credits
This plugin is the alternate of gatsby-storyblok-image, which is inspired by Sanity’s way of implementing gatsby-image outside of GraphQL in their gatsby-source-sanity plugin.