Home
Support Forums

How to correctly register a preview template?

I’m currently building a site with netlify cms and gatsby. I’m using gastby-plugin-netlify-cms@5.11.0 and netlify-cms-app@2.15.38.

However when I’m trying to register a preview template it is ignored. I’m developing as close to gatsby-starter-netlify-cms as possible, because it was working there.

This is my cms.js file:

import CMS from 'netlify-cms-app'
import uploadcare from 'netlify-cms-media-library-uploadcare'
import cloudinary from 'netlify-cms-media-library-cloudinary'

import JammerfastenDayPagePreview from "./preview-templates/JammerfastenDayPagePreview";
import OptInPagePreview from "./preview-templates/OptInPagePreview";
import SharingPagePreview from "./preview-templates/SharingPagePreview";
import ThankYouPagePreview from "./preview-templates/ThankYouPagePreview";
import UpsellPagePreview from "./preview-templates/UpsellPagePreview";
import VideoPagePreview from "./preview-templates/VideoPagePreview";

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

// import { de } from "netlify-cms-locales";

CMS.registerMediaLibrary(uploadcare)
CMS.registerMediaLibrary(cloudinary)

// CMS.registerLocale("de", de);

CMS.registerPreviewTemplate("dayPages", JammerfastenDayPagePreview);
CMS.registerPreviewTemplate("optInPages", OptInPagePreview);
CMS.registerPreviewTemplate("sharingPages", SharingPagePreview);
CMS.registerPreviewTemplate("thankYouPages", ThankYouPagePreview);
CMS.registerPreviewTemplate("upsellPages", UpsellPagePreview);
CMS.registerPreviewTemplate("videoPages", VideoPagePreview);

CMS.registerPreviewTemplate('blog', BlogPostPreview)


This is one of the preview files. (the console.logs are not shown in the console thats why im thinking the preview templates aren’t registered):

import React from "react";
import { ThankYouPageTemplate } from "../../templates/thank-you-page";

const ThankYouPagePreview = ({ entry, getAsset }) => {
  const data = entry.getIn(["data"]).toJS();
  

  if (data) {
    console.log(data);
    return <ThankYouPageTemplate data={data} />;
  } else {
    console.log("CHECK");
    return <div>Loading...</div>;
  }
};

export default ThankYouPagePreview;

this is the corresponding template file:

import React from "react";
import { graphql } from "gatsby";
import Layout from "../components/Layout.js";
import Section from "../components/Section.js";
import RenderMarkdown from "../components/RenderMarkdown.js";
import Video from "../components/Video.js";
import Steps from "../components/Steps.js";

export const ThankYouPageTemplate = ({ data }) => {
  if (!data.seoObject.slug.startsWith("/")) {
    data.seoObject.slug = "/" + data.seoObject.slug;
  }
  
  return (
    <Layout
      imageObject={data.headerObject.imageObject}
      seoObject={data.seoObject}
    >
      <Section>
        <div className="space-y-5 sm:space-y-10">

        
        <RenderMarkdown
          markdownContent={data.heroObject.title}
          className="markdown text-center"
        />
        <RenderMarkdown
          markdownContent={data.heroObject.subtitle}
          className="markdown text-center"
        />
        <Video
          videoObject={data.heroObject.video}
          loading="eager"
        />
        </div>
      </Section>
      
      <Section className="bg-brand-beige-40">
        <Steps stepsObject={data.stepsObject} />
      </Section>
    </Layout>
  );
};

const ThankYouPage = ({ data }) => {
  return <ThankYouPageTemplate data={data.markdownRemark.frontmatter} />;
};

export default ThankYouPage;

export const pageQuery = graphql`
  query ThankYouPage($id: String!) {
    markdownRemark(id: { eq: $id }) {
      frontmatter {
        title
        seoObject {
          canonical
          index
          slug
          description
          imageObject {
            alt
            image {
              publicURL
              childImageSharp {
                original {
                  height
                  width
                }
              }
            }
          }
        }
        headerObject {
          imageObject {
            alt
            image {
              childImageSharp {
                gatsbyImageData(placeholder: TRACED_SVG)
              }
            }
          }
        }
        heroObject {
          video {
            image {
              publicURL
            }
            format
            cloudflareId
          }
          title
          subtitle
        }
        stepsObject {
          title
          steps {
            imageObject {
              alt
              image {
                childImageSharp {
                  gatsbyImageData
                }
              }
            }
            video {
              image {
                publicURL
              }
              format
              cloudflareId
            }
            description
            linkList {
              linkUrl
              linkText
            }
          }
        }
        qAndAObject {
          title
          qAndA {
            question
            answer
          }
        }
      }
    }
  }
`;

My preview template names are exactly as they are in the config.yml file.

I’m pretty much out of ideas where the error could be so I’d appreciate any input.

Thank you in advance.

Hi there! Thanks for your interest in Netlify CMS. Looks like you posted your question a little while ago, but that you haven’t received a solution yet. Here’s where you might get more help:

netlifycms.org - the site houses our extensive documentation that likely contains helpful information to get you back on track.

netlify cms slack - join our friendly slack channel and chat with other cms pros to get the help you need.

GitHub Issues - think you’ve found a bug, or would like to make a feature request? Make your voice heard here. Netlify CMS is open source - PRs and other contributions are also welcome!

Stack Overflow Check StackOverflow for questions tagged “Netlify CMS” if you don’t get an answer in the Slack or the GH issues. StackOverflow reaches a worldwide audience of knowledgeable people.

Your question will be left open here for anyone to comment - but we encourage you to check out the above resources if you are still looking for a solution!

1 Like