Scott Gallant

Written by Scott Gallant

Feb 13 2017

Customize the UI with Front Matter Templates

Does the following sound familiar?  You set up a WP site, hand it off to a non-dev, and then they point to some unused part of the UI and say:

“What does this do?”

To which you sheepishly reply:

“Oh, that doesn’t do anything…just ignore it.”

A CMS often feels like a work-around, designed for some other purpose.

Front Matter Templates (FMTs)

FMTs allow you to customize the presentation of your UI fields in your CMS.

We’re building a hackable CMS for Jekyll and Hugo sites. A CMS that allows you to strip out the non-essential clutter from your UI and Front Matter Templates are the first step in this direction. This is handy if your pages use a lot of front matter fields.

What you can do with FMTs

The following page makes use of a variety of front matter:

Forestry front matter demo

---
title: Astronomy
layout: astronomy
order: 5
banner: /images/mars.jpg
bio: Astronomy compels the soul to look upward...
images:
- "/images/rover2.png"
- "/images/earth.jpg"
- "/images/rocket.jpg"
- "/images/aurora.jpg"
- "/images/nebula.jpg"
- "/images/rover.jpg"
- "/images/galaxy.jpg"
- "/images/rover3.png"
email: astronomy@gmail.com
phone: (555) 555-5555
permalink: /astronomy/

---
Astronomy compels the soul to look upward, and leads us from this world to another.
Dinosaurs are extinct today because they lacked opposable thumbs and the brainpower to build a space program.

With Front Matter Templates, you can do things like:

Hide fields from your editors

/blog/images/hidden-field-3.gif

Change the field type in the UI

For example, change type from a list of tags to an image gallery. See full list of available fields.

change field type

Required fields

set field as required

Reorder the fields in the UI

reorder front matter fields

Add help text

add help text to front matter fields

Set default values and much more.

set a default value

What’s Next?

This is just the beginning. Soon we’ll be adding more field types and more customizability.

Coming soon: image resizing and cropping

/blog/images/image-upload-4.gif

Coming soon: advanced UI fields

Like color pickers, google map location picker, etc.

/blog/images/color-picker-forestry.png

Select data from your elsewhere in your site. For example, choose a related post, or choose an author from a data file.

Conclusion

Front Matter Templates allow you to customize the presentation of the fields in your CMS.  You can set up a template to be used for a single page or for a collection of pages (posts, projects, etc).  Customize the UI so non-developers aren’t confused.

As always, if you have any thoughts or feedback, we’d love to hear from you!

Scott Gallant

Author Scott Gallant

CEO and Co-founder of Forestry.io. Web developer, recovering freelancer.