Open navClose nav

Color Picker

https://res.cloudinary.com/forestry-demo/image/fetch/c_limit,dpr_auto,f_auto,q_80,w_640/https://forestry.io/uploads/2018/05/colorpicker-field-ui.png

The color picker provides an interface for selecting a color and storing the RGB or hex value.

Options

  • General
    • Label — the human-friendly label shown above the input field in the editor.
    • Name — the key stored in your content’s front matter, used to access it in your templates.
    • Description — a human friendly description of what the field does and/or instructions for your editors.
    • Hidden — hides the field in the editor, but allows developers to set default values or maintain the field for legacy purposes.
  • Format
    • Color Format — Whether to save the RGB or hex value of the selected color.
  • Validation
    • Required – prevent changes from being saved if this field is empty.
  • Default — supply a default color value.

Templating

Hugo

Use safeHTMLAttr when inserting values into HTML attributes.

<div style="{{ safeHTMLAttr (printf "background-color: %s" .Params.color) }}">
    <!-- ... -->
</div>

Jekyll

<div style="background-color: {{ page.color }}">
    <!-- ... -->
</div>

Config Files

You can configure this field in Front Matter Template Config Files as follows:

type: color
name: [String]
label: [String]
description: [String]
config:
    color_format: [Hex|RGB]

Example

type: color
name: background_color
label: Background Color
description: The background color of the element.
config:
    color_format: Hex

Last updated on May 29, 2018