gatsby-plugin-storyblok-image

gatsby-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.