Controlling Page Structure

Depending on how much control editorial staff are allowed over the details of section page layout, the structure defined in the layout-group resource may either be very close to the physical layout of section pages, with area/group names that reflect rows, columns of different widths, page positions and so on, or may not reflect the layout at all and have area/group names that just reflect logical categories ("Top stories", "Features" and so on).

Whichever "style" you use, there is no automatic, direct relationship between the structure you define in the layout-group resource and the pages displayed on the web site: what gets displayed on the site is determined by the presentation layer software and how it chooses to interpret the layout information provided to it. The layout-group structure provides a mechanism by which editorial staff can, to a greater or lesser degree, specify layout requirements. The presentation layer software is then responsible for interpreting those requirements and producing the final pages.

The root element of the layout-group resource must be a groups element, which may contain one or more child group elements. A group may contain one or more area elements. The groups and areas are displayed as nested rectangles on CUE section pages, the areas being drop zones for stories. Editorial staff desk stories on a section page in CUE by dropping them in the areas of their choice.

Areas can contain references to groups, allowing the CUE user to build complex nesting structures representing multi-column layouts if required.

Here is a very simple layout-group that defines just two areas, one called Top story and one called Main stories:

<groups xmlns="http://xmlns.escenic.com/2008/layout-group"
        xmlns:ct="http://xmlns.escenic.com/2008/content-type"
        xmlns:ui="http://xmlns.escenic.com/2008/interface-hints">
  <group name="front" root="true">
    <area name="top">
      <ui:label>Top story</ui:label>
    </area>
    <area name="main">
      <ui:label>Main stories</ui:label>
    </area>
  </group>
</groups>

The group element's root="true" attribute indicates that this is a root layout group - that is, a group that defines an entire section page layout. group elements without this attribute are only used if they are referenced in an area element.

If the groups element contains more than one group element with root="true" set, then these groups represent alternative page layouts, and the CUE user can select which layout is to be used on a particular section page. This choice is made using the Current layout option displayed in the General info section of the CUE metadata panel.

area elements can be given labels using the ui:label element, in the same way as panels and fields can be labelled in the content-type resource. If specified, these labels are used in CUE. If no label is specified for an area, then CUE uses its name attribute instead. Since the label element belongs to the interface-hints namespace rather than the layout-group namespace, the name must include a prefix declared on the groups root element (xmlns:ui="http://xmlns.escenic.com/2008/interface-hints" in the example shown above).

CUE users can desk whatever content they like in the Top story and Main stories areas. You can, however, limit the allowed content types for an area by adding an allow-content-types element:

<groups xmlns="http://xmlns.escenic.com/2008/layout-group"
        xmlns:ct="http://xmlns.escenic.com/2008/content-type"
        xmlns:ui="http://xmlns.escenic.com/2008/interface-hints">
  <group name="front" root="true">
    <area name="top">
      <ui:label>Top story</ui:label>
      <allow-content-types>
        <ref-content-type-group name="content"/>
      </allow-content-types>
    </area>
    <area name="main">
      <ui:label>Main stories</ui:label>
    </area>
  </group>
  <content-type-group name="content">
    <ref-content-type name="story"/>
    <ref-content-type name="video"/>
  </content-type-group>
</groups>

Now CUE will only allow content types specified in the content-type-group called content to be dropped in the Top story area.

The following example shows a more complex section page design in which the area names indicate something about their location on the page:

<groups xmlns="http://xmlns.escenic.com/2008/layout-group"
        xmlns:ct="http://xmlns.escenic.com/2008/content-type"
        xmlns:ui="http://xmlns.escenic.com/2008/interface-hints">
  <group name="main" root="true">
    <ui:label>Main stories</ui:label>
    <area name="top">
      <ui:label>Top</ui:label>
    </area>
    <area name="rightcolumn">
      <ui:label>Right Column</ui:label>
    </area>
    <area name="center">
      <ui:label>Center Column</ui:label>
      <ref-group name="two-col"/>
      <ref-group name="three-col"/>
    </area>
  </group>
  <group name="two-col">
    <area name="left"/>
    <area name="right"/>
  </group>
  <group name="three-col">
    <area name="left"/>
    <area name="center"/>
    <area name="right"/>
  </group>
</groups>

If an area contains ref-group, elements, this indicates that it may contain subdivisions (the children of the referenced groups). The CUE user can insert the referenced groups into the area by right-clicking on the area and selecting the required group from the displayed menu. In the case of the Center Column area in the above example, the user can insert two-col and three-col groups as well as (or instead of) desking content items in the area. The user can insert any number of such groups into the area, in any combination.