Fields

How to create a field

Create file

Add a yml field file in fields directory.

layouts/
└── partials/
    └── admin/
        └── fields/

Simple widget

{{- $args := dict
  "label" (i18n "admin.fields.audio.mp3.label")
  "name" "mp3"
  "type" "audio"
  -}}
{{ partial "admin/widgets/file.js" $args }}

List or Object widget

{{- $pin := cond (or (eq site.Params.admin.cms "decapcms") (eq site.Params.admin.cms "sveltiacms")) "location" "coordinates" -}}
{{- $fields := slice 
  "street" 
  "zipcode" 
  "city" 
  "country_code"
  $pin -}}

# This line allows you to modify the fields via the parameters
{{- $fields = partial "admin/func/GetFields.html" (dict "field" . "fields" $fields) -}}

{{- $args := dict 
  "label" (i18n "admin.fields.address.label")
  "name" "address"
  "collapsed" true
  "fields" $fields
  -}}

{{ partial "admin/widgets/object.js" $args }}

Add or remove fields in object field

In this example, we set two fields (title and text with markdown) for the Hero field.

params:
  admin:
    fields:
      # Array of available fields for a fields
      # e.g with hero field
      hero:
        fields:
          - title
          - text_markdown
          # e.g with nested fields
          - image:
              fields:
                - image_src
                - image_alt

Markdown editor

The markdown fields below read their editor settings from params, so a project can enlarge the editor, open the raw markdown or change the toolbar without overriding the field.

params:
  admin:
    fields:
      text_markdown:
        minimal: false
        modes: "['rich_text', 'raw']"
        buttons: "['bold', 'italic', 'link', 'bulleted-list', 'numbered-list']"

• minimal: true keeps the editor compact: Sveltia CMS caps it at 240 px and scrolls past that, Decap CMS shrinks it to the smallest height. false lets it grow with the content.
• modes: rich_text, raw, or both. With both, the toolbar shows a switch, and the editor opens in the first mode listed.
• buttons: the formatting buttons of the rich text toolbar. See the Sveltia CMS and Decap CMS documentation for the names.
• editor_components: the components the editor can insert. body offers them all by default, the CMS’s own image and code-block plus the enabled shortcodes. Set, a field offers only the ones listed, so name the shortcodes too: "['button']" drops the image and the code block and keeps the button shortcode, "[]" removes them all.

Collapse blocks

The blocks of an entry arrive unfolded. Fold them to their summary, so a long page reads as a list of sections:

params:
  admin:
    fields:
      blocks:
        collapsed: true

Options of a select field

options replaces the values a select field offers. It works on every select field, not only grid and theme: align, breakpoints, direction, layout, offset, scrollsnap, vertical_align…

params:
  admin:
    fields:
      align:
        options: [start, center]

Written next to the field in a fields list, the options apply to that list only:

params:
  admin:
    blocks:
      cta:
        fields:
          - title
          - ui:
              - theme: { options: [light, dark] }

The languages and the countries offer the whole ISO lists, which come from the theme. options narrows them down the same way:

params:
  admin:
    fields:
      country_code:
        options: [FR, BE, CH, LU]

Default map position

The location field opens on Paris. Move it with a GeoJSON point — longitude first, then latitude:

params:
  admin:
    widgets:
      map:
        default: '{"type": "Point", "coordinates": [4.8357, 45.7640]}'

The fields of a config file

Each file of the config collection ships its own set of fields. admin.files.<name>.fields replaces that set, without touching the files list — so changing the fields of one file no longer means restating every other:

params:
  admin:
    files:
      footer:
        fields: [newsletter, cta, blocks]
      seo:
        fields: [title, description, image_seo]

Available on footer, seo, credit and banner. Left undefined, each keeps the fields the module declares — respectively title, text_area, cta, blocks, title, description, image_seo, twitter, text_markdown, and text_markdown, state.

New fields

Other additions: blocks on the persons and products collections, firstname and lastname on persons, a file input for form fields, and an optional format on the datetime widget for Decap and Sveltia storage.

Renamed and changed fields

If you relied on the stepped weight select, the previous behaviour is preserved in a separate field:

A country typed in before stays on the page as long as the address has no country_code.

A title built from other fields

New in v2 Only available with Sveltia CMS

title_page reads a compute template and hands it to the compute widget. Left undefined, it stays the regular text input, which is also what a project running any other CMS gets.

The persons collection does this by default: a person is named after their first and last name, so the page title is derived rather than asked for, and never typed twice.

params:
  admin:
    collections:
      persons:
        fields:
          - draft
          - title_page: { i18n: duplicate, compute: '{{fields.firstname}} {{fields.lastname}}' }
          - firstname
          - lastname
          - body

List of Hugolify fields