Content - Inline content editing

Enable inline content editing

You can enable inline editing feature in a few steps:

• First, add the content plugin to your project
• Second, set contententry_api_enabled = true in content.conf.ini to enable the language entry editing API
• Next, add the {% insert %} code found below to your base.html
• Create a language file for your project, name it whatever you wish like example.en_US.lang.ini. Create one for each supported locale.
• Add ContentEntry::load(); to your __load() method
• Add the menu access to the project's admin interface. You'll also need the user plugin enabled so that you can designate admin users who can edit content.
• Add language variables where necessary and add the proper data attributes to make the region editable.
• Update to the latest system plugin and run a database update.

Here's a complete example of the required changes:

Using inline content editing

To use inline editing, end users (with administrator privelages) will need to log in to the project's admin interface. If you performed all the steps above they should have a menu to enable live editing. This is the direct url to enable it:

{{baseurl}}admin/contententry/liveedit/start/

Once logged in and enabled users will be able to click on sections you designated as editable with data attributes:

Data attributes reference

Outlast CMS uses HTML attributes to define editable areas within the document. You can use the following attributes:

• data-editor The type of data editor to use.
• data-editor-field The field name for this data.
• data-editor-nextfield - This will prompt the user to edit the next field, as specified in this tag. This can be applied to any field type, but only text fields are supported as next fields.
• data-editor-template-default A special attribute used by the microsite plugin.
• data-editor-* There can be additional options for specific editor types. See the detailed documentation below for each type.

data-editor

Example: data-editor="richtext"

Data editor is the attribute which defines that this tag should be editable within Outlast CMS. Any content is stored in language variables. So a typical editable field will look like this:

<h1 class="maintitle" data-editor="text" data-editor-field="maintitle">{{#maintitle#}}</h1>

The value of the attribute defines what kind of editor will be used for this tag. See below for a list of supported editor types.

data-editor-field

Example: data-editor-field="maintitle"

This value defines which field the data will be saved to. All data is saved and loaded as language variables, so the saved data can be accessed with a standard {{#language_variable#}} syntax.

<h1 class="maintitle" data-editor="text" data-editor-field="maintitle">{{#maintitle#}}</h1>

You can use any value as long as it is a valid PHP variable.

data-editor-template-default

Example: data-editor-template-default="yes"

This a special attribute used with the microsite plugin. If set, the given data-editor-field will be reset to the default value when the template is changed. This can be useful for design elements such as colors or css classes where you want the value to change along with the template.

Other data-editor-fields retain their value even if the template is changed.

data-editor-*

Certain field types like photo and select will have additional options that you can set with data-editor-* parameters. The documentation for each type will list what options are available, so see the details below!

text

A simple text field, one line.

<h1 data-editor="text" data-editor-field="maintitle">{{#maintitle#}}</h1>

textarea

Multi-line text.

<h1 data-editor="textarea" data-editor-field="description">{{#description#}}</h1>

richtext

Multi-line text with rich formatting.

<h1 data-editor="richtext" data-editor-field="description">{{#description#}}</h1>

color

A color code that can be specified in the admin via GUI or hex code.

<style data-editor="color" data-editor-field="fontcolor">
  div.example{ color: {{#fontcolor#}}; }
</style>

photo

A photo. The editor will be an uploader, the data will be its url. You can also specify options if you want the photo to be cropable.

• data-editor-width (optional) Specify the minimum width of the photo in pixels.
• data-editor-height (optional) Specify the minimum height of the photo in pixels.
• data-editor-crop (optional) To turn on cropping set to "yes".
• data-editor-ratio (required if crop is yes) Specify the cropping aspect ratio.

Standard img tag example:

<img data-editor="photo" data-editor-field="picturebox" data-editor-width="540" data-editor-height="525" data-editor-ratio="540:525" src="{{#picturebox#}}">

Responsive example:

<style data-editor="photo" data-editor-field="picturebox_desktop_large" data-editor-width="540" data-editor-height="525" data-editor-ratio="540:525">
	@media (min-width: 1440px){ .picture{ background-image: url({{#picturebox_desktop_large#}}); } }
</style>

select

A list of values that can be chosen from a select dropdown.

• data-editor-options (required) A comma-separated list of possible values.

<div data-editor="select" data-editor-field="header_design" data-editor-options="big,small" class="{{#header_design#}}">

section

This is not really a field. It is a visual separator that will be placed in the admin for better organization when you have lots of fields.

<div data-editor="section" data-editor-field="maincontent">

You can then use the language files to specify a friendly name for this section.