Gatsby Remark Images Anywhere

Get image from anywhere in your markdown:

---
title: Hello World
---

# Regular relative path
![relative path](./image.png)

# NetlifyCMS path
![relative from root path](/assets/image.png)

# Remote path
![cloud image](https://images.unsplash.com/photo-1563377176922-062e6ae09ceb)

# Protocol relative path*
![cloud image](//images.ctfassets.net/1311eqff/image.png)

# Any of the above also works with <img />
<img src="./image.png" alt="hey" title="hello" />

Why

gatsby-remark-images is awesome. But if you use a CMS that paste remote url, or path that's not relative to the markdown file itself, it won't work. Originally this plugin was meant to find a way to feed remote images to gatsby-remark-images, but that didn't work out. This is a simpler & more flexible image plugin supports.

• doesn't blur in or fade in image
• doesn't render fancy lazy load image update: it now does via the loading html attribute.
• will take any image paths as mentioned above & feed them to sharp
• allow you to pass in more customized sharp methods (fix, fluid, resize)
• allow you to write your own image template (so you can implement the stuff above by yourself, though I do want to support those by default)

Should I use this?

• If you don't use remote images or CMS, just use gatsby-remark-images

• If you're using vanilla NetlifyCMS, just use gatsby-remark-relative-images.

• If you need remote image, try this one out!

• If you don't need remote images or CMS, but want more flexibility, try this one out.

Protocol relative path

See the whitelisted list here

Installation

1yarn add gatsby-remark-images-anywhere
2# or
3npm install gatsby-remark-images-anywhere

1//gatsby-config.js
2{
3  resolve: `gatsby-transformer-remark`,
4  options: {
5    plugins: [
6      `gatsby-remark-images-anywhere`
7    ],
8  },
9},
10

Requirement

Your projects need to have...

• gatsby(!)
• gatsby-source-filesystem
• gatsby-transformer-remark
• gatsby-transformer-sharp
• gatsby-plugin-sharp

Configuration

1{
2  resolve: `gatsby-remark-images-anywhere`,
3  options: {
4    /**
5     * @param {string} staticDir
6     * Root folder for images. For example,
7     * if your image path is `/assets/image.png`,
8     * your image is located in `static/assets/image.png`,
9     * then the staticDir is `static`.
10     * You can also point it to whichever else folder you have locally.
11     */
12    staticDir: 'static',
13
14    /**
15     * @param {Function} createMarkup
16     * A function that return string template for image
17     * All sharp result will be passed in as arguments
18     */
19    createMarkup: ({ src, srcSet }) => `<img src="${src}" srcSet="${srcSet}" class="hey" />`,
20
21    /**
22     * @param {'lazy' | 'eager' | 'auto'} loading 
23     * Set the output markup's 'loading' attribute. Default: 'lazy'
24     */
25    loading: 'lazy',
26
27    /**
28     * @param {string} backgroundColor
29     * Background color. Default: '#fff'
30     */
31    backgroundColor: '#fff',
32
33    /**
34     * @param {boolean} linkImagesToOriginal 
35     * If enabled, wraps the default markup with an <a> tag pointing to the original image.
36     * Default: false
37     */
38    linkImagesToOriginal: true,
39
40    /**
41     * @param {string | Function} wrapperStyle 
42     * Inject styles to the image wrapper.
43     * Also accept a function that receives all image data as arguments, i.e
44     * ({ aspectRatio, width, height }) => `padding-bottom: ${height/2}px;`
45     * Alternatively you can also attach additional class to `.gria-image-wrapper`
46     */
47    wrapperStyle: 'padding-bottom: 0.5rem;',
48
49    /**
50     * @param {'fluid' | 'fixed' | 'resize'} sharpMethod
51     * Default: 'fluid'.
52     */
53    sharpMethod: 'fluid',
54
55    /**
56     * ...imageOptions
57     * and any sharp image arguments (quality, maxWidth, etc.)
58     */
59    maxWidth: 650,
60    quality: 50,
61  }
62}

Writing your own markup

Here's the createMarkup signature:

1type CreateMarkup = (args: CreateMarkupArgs, options?: MarkupOptions) => string;
2
3interface CreateMarkupArgs {
4  sharpMethod: SharpMethod;
5  originSrc: string;
6  title?: string;
7  alt?: string;
8
9  aspectRatio: number;
10  src: string;
11  srcSet?: string;
12  srcWebp?: string;
13  srcSetWebp?: string;
14  base64?: string;
15  tracedSVG?: string;
16  
17  // fixed, resize
18  width?: number;
19  height?: number;
20
21  // fluid
22  presentationHeight?: number;
23  presentationWidth?: number;
24  sizes?: string;
25  originalImg?: string;
26}
27
28interface MarkupOptions {
29  loading: 'lazy' | 'eager' | 'auto';
30  linkImagesToOriginal: boolean;
31  showCaptions: boolean;
32  wrapperStyle: string | Function;
33  backgroundColor: string;
34  tracedSVG: boolean | Object;
35  blurUp: boolean;
36}

Example usage

• Codesandbox demo of using this plugin in combination with gatsby-transformer-remark custom component to achieve gatsby-image-like benefits (blur up, lazy loading, aspect-ratio).