1.0.2 • Published 4 years ago

gatsby-remark-custom-image-component v1.0.2

Weekly downloads
10
License
MIT
Repository
github
Last release
4 years ago

gatsby-remark-custom-image-component

This gatsby-transformer-remark plugin allows you to link images in custom components in a similar fashion to gatsby-remark-image.

Install

npm install gatsby-remark-custom-image-component
yarn add gatsby-remark-custom-image-component

Usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-custom-image-component`,
            options: {
              // plugin options
              componentName: 'image-wrapper',
              imagePropName: 'src',
              sharpMethod: 'fluid',
              // fluid's arguments
              quality: 50,
              maxWidth: 800,
            }
          },
        ],
      },
    },

In your markdown:

# src/content/hello-word/index.md
---
title: Hello World
date: '2015-05-01T22:12:03.284Z'
---

<image-wrapper src='./hero.jpg'></image-wrapper>

In your custom component:

//src/components/ImageWrapper.js
import React from 'react'

// the result of sharp's image transformation will be passed directly to this component.
// so if you use `fluid` as `sharpMethod`, you'll get
// src, srcSet, base64, aspectRatio, srcSetType, sizes, density, originalImage. 
// Please refer to `gatsby-plugin-sharp` docs.
const ImageWrapper =  ({ src, srcSet }) => <img src={src} srcSet={srcSet} />

export { ImageWrapper }

In your template:

//src/templates/blog-post.js
import React from 'react'
import rehypeReact from 'rehype-react'
import { ImageWrapper } from '../components/ImageWrapper'

const renderAst = new rehypeReact({
  createElement: React.createElement,
  components: { 'image-wrapper': ImageWrapper }, // register our component
}).Compiler

const BlogPostTemplate = ({ data }) => {
  const post = this.props.data.markdownRemark
  return <div>{ renderAst(post.htmlAst) }</div>
}

export default BlogPostTemplate

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      htmlAst
    }
  }
`

Options

NameValueNote
componentNamestring, default 'image-wrapper'Custom component name, use in markdown
imagePropNamestring, default 'src'
sharpMethodstring, default 'fluid'Sharp method, one of 'resize', 'fluid' or 'fixed'

You can also pass in any of the selected sharp method's arguments. Reference here.