Gatsby Remark Images Anywhere
Work in progress
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)
# 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. Comparing to gatsby-remark-images
, this plugin...
- doesn't render fancy lazy load image
- doesn't blur in or fade in image
but it...
- 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 & doesn't need lazy loading or blur-in image, try this one out!
-
If you don't need remote images or CMS, but want more flexibility, try this one out.
Installation
yarn add gatsby-remark-images-anywhere
# or
npm install gatsby-remark-images-anywhere
//gatsby-config.js
{
resolve: `gatsby-transformer-remark`,
options: {
plugins: [
`gatsby-remark-images-anywhere`
],
},
},
Requirement
Your projects need to have...
- gatsby(!)
- gatsby-source-filesystem
- gatsby-transformer-remark
- gatsby-transformer-sharp
- gatsby-plugin-sharp
Configuration
{
resolve: `gatsby-remark-images-anywhere`,
options: {
/**
* staticDir
* Root folder for images. For example,
* if your image path is `/assets/image.png`,
* your image is located in `static/assets/image.png`,
* then the staticDir is `static`.
*/
staticDir: 'static',
/**
* createMarkup
* A function that return string template for image
* All sharp result will be passed in as arguments
*/
createMarkup: ({ src, srcSet }) => `<img src=${src} srcSet=${srcSet} class="hey" />`
/**
* sharpMethod
* Either 'fluid', 'fixed' or 'resize'
*/
sharpMethod: 'fluid',
/**
* ...imageOptions
* and any sharp image arguments (quality, maxWidth, etc.)
*/
maxWidth: 650,
quality: 50,
}
}