Defining Section Page Layouts

Go to your application server's web applications folder, then find and open temp-dev/META-INF/escenic/publication-resources/escenic/layout-group in a text editor.

You should see the following code:

<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="news" root="true">
    <ui:label>News</ui:label>
    <area name="header">
      <ui:label>Header</ui:label>
      <ui:description>Content placed here will appear at top of page</ui:description>
      <ct:options scope="current">
        <ct:field type="enumeration" name="news-area-background">
          <ui:label>Area background</ui:label>
          <ui:description>Changes the area background</ui:description>
          <ct:enumeration value="white">
            <ui:label>white</ui:label>
          </ct:enumeration>
          <ct:enumeration value="blue">
            <ui:label>blue</ui:label>
          </ct:enumeration>
          <ct:enumeration value="red">
            <ui:label>red</ui:label>
          </ct:enumeration>
        </ct:field>
      </ct:options>
      <ct:options>
        <ct:field type="enumeration" name="border">
          <ui:label>Style</ui:label>
          <ui:description>Sets the style of the header</ui:description>
          <ct:enumeration value="border: 1px solid black;">
            <ui:label>Border</ui:label>
          </ct:enumeration>
          <ct:enumeration value="border: 5px solid black;">
            <ui:label>Fat Border</ui:label>
          </ct:enumeration>
          <ct:enumeration value="background: #F55;">
            <ui:label>Red Background</ui:label>
          </ct:enumeration>
        </ct:field>
      </ct:options>      
    </area>
    <area name="rightcolumn">
      <ui:label>Right Column</ui:label>
      <ui:description>Content placed here will appear in the right column</ui:description>
    </area>
    <area name="center">
      <ui:label>Center Column</ui:label>
      <ui:description>Content placed here will appear in the Center column</ui:description>
      <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>

This specifies that:

• There is one layout group available for structuring section pages, called news.

• It contains three areas called header, rightcolumn and center.

• The header area has two sets of options that can be set in Content Studio. The "Area background" option applies to the whole area, while the "Style" options applies to the individual content items placed in the area. For more information about this, see options.

• The center area in section pages that use the news layout can be subdivided by inserting two-col and/or three-col groups using Content Studio.

If you start Content Studio, log in to the temp-dev publication and open the New Articles section's active section page, then you will see this structure reflected in the displayed editor:

The section page contains three areas called Header, Right Column and Center Column. If you right-click on Center Column, then the displayed menu's Insert option will show a submenu with the options Insert new Two-col group and Insert new Three-col group. At the top of the section page editor is a combo box field with the name Section page descriptor containing the name of this layout group (News). If you click on the combo box, you will see that News is the only possible value for the field - no other layout group is available.

To make an alternative layout, copy the news group in the layout group resource, rename it and simplify it by deleting a few elements as follows:

  <group name="simple" root="true">
    <ui:label>Simple</ui:label>
    <area name="header"/>
    <area name="center">
      <ui:label>Center Column</ui:label>
      <ui:description>Content placed here will appear in the Center column</ui:description>
      <ref-group name="two-col"/>
    </area>
  </group>

Upload the modified layout-group resource as described in Creating/Updating Publication Resources. Then restart Content Studio and open the New Articles section's section page again. Select the Section page descriptor combo box again. This time it should contain a second option, Simple. If you select Simple then you will see that the section page structure displayed in the section page editor is simplified accordingly:

It is the group element's root attribute that determines whether or not a group can be used as a section page layout. The groups two-col and three-col do not appear in the Section page descriptor combo box's list because their root attributes are not set to true.