Front Matter CMS: debugging preview images in the dashboard

The headless CMS Front Matter has a beautiful dashboard view of your site’s content — but if you’re migrating a prior site, it’s likely the default configurations won’t load your article images to the dashboard. You’ll see a series of placeholder images instead. Here are three steps to debugging this — tuned for a Hugo site migration, but applicable for any static site generator.

Define the preview image

Of course, Front Matter needs to know what image to use in the Dashboard. Explicitly define this in your frontmatter.jason configuration, by adding a boolean isPreviewImage flag to your article image front matter. For me, that looks like:

Reference the Front Matter documentation on image fields for for more information.

Explicitly set your image path

Front Matter needs to know where your assets are stored. Define this using the frontmatter.content.publicFolder setting in your frontmatter.jason configuration. For Hugo, this is probably:

publicFolder documentation has the details.

Clear the cache and reload the Dashboard

This one caught me up a bit: Front Matter uses a cache to handle Dashboard images efficiently. After these configuration changes, you’ll need to clear the cache and reload to see your images. In VS Code, run the command Front Matter: Clear cache. That should be everything you need to see your article images load in the Dashboard.

Questions? Comments? Send me a note on Mastadon or Twitter.