CloudCannon is committed to bringing the best editing experience to static and Jekyll sites. We provide world-class interfaces for your clients to update their front matter, a core offering of Jekyll.

Example front matter in CloudCannon

There are more front matter interfaces available in CloudCannon than ever before. We’ve recently added more interfaces and ways to customise them.

Rich Text

Front matter is often useful for sections of text outside the main content of a page. Give clients control of formatting with this new interface. The _html and _markdown conventions set what format the text is saved in. Markdown values need to be run through the markdownify filter to render with formatting.

format_size Full documentation for rich text

Colour

Giving your clients access to colour doesn’t always bode well for a design’s longevity, but there are some good use cases. CloudCannon supports colour in front matter by providing a unified selector that outputs to a number of formats. You control the format, the client controls the colour.

color_lens Full documentation for colour

Multiselect

If you’ve ever needed an interface for clients to select a subset of items from a predefined set of values, this is for you. CloudCannon populates values from arrays or objects defined in _config.yml, and collection items. Clients add collection items to create additional values in the set.

view_list Full documentation for multiselect

Social

There’s a undeniable link between social media and websites, and your editing interfaces are now aware of it. Social interfaces are text fields for URLs and IDs. Profile pictures are displayed alongside, validating for clients they have the correct URL and adding detail to an otherwise plain text field.

person Full documentation for social

Documents and Images

The file selector based on the _path convention has been incredibly popular in sites on CloudCannon, especially for images. The new _image_path and _document_path conventions now allow you to restrict the files to images or documents only. Using a more specific type provides a better editing experience and reduces potential mistakes from clients.

description Full documentation for files

Number

Take advantage of the HTML5 number input and store client-entered values numerically.

casino Full documentation for numbers

Comments

Comments provide instructional or guide text for any interface. Use this heavily requested feature to remind clients of specific details for each interface when a title or key just isn’t enough.

comment Full documentation for comments

Array Defaults

When clients create new items in an array, the keys and interface types are created from the previous item to ensure a consistent interface. You can now provide the starting values for the new item as well.

Set starting values for variables to the most likely value, and set starting images to placeholders (retaining the path when the client selects another)

library_add Full documentation for array defaults

Full Width Editor

Collection items are often files containing only front matter. Dedicating most of the editor to the content isn’t the best experience in this scenario. Hide the content area by setting _hide_content: true in your front matter.

edit Full documentation for full width editor

The full documentation for front matter has details and examples to get you set up with any of these interfaces and customise them further.

We have more interfaces planned, keep track of all the changes in CloudCannon in the change log. As always, we are keen to hear your feedback on the new features and look forward to seeing what you build with them.