Creating and applying custom edit layouts

Applying edit layouts on the layout manager

The layout manager asset

The layout manager allows you to apply edit layouts to assets on a system-wide basis and is located under the system management folder in the asset tree, as shown in the figure:

When you apply an edit layout in the layout manager, it will be used across all sites within the system.

Management of edit layouts is done on the Details screen of the layout manager. For more information on the History and Logs screens, refer to the Asset screens manual.

You can also apply edit layouts to different root nodes within the system on an asset’s Layouts screen. For more information, refer to the Applying edit layouts on the layouts screen chapter in this documentation.

Details screen

The Details screen of the layout manager is shown in the figure: For more information on the Status, Future status, and Thumbnail screen, refer to the Details screen chapter in the Asset screens manual.

CSS settings

This section allows you to disable the formatting applied to the inline edit mode to make it look similar to the administration interface. The CSS settings section of the Details screen is shown in the figure:

The CSS settings section of the details screen

By disabling this option, you will have greater flexibility over the formatting of the inline edit mode. By default, Output edit CSS file is set to Yes, meaning that the formatting will be used.

Edit layouts

This section allows you to select which edit layouts to use for a particular asset type. By default, no information will appear, as shown in the figure:

The edit layouts section

Once you have selected an asset type in the add a layout section, the fields shown in the figure will appear.

The edit layouts section

Each asset type that is selected will appear in a blue heading. For example, in the previous figure, the standard page asset type has been selected; hence page standard appears in a blue heading.

  1. In the Add a layout for screen list, select the screen you want to apply a layout to

  2. Click Save. For example, if you have created an edit layout for the Metadata screen, select Metadata from the list.
    If you have only created one edit layout for the asset type, select Details from the list.
    Additional fields will appear on the screen, as shown in the figure:

    The edit layouts section
  3. Select the Edit layout in the Layout section.

  4. Click Save. The layout will now be used in the inline edit mode for the selected asset type.

An edit layout will only be visible if a design has been applied to the asset. If the edit layout does not appear, a design may not have been applied. For more information on applying a design, refer to the Settings screen chapter in the Asset screens manual.

Once you have applied an edit layout, you do not need to reapply if you make a change to the layout. The inline edit mode will be automatically be updated with the changes.

To remove a screen for an asset type:

  1. Click the Remove field.

  2. Click Save.

To remove an asset type:

  1. Select the Remove customizations option under the blue heading.

  2. Click Save.

Add a layout

This section allows you to select which asset types to which you want to apply an edit layout.

  1. Select the asset types from the list provided.

  2. Click Save. For example, if you have created a layout for the standard page, select Standard page from the list.

    Additional fields for that asset type will appear in the edit layouts section.

  3. To select multiple asset types at once, click the More…​ button. An additional list will appear on the screen.

Applying edit layouts on the layouts screen

The Layouts screen allows you to apply edit layouts to root nodes, overriding any edit layouts that have been applied on the layout manager. This function allows you to create individual layouts for the different sites in your system.

An example Layouts screen configuration for a site is shown in the figure:

The edit layouts section of the layouts screen

An Edit layout has been applied for the Details screen of all standard page assets in the site.

For more information on applying edit layouts on the layouts screen, refer to the Layouts screen chapter in the Asset screens manual.

Creating and applying edit layouts

To understand how to create and apply edit layouts, consider the following examples.

Using one edit layout

We want to create a layout for the inline edit mode that allows the user to edit a standard page and fill out the metadata fields. As workflow is applied to the assets, they need to change the status to safe edit and apply for approval. This should all be shown on one page.

Creating the edit layout

An edit layout is created, and the layout is entered onto the edit contents, as shown in the figure:

The WYSIWYG editor on the edit layout

The Details screen’s status section is shown in the first, followed by the edit contents screen and then the metadata fields. The Save button is added at the bottom of the page to save their changes. Instructions on how to use each part of the screen and a heading are also added.

If there are fields on the screen that only certain users should see, create a new division and add them to that division. You can then modify the permissions for that division so that only certain users see those fields in the inline edit mode.

Applying the edit layout

The edit layout now needs to be applied to the standard page for the system. To do this, follow the steps outlined here:

  1. On the Details screen of the layout manager, select Standard page in the add a layout field.

  2. Click Save. Additional fields will appear in the edit layouts section.

  3. Select Details in the Add a layout for screen list.

  4. Click Save.

  5. In the grey box, select the Edit layout in the layout field.

  6. Click Save. The layout will now be applied to all standard page assets in the system.

Viewing the edit layout

The figure shows what the edit layout will look like in the inline edit mode. To access the inline edit mode, add /_edit onto the end of the URL.

The new edit layout on the inline edit mode

Using multiple edit layouts

We want to create a layout similar to the layout in the previous example. This time, however, we want to split the screens up and add the Preview screen.

Creating the edit layouts

The layout asset

Four edit layouts are created in the asset tree, as shown in the figure: On each of these layouts, the required fields and instructions are added.

An example of one of these layouts is shown in the figure:

The WYSIWYG editor on the edit layout

Applying the edit layouts

The edit layouts now need to be applied to the standard page for the system. To do this, follow the steps outlined here:

  1. On the Details screen of the layout manager, select Standard page in the add a layout field.

  2. Click Save. Additional fields will appear in the edit layouts section.

  3. Select Details in the Add a layout for screen list.

  4. Click Save. In the grey box, select the Details screen layout for the Details screen in the layout field.

  5. Click Save.

  6. Repeat steps 2 and 3 and apply the Edit contents screen layout to the Contents screen, the Metadata screen layout to the Metadata screen, and the Preview screen layout to the Preview screen. The edit layouts section should look similar to the figure:

The edit layouts section of the layout manager

Viewing the edit layouts

The figure shows what the inline edit mode will look like for the Edit contents screen. To access the inline edit mode, add /_edit onto the end of the URL.

The edit contents screen in the inline edit mode

The user can navigate to other screens by using the screen menu at the top.

© 2015- Squiz Pty Ltd