mod_admin_frontend

Adds editing of resources, menu-trees and collections for non-admin users.

With many sites it is needed to let “normal” users edit content. For those users the /admin interface is overwhelming and also gives too many options that only administrators should be using.

For this use-case the mod_admin_frontend is created. It reuses some templates and parts of the normal admin, but in such a way that only the most needed options and fields are present. It also enables editing a menu-tree or collection, side-by-side with the content in the menu-tree.

Interface and dispatching

The interface is a one-page interface which uses postbacks to update the currently edited resource and forms. The editing history is maintained by using hashes in the url.

The URL of the edit page is generated by the dispatch rule admin_frontend_edit:

[
    {admin_frontend_edit, ["edit"], controller_page, [{acl, is_auth}, {template, "page_admin_frontend_edit.tpl"}]},
    {admin_frontend_edit, ["edit", id], controller_page, [{acl_action, edit}, {template, {cat, "page_admin_frontend_edit.tpl"}}]}
].

The template uses the menu_rsc filter to find the contextual menu for the resource being edited. Per default the menu_rsc filter will fallback to the resource with the name main_menu. Hook into the #menu_rsc{} notification to change this behavior.

To edit a specific resource in the context of a menu that is non-standard for the resource, use the following code:

<a href="{% url admin_frontend_edit id=my_menu %}#edit_id={{ id }}">Click to edit {{ id.title }}</a>

Customizing and templates

The mod_admin_frontend makes heavy use of catinclude to find the correct templates.

The column with the menu is rendered using {% catinclude "_admin_menu_menu_view.tpl" tree_id ... %}. The resource-column with the main editing form is rendered using {% catinclude "_admin_frontend_edit.tpl" id ... %}. This column is loaded lazily via a postback.

Editor profile

With mod_editor_tiptap, frontend editing defaults to the advanced profile. Set mod_admin_frontend.editor_profile to simple, normal, or advanced in the site configuration to choose another profile. An unset or empty value uses advanced; unrecognized profile names fall back to Tiptap's normal profile.

The setting is applied as data-editor-profile on the resource edit form, including forms loaded via postbacks. A nearer attribute on a field container or textarea overrides it. Profile definitions and site overrides are provided by _editor_tiptap_profiles.tpl in mod_editor_tiptap. This setting does not change TinyMCE configuration.

Responsive menu column

When less than 1100 CSS pixels remain for the editor, the menu column collapses. A Menu button in the editor toolbar temporarily shows the menu in place of the form. The form remains mounted, preserving unsaved edits. Selecting a resource closes the menu. The available width is observed, so resizing the live preview also updates the layout. Site toolbar overrides using save-buttons inherit this behavior through the core frontend script and styles.

Customizing the menu column

Extra content can be added above or below the menu view by overruling the blocks above_menu and below_menu.

Customizing the main edit column

The main edit template _admin_frontend_edit.tpl provides the main edit-form, javascript initializations and fields for basic publication status editing.

The main edit block edit_blocks is defined as follows and can be overruled for specific categories:

{% block edit_blocks %}
    {% catinclude "_admin_edit_basics.tpl" id is_editable=is_editable languages=languages %}

    {% if id.category_id.feature_show_address %}
        {% catinclude "_admin_edit_content_address.tpl" id is_editable=is_editable languages=languages %}
    {% endif %}

    {% all catinclude "_admin_edit_content.tpl" id is_editable=is_editable languages=languages %}

    {% if id.is_a.media or id.medium %}
        {% include "_admin_edit_content_media.tpl" %}
    {% endif %}

    {% catinclude "_admin_edit_body.tpl" id is_editable=is_editable languages=languages %}
    {% catinclude "_admin_edit_blocks.tpl" id is_editable=is_editable languages=languages %}
    {% catinclude "_admin_edit_depiction.tpl" id is_editable=is_editable languages=languages %}
{% endblock %}

If any content needs to be added on top of the page, between the publication checkbox and the main edit fields, then overrule the block meta_data_after.

If you click on the cog icon on the right, then a meta data panel is shown (for access-control options and language settings). This panel can be extended with extra tabs using the blocks meta_tabs and meta_panels.

Live view

The Open panel / Close panel button toggles a right-hand iframe showing saved content without saving the form. A hint in the panel header reminds the user to save when the form has unsaved changes. Resource, media and incoming/outgoing edge events for both the edited resource and tree_id refresh the preview. Switching resources replaces the subscriptions; closing the panel releases them. Unsaved form changes are not rendered.

The preview uses the form's view_location override, falling back to page_url in the editing language. Keep _admin_edit_preview_context.tpl inside the rscform block so site overrides of view_location apply. Sites replacing the outer editor layout or navbar must include _admin_edit_preview.tpl once and _admin_edit_preview_button.tpl in their toolbar. The iframe is same-origin and uses the editor's existing permissions. External destinations can be opened in a new tab. Opening an admin or admin_frontend editor inside the preview navigates the top window to that editor. Open state and width are remembered for the browser session.

Preview languages are document-local. Embedded navigation and background requests do not update the shared z.lang cookie, and embedded language switches do not change the user's saved language preference. Authentication refresh uses the document's language for its MQTT session, keeping lazy templates and postbacks in the preview language. Custom HTTP loaders must likewise include their document's language in their URL or z_language argument instead of relying on the cookie.

Accepted Events

Delegate callbacks:

• event/2 with postback messages: admin_menu_edit.
• event/2 with postback_notify messages: <<"admin-menu-edit">>.