Nitrogen Pumpkin Mulch

    gatsby-plugin-storyblok-image
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.13 • Public • Published

    gatsby-plugin-storyblok-image

    Using TypeScript Tested with Jest Coverage Status

    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.

    Install

    npm i gatsby-plugin-storyblok-image

    DownloadsWeekly Downloads

    751

    Version

    2.0.13

    License

    MIT

    Unpacked Size

    17.4 kB

    Total Files

    19

    Last publish

    Collaborators

    • nonjene