Editing / Interfaces

Inputs

Inputs are interfaces for different types of content. Use a different key for a different input. Use these conventions to customise the editor for your team and clients. This is used in the Front Matter, Data Editor and CSV Editor.

There are some exceptions where the value itself dictates the input (e.g. booleans)

The available inputs are listed below:

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

General Inputs

Boolean

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

---
show_feature: true
---
Boolean interface

Code Block

Configurable editor for blocks of code or monospace content. Displayed for code_block and keys ending in _code_block.

Syntax highlighting is enabled when the suffix includes a language (e.g. javascript_code_block).

---
code_block: |
  Some content is better in monospace.

  1 + 1 = 2
  2 + 2 = 4
javascript_code_block: |
  function sayHello() {
      console.log("Hi there!");
  }

  sayHello();
example_ruby_code_block: |
  def say_hello
    puts 'Hi there!'
  end

  say_hello
---

Set a theme, tab size and more for each interface with code block Options.

Code Block interface

Colour

Input with dropdown for selecting colour. Displayed for keys ending in _colour, _color, _rgb, _rgba, _hex, _hsv, _hsva, _hsl and _hsla. 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.

Variations ending in a have an additional transparency control.

---
brand_colour: '#f05f40'
---

Quote hex colours, otherwise the hash symbol begins a YAML comment.

Colour interface Colour interface

Email

Email field with avatar. Displayed for email, email_address, and keys ending in _email or _email_address.

---
email: support@cloudcannon.com
email_address: support@cloudcannon.com
---
Email interface

HTML Rich Text

WYSIWYG editor for html content. Displayed for html or keys ending in _html.

---
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>
---
HTML Rich Text interface

Markdown Rich Text

WYSIWYG editor for markdown content. Displayed for markdown or keys ending in _markdown.

Use the markdownify Liquid filter to render Markdown from front matter. For example:

{% if page.markdown %}
  {{ page.markdown | markdownify }}
{% endif %}

---
markdown: |
  # Animals

  - Dogs
  - Cats

  > It's raining cats and dogs.
---
Markdown Rich Text interface

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
---

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.

Multiselect interface Multiselect interface Multiselect interface Multiselect interface Multiselect interface Multiselect interface

Number

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

---
number: 3.14
sort_number: 2
---
Number 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
---

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.

Select interface Select interface Select interface Select interface Select interface Select interface

Text

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

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

Textarea

Multiline text field expanded for longer text. Displayed for keys ending in _text or _description. Alternatively, you can use the variations without underscores as keys (e.g. description).

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

URL

Input field with a preview for absolute or fully qualified URLs. Displayed for url, link and keys ending in _url or _link.

Previews for URLs without a protocol are requested prefixed with http://.

---
external_url: 'https://bitbucket.org/'
internal_url: /editing/visual-editor/
link: github.com
---
URL interface

Time Inputs

Date

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

If site.timezone is set, dates are output with the matching offset suffix. If unset, dates are output in UTC (without an offset suffix).

---
sale_start_date: 2018-01-09 00:00:00
---

The time part is always added as 00:00:00 for consistency with Date Time fields and sorting comparisons in Liquid.

Date interface Date 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.

If site.timezone is set, dates are output with the matching offset suffix. If unset, dates are output in UTC (without an offset suffix).

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

Time

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

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

Uploaders

Document

Document selectors with controls to use external links and upload new files. Displayed for document_path, document, and keys ending in _document_path or _document. Limits files shown to documents.

---
newsletter_document_path: /documents/2016/newsletter.pdf
---
Document interface

File

File selectors with controls to use external links and upload new files. Displayed for path and keys ending in _path. Does not limit file type.

---
extra_styles_path: /styles/screen.css
---
File interface

Image

Image selectors with controls to use external links and upload new files. Displayed for image_path, image, and keys ending in _image_path or _image. Limits files shown to images.

---
background_image_path: /images/background.png
---

Control the size and format of image uploads with Image Upload Options.

Image interface

Social Inputs

Facebook

Text field with avatar for Facebook social handles and full URLs. Displayed for facebook, facebook_username, facebook_url, and keys ending in _facebook, _facebook_username or _facebook_url.

---
facebook: CloudCannon
facebook_url: 'https://www.facebook.com/CloudCannon'
---
Facebook interface

Github

Text field with avatar for Github social handles and full URLs. Displayed for github, github_username, github_url, and keys ending in _github, _github_username or _github_url.

---
github_username: CloudCannon
github_url: 'https://github.com/jekyll'
docs_github_url: 'https://github.com/CloudCannon/Documentation'
---
Github interface

Instagram

Text field with avatar for various social handles and full URLs. Displayed for instagram_username, instagram_url, and keys ending in _instagram_username or _instagram_url.

---
instagram_url: 'https://www.instagram.com/purenewzealand/'
---
Instagram interface

Pinterest

Text field with logo for Pinterest social handles and full URLs. Displayed for pinterest, pinterest_username, pinterest_url, and keys ending in _pinterest, _pinterest_username or _pinterest_url.

---
pinterest: pinterest
default_pinterest: pinterest
pinterest_url: 'https://www.pinterest.com/pinterest/'
---
Pinterest interface

Twitter

Text field with avatar for Twitter social handles and full URLs. Displayed for twitter, twitter_username, twitter_url, and keys ending in _twitter, _twitter_username or _twitter_url.

---
twitter: CloudCannon
twitter_username: CloudCannon
twitter_url: 'https://twitter.com/@jekyllrb'
---

For compatibility with popular Jekyll plugins, the Twitter @ symbol is stripped from the value on save. The Twitter interfaces display a placeholder symbol.

Twitter interface

Structure

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/
---

Alternatively, hide fields without changing the key name with Options.

Object

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

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

Editing / Interfaces

Editable Regions

Read previous doc
arrow_forward

Editing / Experience

Collection Defaults

Read next doc