https://github.com/tyrion/gridsome-plugin-netlify-cms-paths

Fix markdown image paths to work with Netlify CMS
https://github.com/tyrion/gridsome-plugin-netlify-cms-paths

gridsome gridsome-plugin netlify-cms

Last synced: 6 months ago
JSON representation

Fix markdown image paths to work with Netlify CMS

• Host: GitHub
• URL: https://github.com/tyrion/gridsome-plugin-netlify-cms-paths
• Owner: tyrion
• Created: 2019-07-10T19:21:58.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2021-08-24T12:18:21.000Z (almost 5 years ago)
• Last Synced: 2025-09-21T07:55:54.971Z (10 months ago)
• Topics: gridsome, gridsome-plugin, netlify-cms
• Language: JavaScript
• Homepage:
• Size: 5.86 KB
• Stars: 10
• Watchers: 2
• Forks: 5
• Open Issues: 7
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# gridsome-plugin-netlify-cms-paths

This plugin will fix image paths generated by Netlify CMS (i.e. absolute paths

starting with `public_folder` and relative paths not starting with `./`) to

work with Gridsome.

For a more general introduction see:

    [https://germano.dev/fix-netlify-cms-paths-on-gridsome][post]

[post]: https://germano.dev/fix-netlify-cms-paths-on-gridsome

## Install

You can install this plugin with either yarn or npm:

```shell

yarn add gridsome-plugin-netlify-cms-paths

```

## How to use

To use this plugin, simply add it to your `gridsome.config.js`:

```javascript

  plugins: [

    // configure Netlify CMS

    { use: 'gridsome-plugin-netlify-cms' },

    // fix paths

    { use: 'gridsome-plugin-netlify-cms-paths' }

  ]

```

Note that this plugin requires `gridsome-plugin-netlify-cms` to be installed

and be configured before itself.

Currently this plugin also assumes that [@gridsome/transformer-remark][remark]

is installed and configured and that you are defining your content types

with [@gridsome/source-filesystem][fs].

[remark]: https://gridsome.org/plugins/@gridsome/transformer-remark

## Options

### `contentTypes`

The list of content types you want to be considered when fixing paths.

For example if you are using [@gridsome/source-filesystem][fs] to create a

`Post` content type:

```javascript

  plugins: [

    {

      // Create posts from markdown files

      use: '@gridsome/source-filesystem',

      options: {

        typeName: 'Post',

        path: 'content/posts/*.md',

        route: '/:slug',

      }

    },

    { use: 'gridsome-plugin-netlify-cms' },

    {

      use: 'gridsome-plugin-netlify-cms-paths',

      options: {

        contentTypes: ['Post'] // Same as declared above

      }

    }

```

### `coverField`

(*optional*, default: `undefined`)

Instruct the plugin to also fix the path of the *cover image* found in the

frontmatter field specified by this option.

You can also specify this option for each content type by defining it into

the [@gridsome/source-filesystem][fs] options.

```javascript

  plugins: [

    {

      // Create posts from markdown files

      use: '@gridsome/source-filesystem',

      options: {

        typeName: 'Post',

        path: 'content/posts/*.md',

        route: '/:slug',

        coverField: 'post_cover' // Specific for Post, overrides global

      }

    },

    { use: 'gridsome-plugin-netlify-cms' },

    {

      use: 'gridsome-plugin-netlify-cms-paths',

      options: {

        contentTypes: ['Post']

        coverField: 'cover_image' // Global definition

      }

    }

```

[fs]: https://gridsome.org/plugins/@gridsome/source-filesystem