Add widget without it showing up in Netlify CMS preview

Question

Is there a backend widget type which allows the user to enter a text value, in the editor but not displayed in the preview to the right?

I have this configuration from the example out of the box:

- label: "Blog"
  name: "blog"
  folder: "_posts/blog"
  create: true
  fields:
    - {label: "Title", name: "title", widget: "string"}
    - {label: "Publish Date", name: "date", widget: "datetime"}
    - {label: "Featured Image", name: "thumbnail", widget: "image"}
    - {label: "Body", name: "body", widget: "markdown"}

I do not want the publish date to show up in the preview.

score 3 · Accepted Answer · answered Dec 13 '17 at 18:19

Netlify CMS allows for the preview to be custom and include or exclude anything you would like in the preview. Mimic your page layout and use the style sheet from your build to give a WYSIWYG layout.

Click here for Custom Preview Template docs

You might have something like the following in your index.html in the CMS folder

<script>
var PostPreview = createClass({
  render: function() {
    var entry = this.props.entry;
    var image = entry.getIn(['data', 'thumbnail']);
    var imageContainer = (image) ? h('section', {className: "mdc-card__media", style: {backgroundImage: `url(${image})`, height: '20rem'}},) : h('div');
    return h('div', {},
      h('div', { className: "blog-post" },
        imageContainer,
        h('div', { },
          h('h1', { }, 
            h('span', { }, entry.getIn(['data', 'title']))
          ),
        ),
        h('div', {className: "post-body"},
          h('div', { }, this.props.widgetFor('body'))
        )
      )
    )
    }
});

CMS.registerPreviewTemplate("blog", PostPreview);
</script>

Make sure to include the script above AFTER the cms.js script link

Add widget without it showing up in Netlify CMS preview

1 Answers1