gatsby-rehype-inline-images

Downloads remote inline images and processes them with the Gatsby image tool chain. This plugin is part of the rehype collection and intended to be used with gatsby-transformer-rehype.

Install

yarn add gatsby-transformer-rehype gatsby-rehype-inline-images

How to use

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-rehype`,
    options: {
        filter: node => (
            // this is an example (any node type can be selected)
            node.internal.type === `GhostPost`
        ),
        plugins: [
            {
                resolve: `gatsby-rehype-inline-images`,
                // all options are optional and can be omitted
                options: {
                    // all images larger are scaled down to maxWidth (default: maxWidth = imageWidth)
                    // maxWidth: 2000,
                    withWebp: true,
                    // disable, if you need to save memory
                    useImageCache: true,
                }
            },
        ],
    },
  },
]

Details

This plugin walks the htmlAst syntax tree and extracts all img tags. For each image found, the remote image data is fetched and put into a new file node. If the image format is supported by gatsby-plugin-sharp, the image is transformed into a fluid image. The fluid image is attached to the htmlAst coming from gatsby-transformer-rehype and the img tag is replaced by img-sharp-inline. That way, transformed images can be easily detected later and picked up by React components.

Unsupported image formats are directly copied to the /static folder and the image src attribute is updated to the new local image location. Both the file node and the processed images are cached in order to speed up build times on subsequent runs.

How to query

As this plugin mutates the htmlAst all changes are included in this syntax tree and in the transformed html:

{
  allGhostPost {
    edges {
      node {
        childHtmlRehype {
          htmlAst
          html
        }
      }
    }
  }
}

Image tag img-sharp-inline properties

An image that is transformed gets additional properties:

<img-sharp-inline parentClassName="" className="" fluidImg="" alt="" />

where

• parentClassName: class attribute from parent plus fluid-image
• className: class attribute from replaced img
• fluidImg: fluid image object as string (use JSON.parse(fluidImg) to transform back to object)
• alt: alternative image title

These properties give you the needed flexibility in your React components.

Use in React components

Instead of using the html it is highly recommended start from the htmlAst and compile it directly into a React component:

import React from 'react'
import rehypeReact from 'rehype-react'
import { ImgSharpInline } from '.'

const renderAst = new rehypeReact({
    Fragment: React.Fragment,
    createElement: React.createElement,
    components: { "img-sharp-inline": ImgSharpInline },
}).Compiler

const RenderContent = ({ htmlAst }) => (
    <div>
        { renderAst(htmlAst) }
    </div>
)

export default RenderContent

A minimal ImgSharpInline component may look like:

import React from 'react'
import Img from 'gatsby-image'

const ImgSharpInline = ({ parentClassName, className, fluidImg, alt }) => (
    <Img
        className={className}
        fluid={fluidImg && JSON.parse(fluidImg)}
        alt={alt}
    />
)

export default ImgSharpInline

This will make your inline images fully responsive and plays nicely with all gatsby-image features such as the blur effect.

Troubleshooting

Please always clear the cache with yarn clean before reporting a bug to this project.

Copyright & License

Copyright (c) 2020 styxlab - Released under the MIT license.