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

Install

You can install this plugin with either yarn or npm:

yarn add gridsome-plugin-netlify-cms-paths

How to use

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

  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 is installed and configured and that you are defining your content types with @gridsome/source-filesystem.

Options

contentTypes

The list of content types you want to be considered when fixing paths. For example if you are using @gridsome/source-filesystem to create a Post content type:

  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 options.

  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
      }
    }