Netlify-cms: Cannot render custom preview template for file collection

Created on 17 Aug 2018  路  1Comment  路  Source: netlify/netlify-cms

Describe the bug
Adding a custom preview template for a file collection does not override the default template. The default template is still shown, no errors in the console. Note: I tried the same template for a folder collection and it is successful there.

To Reproduce
Steps to reproduce the behavior:

  1. Create a file collection
  2. Add template code:
const PagePreview = createClass({
      render: function () {
        return h('div', {},
          h('h1', {}, "test"),
        );
      }
    });

CMS.registerPreviewTemplate("pages", PagePreview);

Expected behavior
The preview for a file within the collection to render the h1 element with the text of test.

Screenshots

Applicable Versions:

  • Netlify CMS version: ^2.0.0
  • Git provider: Github
  • OS: OSX 10.13
  • Browser version: latest Chrome
  • Node.JS version: 8.11.1

CMS configuration
A sample of the Pages file collection

collections:
  - label: Pages
    name: pages
    files:
      - label: "Home Page"
        name: home
        file: src/data/pages/home.yml
        path: /
        fields:
          - label: Hero
            name: hero
            widget: object
            fields:
              - label: Title
                name: title
                widget: string
              - label: "Subtitle"
                name: subtitle
                widget: text
              - label: "Call to Action Link"
                name: link
                widget: string

Additional context

Most helpful comment

I figured out the problem. The first input into CMS.registerPreviewTemplate needs to match the file name property. So, for file collections, templates are registered by file, not by collection. Which I like the ability to target individual files within a collection.

I think the docs are misleading in this setup. It mentions that the first input should be:

collection: The name of the collection which this preview component will be used for.

For folder collections, this is true. But for file collections it is the name, or looking through the code it is what the slug ends up being for the file entry.

If what I'm doing is correct, I can make a PR for the docs.

>All comments

I figured out the problem. The first input into CMS.registerPreviewTemplate needs to match the file name property. So, for file collections, templates are registered by file, not by collection. Which I like the ability to target individual files within a collection.

I think the docs are misleading in this setup. It mentions that the first input should be:

collection: The name of the collection which this preview component will be used for.

For folder collections, this is true. But for file collections it is the name, or looking through the code it is what the slug ends up being for the file entry.

If what I'm doing is correct, I can make a PR for the docs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

mikecrittenden picture mikecrittenden  路  3Comments

chriskirknielsen picture chriskirknielsen  路  3Comments

bkroggel picture bkroggel  路  3Comments

zebapy picture zebapy  路  3Comments

ciokan picture ciokan  路  3Comments