Templating / Templates for the Live Editor
Note: You are currently reading the documentation for Bolt 3.7. Looking for the documentation for Bolt 5.2 instead?
Bolt comes with built-in support for editing records as they'll appear on your website. It requires a little bit of set up, but once it's ready, the experience will look something like this:
Note: This feature is marked "Experimental": This means that it will basically work, but complex use-cases are not supported. Live Editing does not work with TemplateFields or Repeaters, for example.
In any record that has a corresponding page (which means viewless: false
- the
default for the ContentType), you can make any HTML, text or textarea
field editable. When it is editable, clicking on the "live edit" button while
editing that record will open an inline, live editor. Any field that is editable
will have a yellow outline around it. After making changes, an editor can click
"close editor" at the top right and those changes will propagate to their
relevant fields in the regular editor.
Tip: the default Bolt-2016 theme is live-editor enabled. If you're unsure about how this all works, take a look at its source code in your Bolt installation.
To enable a field to be editble, Bolt has to know what field to map it to. It
requires a very small and easy change to your theme code. For the live editor to
work, the field must be the only contents of the element it is in. Then, you
just add a data-bolt-field
attribute set to the name of the field. For
example, if you have a title field set up in your templates like this:
<h1>{{ record.title }}</h1>
This is how you would set it up for live editing:
<h1 data-bolt-field="title">{{ record.title }}</h1>
Simple!
To enable this for template fields, you need to
make a reference with the text templatefields
followed by the name of the
field in square brackets. For example:
<section data-bolt-field="templatefields[section_1]">{{ record.templatefields.section_1 }}</section>
Note: To disable the live editor across your
entire Bolt installation, set liveeditor: false
in
your config.yml
.
Note:To disable the live editor for a
ContentType, set liveeditor: false
in your
contentypes.yml
. However, the global setting in
config.yml
must remain set to true
Couldn't find what you were looking for? We are happy to help you in the forum, on Slack or on Github.