Netlify CMS custom preview not working with gatsbyjs

I cloned this gatsby netlify cms starter blog and am trying to add custom previews. I have followed all the instructions, but it is still not working. This is my config.yml:

backend:
  name: github
  repo: redline-gh/ibraheemca

media_folder: content/assets
public_folder: ../assets

collections:
  - name: "blog"
    label: "Blog"
    folder: "content/blog"
    create: true
    fields:
      - { name: path, label: Path }
      - { name: date, label: Date, widget: date }
      - { name: title, label: Title }
      - { name: description, label: Description }
      - { name: body, label: Body, widget: markdown }

I added the gatsby-plugin-netlify-cms like this:

plugins: [
    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },

In my cms.js, I have:

import CMS from 'netlify-cms-app'

import BlogPostPreview from './preview-templates/BlogPostPreview'

CMS.registerPreviewTemplate('blog', BlogPostPreview)

And my BlogPostPreview is just rendering the BlogPostTemplate:

import React from 'react'
import { BlogPostTemplate } from '../../templates/blog-post'

const BlogPostPreview = ({ entry, widgetFor }) => {

  return (
    <BlogPostTemplate
      body={widgetFor('body')}
      title={entry.getIn(['data', 'title'])}
      date={new Date()}
    />
  )
}

export default BlogPostPreview

Am I missing anything? I don’t think so. I compared my config with the official starter repo, and could not find any differences. When I go to the new blog post on the admin portal, I just see the default plain html. Any help would really be appreciated.

You can view my repo here

Hi @redline-gh, welcome to the community and sorry for the delayed response.

I can’t see the repo you linked so I’m assuming it is a private repo.
Also GitHub - thomaswangio/gatsby-personal-starter-blog: Gatsby starter for a personal site & blog doesn’t seem to have any custom previews.
The code looks ok, but missing the actual component BlogPostTemplate code so it’s hard to know how the preview should look like.

What are you expecting to see vs the actual preview?

A screenshot would help.

Thanks

Hi there, I’m having the same issue. I’m using Gatsby v3 together with Netlify CMS and have set up the preview templates in the same manner as described by @redline-gh . However, the preview is not using the registered templates properly.

You can find the source code in this repo.

May thanks for your help!

Ok, found the issue. I had to move gatsby-plugin-manifest before gatsby-plugin-netlify-cms in my gatsby-config.js. Preview templates now working as expected. See issue on github here.

1 Like

Thanks for reporting back @jimmybutton, that’s quite helpful for other users experiencing the same problem.

2 Likes