diff --git a/docs/advanced-usage/front-end/frontend.md b/docs/advanced-usage/front-end/frontend.md index a57fc85f8..0ce678892 100644 --- a/docs/advanced-usage/front-end/frontend.md +++ b/docs/advanced-usage/front-end/frontend.md @@ -12,90 +12,92 @@ [TOC] ## Overview -For users with the appropriate level of access, ExpressionEngine Pro adds "front edit" links ( pro edit icon ) on the site's front-end that allow editing the contents of each entry field individually. This is done directly on front-end without going to the Control Panel. +For any user logged in with a sufficient level of access permissions, ExpressionEngine Pro adds "front edit" links ( pro edit icon ) that allow editing an entry's data field by field. When enabled, editing can be done directly on front-end without needing to go to the Control Panel. -Clicking the link opens a popup with the field that can be modified and saved. Along with editing, users can also use front edit popup to access the full entry for editing with live preview showing the current page you are on. +Clicking the link icon opens a popup for that specific field so that its content can be modified and saved. The user can also switch to editing with the full entry interface (with live preview functionality if it has been set up for that channel). ![edit popup](_images/ee-pro-window.png) -The links are being placed in your HTML right before the field's tag (or opening tag if field tag pair is used). +By default, edit links are added into the HTML right before where the field tag is called (the opening tag if a field tag pair is used). -WARN:**Permissions:** Users must be logged-in on the front-end of your site and must have a role assigned to them which allows them to access and edit content for that entry's channel. +WARN:**Permissions:** Users must be: a) logged-in on the front-end of the site and b) must have a role assigned to them which allows them to access and edit content for that entry's channel. ![channel access](_images/ee-role-channel-access.png). ## Saving Content -After editing data, content can be saved by one of two ways: -- Clicking on "Save", which will trigger a page reload + +After editing data, content can be saved in one of two ways: +- Clicking directly on "Save", which will trigger a page reload ![save](_images/ee-pro-save.png) -- Clicking the alternate "Save without Reload", which will save the content without reloading the page. This would require a manual page refresh to see any updated content. +- Clicking the alternate "Save without Reload" choice, which will save the content but will not reload the page. This choice requires a manual page refresh to see any updated content but is quicker, especially if you are planning to edit multiple fields or entries on a page. ![save without reload](_images/ee-pro-save-reload.png) ## Unsaved Changes -When a user edits data and has unsaved changes, Pro will create an autosave of the entry and alert the user via a notification on the edit window with unsaved changes. The autosave is triggered based on the default autosave interval of 60 seconds. If you want to ensure users do not accidentally lose unsaved changes adjust the `[autosave_interval_seconds]` system config override to a lower interval between autosaves. A setting of 10 seconds is the recommendation. + +When a user has edited data and has unsaved changes, Pro will create an autosave of the entry and display an alert notification on the edit window with the unsaved changes. The autosave is triggered based on the autosave interval setting. If you want to ensure users do not accidentally lose unsaved changes, adjust the `[autosave_interval_seconds]` [system config override](general/system-configuration-overrides.md#autosave_interval_seconds) to a shorter interval between autosaves. A setting of 10 seconds is recommended. ![unsaved changes](_images/pro_unsaved_changes.png) -NOTE: **Note:** If the `[autosave_interval_seconds]` system config value was not previously changed, Pro will set this value at 10 seconds upon install. +NOTE: **Note:** If the `[autosave_interval_seconds]` system config value was not previously set, upon install, Pro will set this value in the config file to be 10 seconds. However, if for some reason this value is not set explicitly, the default value is 60 seconds. + +NOTE: **Note:** Autosave data is kept for a default of 6 hours. This can be adjusted via the [`[autosave_prune_hours]` system config value](general/system-configuration-overrides.md#autosave_prune_hours). Example Usage: ``` -$config['autosave_interval_seconds'] = '10'; +$config['autosave_interval_seconds'] = '10'; +$config['autosave_prune_hours'] = '6'; ``` -## Conditional Tags - -### `{if frontedit}` - -```{if frontedit} content {/if}``` -This special conditional allows you to display content if front-end editing is enabled. +## Enable/Disable the Front Edit Links +There are multiple ways to enable or disable front-end editing links: -## Enable/Disable The Front Edit Link + - Globally with [configuration overrides](/general/system-configuration-overrides.md#enable_frontedit_links) + - In the [Front-End Editing Settings](/control-panel/settings/front-end-editing.md#enable-automatic-front-end-editing-links) where you control the Dock overall. + - Per field in the [field settings](control-panel/field-manager/edit-field.md) + - By the user on the front-end [via the Dock](advanced-usage/front-end/dock.md#edit-toggle), by toggling Edit Mode on/off. + - In the [Template Settings](control-panel/template-manager.md#settings) of an [individual template](/troubleshooting/front-end-content-management.html#dock-shows-everywhere-while-front-edit-links-only-show-some-places) + - In the template by using [ExpressionEngine template comments](#expressionengine-comment), [HTML comments](#html-comment), or the [`disable` field parameter](#field-tag-parameter) + - By granting or removing editing access to a user role -There are several ways to disable front-end editing links: - - Globally with [configuration overrides](/general/system-configuration-overrides.md#enable_frontedit_links) or in [General Settings](/control-panel/settings/front-end-editing.md#enable-automatic-front-end-editing-links) - - Per field in the [field settings](control-panel/field-manager/field-manager-settings.md) - - Via the Dock on the front-end by toggling Edit Mode on/off. - - In the template by using [ExpressionEngine template comments](#expressionengine-comment), [HTML comments](#html-comment), or [field parameter](#field-tag-parameter) +### Enable/Disable the Front Edit Link in the Template -### Enable/Disable Front Edit Link in the template +#### Using ExpressionEngine Comments -#### ExpressionEngine Comment - -Anything content wrapped in `{!-- disable frontedit --} ... {!-- //disable frontedit --}` HTML comment will not have edit links in it. +Any content wrapped in these EE comments will not have edit links in it.

{!-- disable frontedit --}{title}{!-- //disable frontedit --}

-NOTE: **Hint:** If you need to disable front-end edit on large number of templates completely, you can wrap these comments around layout template. +NOTE: **Hint:** If you need to disable front-end edit on large number of templates completely, wrap these comments around content using a layout template. -#### HTML Comment +#### Using HTML Comments -Anything content wrapped in ` ... ` HTML comment will not have edit links in it. +Any content wrapped in these HTML comments will not have edit links in it.

{title}

-NOTE: **Hint:** If you need to disable front-end edit on large number of templates completely, you can wrap these comments around layout template. +NOTE: **Hint:** If you need to disable front-end edit on large number of templates completely, wrap these comments around content using a layout template. + +#### Field Tag Parameter -#### Field tag parameter -Use `disable="frontedit"` parameter on field tag to disable link for a certain field. +Use the `disable="frontedit"` parameter on a field tag to disable the edit link for a specific field. {page_content disable="frontedit"} -## Customizing The Link Location +## Customizing the Link -The edit link for each field can be placed manually using [**:frontedit** modifier](#frontedit) on the field or using the [**frontedit_link**](#frontedit_link) tag if you need to have a link in a different section of a template, custom styled, or you can even place a link for a field that is currently not on the page. +The edit link icon for each field can be output in another part of the HTML by using [**:frontedit** modifier](#frontedit) on the field tag. Or, by using the [**frontedit_link**](#frontedit_link) tag, you can have a raw link in a different section of a template which can be custom styled. You can also use this to place an edit icon or link for a field that is currently not on the page. ### `:frontedit` -Inside `{exp:channel:entries}` tag, using the field name postfixed with `:frontedit` will generate an edit link for that field within displayed entry. +Inside `{exp:channel:entries}` tag, using a field name postfixed with `:frontedit` will generate an edit link icon for that field, regardless of that field's usual setting. -You may find it useful if `disable_frontedit_links` configuration override is set and you need to place the links individually. +This is additionally useful if `disable_frontedit_links` configuration override is set and you need to place the links individually. Example usage: @@ -108,10 +110,10 @@ Can be used to place edit link in arbitrary place (also outside or `exp:channel: | Parameter | Description | | ---------- | ----------- | | entry_id | ID of entry to edit. Required. | -| field_name | Short name of field to edit. Required, unless `field_id` is specified. | -| field_id | ID of field to edit. Required, unless `field_name` is specified. | -| site_id | Extra CSS class to apply to link HTML. | -| class | Extra CSS class to apply to link HTML. | +| field_name | Short name of field to edit. Required unless `field_id` is specified. | +| field_id | ID of field to edit. Required unless `field_name` is specified. | +| site_id | Required when using MSM and a field name that is not unique. | +| class | Extra CSS class to apply to link. | Example usage: @@ -124,8 +126,17 @@ Example usage: {frontedit_link entry_id="{entry_id}" field_name="page_content" class="extra-styles"} +## Conditional Tags + +### `{if frontedit}` + +```{if frontedit} content {/if}``` + +This conditional will display content if front-end editing is enabled overall for the current user. + ### Label Custom Front-end Edit Links -When using custom links, it may be useful to label these links for the user. One way of accomplishing this is by using the special [`{if frontedit}` conditional](#if-frontedit) + +When using custom edit links, it may be useful to label these links for the user. One way of accomplishing this is by using the special [`{if frontedit}` conditional](#if-frontedit) Example: @@ -134,7 +145,8 @@ Example: ``` ## Reinitialize ExpressionEngine Pro Javascript -There may be times, such as when using AJAX, that page content is loaded after ExpressionEngine Pro has been initialized on a page. When this happens edit links may not work or even render. To fix this, you need to included `EE.pro.refresh();` in your script. + +There may be times, such as when using AJAX, that page content is loaded after ExpressionEngine Pro has already initialized on a page. When this happens, edit links may not work or even render. To fix this, you can include `EE.pro.refresh();` in your script. Example usage: diff --git a/docs/control-panel/template-manager.md b/docs/control-panel/template-manager.md index 3cadca503..0505e4dbc 100755 --- a/docs/control-panel/template-manager.md +++ b/docs/control-panel/template-manager.md @@ -70,6 +70,7 @@ The Template Notes tab enables you to save notes and information about your temp - **Allow PHP?** -- Here you specify whether or not the Template will parse PHP expressions. If the preference is set to "no", then any PHP in the Template will be output as plain text. - **PHP Parsing Stage** -- If the previous preference is enabled, this sets whether PHP is parsed on "input" or "output" in the Template. See [Using PHP in Templates](templates/overview.md#php-in-templates) for more information. - **Hit Counter** -- If you wish to manually revise the hit counter for a Template you may do so. +- **Enable front-end editing?** -- If you are running EE Pro, you can enable or disable [front-end editing links](advanced-usage/front-end/frontend.md) on a per-template basis. By default it is enabled. ### Access