Page Tagging

Overview

Page tagging refers to a specific type of markup used within the OU Campus  framework. OU Campus-specific tags are used to create regions on a page that can be edited by users, but specific tags or elements also have other functionality such as adding a date/time stamp to a page, adding a DirectEdit button, using MultiEdit, or defining page properties.

The OU Campus tags are not visibly rendered on a published page, but are seen in code view on staging. They are typically found in the code view of a PCF as well as the TMPL (or an XSL) involved in creating that PCF. They can also be found in a TCF, for example as the element that defines the page properties.

Within the site record is a setting that allows for all styles of OU Campus tags to be removed on publish. This is accessible to a Level 10 administrator from Setup > Sites > Publishing > Remove OU Tags.

Page Tagging Syntax

Page tagging syntax for OU Campus has evolved from the comment-style tags to an OUC style, and also includes a transitional style. The change in style provides greater XML compliance and allows the OU Campus tags to be represented as valid XML nodes. All three types of markup are supported by the CMS.

Prior to the 9.15.10 release of OU Campus, the page tagging syntax used exclusively was the "com-dot-omniupdate" style, which is in the form of HTML comments. For example:

<!-- com.omniupdate.div --><!-- /com.omniupdate.div -->

Implementations after the 9.15.10 release, for the most part, utilize the OUC tagging style. This might also be referred to as the "node" style or as "short tags." While the comment style continues to be supported, the preferred form of the XML element syntax for new implementations is:

<ouc:div></ouc:div>

There is an intermediary form of the tag that may also be seen in some implementations:

<!-- ouc:div --> <!-- /ouc:div -->
and the self-closing version:
<!-- ouc:xxx / -->

The change in style to the new form of the XML element allows an XSD file to be used to validate elements and attributes. The XSD file outlines the schema (attributes, elements, as well as their formats) for each OUC specific tag; for example, properties, div, editor, multiedit, etc.

Now XML validators and integrated development environments (IEDs), like <oXygen/> XML Editor have access to a list of all attributes for the tags. Additionally, the XML elements allow developers to use inline styling and JavaScript for buttons.

The use of predefined GIF images used for buttons to label an editable region is no longer required, as there is a new button attribute that can be used.

Page Tagging Basics

Each XML element includes a start tag and end tag, or can also be self closing.

Start Tag

The start tag denotes the beginning of an element; for example, one that defines an editable region within OU Campus. Each OUC tag can take attributes specific to the tag. The editable region can contain attributes that define the following:

  • The label for the region that is required and the value of which must be unique to the page
  • The group that can edit the region
  • The button class that defines the styling for the button that labels the editable region
  • Button text attribute that defines the text for the button label
  • A border color that surrounds the region
  • Padding between the border (mentioned above) and the content within the region
  • A background color for the region
  • A line break to separate the button from the beginning of the region
  • A few other attributes

The syntax for the start tag for an editable region is:

<ouc:div>

An example of a div tag with frequently used attributes is:

<ouc:div label="sidecontent" group="Everyone" button-class="oucEditButton" button-text="Side Content" break="break">

Colloquially, these are referred to as "div" tags and wrap around certain chunks of code on a page to turn those areas into editable regions. Note that they must have an end tag or be self-closing.

For more information, including a complete list of tags, supported attributes, and default values, visit the Page Tagging Reference page.

End Tags

The end tag ends an XML element and in the example of the div tag (editable region tag) specifically indicates where the editable region ends. End tags typically do not contain attributes. The closing tag for the div element is:

</ouc:div>

Self-Closing Tags

In the example of the div tag, there is an optional editor tag that can be encapsulated by the div element. The editor tag is an example of a self-closing element. If it is included, it can contain attributes that determine the following:

  • The wysiwyg-class attribute that can be used to provide WYSIWYG styling depending upon the portion of the page to which it is specific
  • The path to the CSS stylesheet to be used by the WYSIWYG Editor while a user is editing this region
  • The path to the text file that contains a list of styles and whether they are block-level or not. This is displayed in the WYSIWYG Editor's Styles drop-down menu
  • How wide the editor should appear to be
  • Several other attributes that are not as commonly used

An example of the <ouc:editor> tag that follows the example of the above div tag is:

<ouc:editor wysiwyg-class="maincontent" csspath="/_resources/ou/editor/sidenav.css" cssmenu="/_resources/ou/editor/sidenav.txt" width="955" />

WYSIWYG Auto-updating

The tags for two elements are auto-updated in current implementations of the OU Campus system. The editor and multieditor tags are converted to the transitional style tagging. For example, when within an editable region in the WYSISYG Editor, saving will generate the intermediary style tag for the editor element for that area. Viewing code within OU Campus shows the tagging style. For example:

<!-- ouc:editor / -->