CloudCannon Documentation logo Documentation

Available for Jekyll sites.

Front matter is a Jekyll feature to set custom variables for a page. Variables are defined in YAML between triple dashed lines at the top of a file. Access the variables in the page with Liquid. For example:

---
title: Home
---
...
<title>{{ page.title }} - Lion Wear</title>
...

CloudCannon provides an easy-to-use editor for front matter. Use the Toggle Settings button at top right of the Visual Editor or Content Editor to access it.

CloudCannon front matter interface

There are interfaces for different types of content. Values and key naming conventions dictate which interfaces are used. Use these conventions to customise the editor for your team and clients. The available interfaces are listed below.

Customise these interfaces further by adding sizes, formats, comments and defaults with Options.


Text

Single line field for text. Displayed for short text values.

---
tagline: Hand-crafted clothing.
---
Text interface

Large Text

Multiline text field expanded for longer text. Displayed for description and long text values.

---
description: Products are crafted in-house by hand, making each piece a labour of love and an exercise in craftsmanship.
---
Large Text interface

Rich Text

WYSIWYG editor for formatted content. Displayed for keys ending in _html or _markdown. Alternatively, you can use the variations without underscores as keys (e.g. markdown).

Each variation defines which format the value is saved as.

---
markdown: |
  # Animals

  - Dogs
  - Cats

  > It's raining cats and dogs.
sidebar_html: |
  <p>This paragraph has <em>emphasis</em> and <strong>strength</strong>.</p>
  <ol>
    <li>Walk</li>
    <li>Run</li>
  </ol>
  <p>Linking to <a href="/">index</a>.</p>
---
Rich Text interface
Use the markdownify Liquid filter to render Markdown from front matter, e.g. {% if page.markdown %}{{ page.markdown | markdownify }}{% endif %}.

Boolean

Checkbox which can be triggered on or off. Displayed for the values true and false.

---
show_feature: true
---
Boolean interface

File

File, image and document selectors with controls to use external links and upload new files. Displayed for keys ending in _path, _document_path, _document, _image_path or _image. Alternatively, you can use the variations without underscores as keys (e.g. image_path or document).

Each variation limits the files shown in the selector by type. The _path variation shows all visible files.

---
background_image_path: /images/background.png
newsletter_document_path: /documents/2016/newsletter.pdf
extra_styles_path: /styles/screen.css
---
File interface
Control the size and format of image uploads with Image Upload Options.

Colour

Input with dropdown for selecting colour. Displayed for keys ending in _colour, _color, _rgb, _hex, _hsv and _hsl. Alternatively, you can use the variations without underscores as keys (e.g. rgb or colour).

Each variation defines the preferred format of the colour. The _colour and _color variations default to hex.

---
brand_colour: '#f05f40'
---
Colour interface Colour interface
Quote hex colours, otherwise the hash symbol begins a YAML comment.

Number

Input field for numbers. Displayed for number, keys ending in _number and numerical values.

---
order: 12
number: 3.14
sort_number: 2
---
Number interface

Social

Text field with avatar for various social handles and full URLs. Displayed for keys ending in one of the following: _twitter, _twitter_username, _twitter_url, _facebook, _facebook_username, _facebook_url, _google_plus, _google_plus_username, _google_plus_url, _instagram, _instagram_username, _instagram_url, _github, _github_username, _github_url, _email and _email_address. Alternatively, you can use the variations without underscores as keys (e.g. twitter_username or facebook_url).

---
twitter: CloudCannon
twitter_url: 'https://twitter.com/@jekyllrb'
facebook: CloudCannon
facebook_url: 'https://www.facebook.com/CloudCannon'
google_plus: +CloudCannon
default_google_plus: '117511497981903622103'
google_plus_url: 'https://plus.google.com/+CloudCannon'
github_username: CloudCannon
github_url: 'https://github.com/jekyll'
docs_github_url: 'https://github.com/CloudCannon/Documentation'
instagram_url: 'https://www.instagram.com/purenewzealand/'
email: support@cloudcannon.com
email_address: support@cloudcannon.com
---
Social interface
For compatibility with popular Jekyll plugins, the Twitter @ symbol is stripped from the value on save. The Twitter interfaces display a placeholder symbol.
In order to support both custom and default Google user ID variations, the + is part of the value in the Google+ interfaces.

Date

Date picker with options for year, month and day. Displayed for keys ending in _date and date values.

---
sale_start_date: 2015-01-09 00:00:00
---
Date interface Date interface

Time

12 hour time input. Displayed for time and keys ending in _time.

---
opening_time: 8:00 am
---
Time interface

Date Time

Combination date picker and 12 hour time input. Outputs an ISO 8601 date. Displayed for date, datetime and keys ending in _at or _datetime.

---
date: 2015-07-15 12:00:00
---
Date Time interface Date Time interface

Select

Set of options in a dropdown menu. The options are populated from an array or object in _config.yml, or with Collection items:

styles:
  - Red
  - Blue
  - Green

options:
  red: Red Shirt
  blue: Blue Sweater
  green: Green Jacket

collections:
  - authors

Displayed for keys in the singular form of the collection name, array or object set in _config.yml.

---
style: Green
option: red
author: george
---
Select interface Select interface Select interface Select interface Select interface Select interface
The value saved to the front matter depends on how the select is populated. Array items are saved as the value, keys are saved for objects and collection items are saved by filename.

Multiselect

Set of options in a tagger-style dropdown menu. Allows multiple items to be selected. The options are populated from an array or object in _config.yml, or with Collection items:

styles:
  - Red
  - Blue
  - Green

options:
  red: Red Shirt
  blue: Blue Sweater
  green: Green Jacket

collections:
  - authors

Displayed for categories, tags, and keys matching the name of a collection name, array or object set in _config.yml.

---
styles:
  - Green
  - Blue
options:
  - red
  - blue
authors:
  - george
  - mike
---
Multiselect interface Multiselect interface Multiselect interface Multiselect interface Multiselect interface Multiselect interface
The value saved to the each item in the front matter array depends on how the select is populated. Array items are saved as the value, keys are saved for objects and collection items are saved by filename.
If not populated from any source, categories and tags display a multiselect that supports adding options inline.

Object

Button that navigates to grouped data. Displayed for object values.

---
footer:
  copyright: Lion Wear Inc.
  since: 2004
---
Object interface Object interface

Array

Button that navigates to an ordered list of items. Items in the array can be added, reordered and deleted. Displayed for array values.

---
staff:
  - Bill
  - Ben
  - Badger
---
Array interface Array interface

Hidden

Hidden values are not present in the interface. Applies to keys that begin with an underscore.

---
_image_src: /src/
---