Integration

There are just a view steps necessary to integration the manager application with your website.

Activate for site

To activate the manager for a site, it has to be enabled in the site properties.

[ui]
managerEnabled = true

Template

To integrate your website with the manager application, you need at first the manager javascript and styles.

{% if PREVIEW_MODE %}
    <script  src="{{ cms.links.createUrl('/manager/js/manager-inject.js') }}" type="module"></script>
    <link rel="stylesheet" href="{{ cms.links.createUrl('/manager/css/manager-inject.css') }}" />
{% endif %}

After the js and css is added you can start adding toolbars, Toolbars are a set of action buttons, place in a top corner of the div they are added. Main and section toolbars are added on the right side, sections toolbar on the left.

Basic usage:

ext.ui.toolbar("<id>", "<type>", ["<actions>"])

id: a unique id for every toolbar.
type: the toolbar type, available main, sections, sections And media.
actions: list of actions available in the toolbar: editContent, editAttributes, addSection, orderSections.

Main toolbar

Use the ui helper to add the main toolbar definition to edit the content and attributes to you main div.

<div {{ ext.ui.toolbar("main", "main", ["editContent", "editAttributes"]) | raw }}>
...
</div>

Sections toolbar

Use the ui helper to add the edit sections toolbar, with actions to add and order sections.

<div {{ ext.ui.toolbar("content", "sections", ["addSection", "orderSections"], { "sectionName": "content"}) | raw }}>
...
</div>

Section toolbar

This adds a toolar for a section into the template. Actions are editContent, editAttributes and deleteSection, as options the uri of the node is added, so saving knows the corrent file.

<div
{{ ext.ui.toolbar(node.uri, "section" , ["editContent", "editAttributes" , "deleteSection" ], {"uri": node.uri}) | raw }}
>
...
</div>

For more information about forms read the forms documentation. For more information about form fields read the field types documentation

Media toolbar

For templates that are not part of the markdown but configured in the meta

<img {{ ext.ui.mediaToolbar(["select", "meta", "focalPoint"], {"uri": node.uri, "element": "media_url" }) | raw }} />