Anatomy of an OrchestraCMS Page

Here’s an example of a typical, simple web page. On the left is the Contact Us page for Stantive Technologies Group. On the right is an abstract view of its main page areas.

The common header and footer parts of the page, as well as the main content area, are fairly easy to spot in the image on the left. We have also identified the part of the page that shows the breadcrumb path to the current page in the site page hierarchy. As shown here, the breadcrumb markup lives inside a div that has a particular CSS class name.

If we drill down to look at the structure within the <header> element we would find markup that might look something like this:

Here we see that the header element is divided into four distinct container elements, each holding distinctive markup suited for a specific purpose:

• An image wrapped by an anchor (hyperlink) element
• A text-based hyperlink
• A text box and button that clearly work together to provide a search interface
• The main navigation menu, structured as an unordered list

These container elements, bolded in the above diagram, are part of the markup that defines the page skeleton. They each delineate a special-purpose focus area for the page. For example, the main navigation menu should only be put in one place on the page, and the same is true of everything else in the header.

The OrchestraCMS page template is a Visualforce page, constructed largely of standard HTML markup, with content panels strategically placed within. The bolded container markup in the above diagram is part of this page skeleton that defines the layout for this particular page template. Within this skeleton will be a series of content panels that allow the content author to add one or more pieces of content. For these header panels, that would look something like the following (for simplicity, this diagram omits several standard attributes from the cms:panel components):

Content Panels

11 different content panels are drawn over top of the page content rendered within them. (Remember, these are OrchestraCMS content panels, not content items. Also, the numbers are simply a notational convention for the purpose of this diagram.)

Header

• Content panels 1 – 4, as discussed above

Breadcrumbs

• Content panel 5

Main

• In this page design, the single content panel 6 is used to hold the main content for the page

Footer

• Within the footer area of this page we find multiple content panels, 7 – 11

Content panels themselves exist only within the context of the OrchestraCMS page editor. They are not part of the markup that is delivered to  the web browser.

Content Items

This diagram shows the individual content items that have been added to the page. The content panels that contain these items are not illustrated here, just as they are not part of the final page.

What’s significant about this diagram:

• most of these content items live in their own, dedicated content panel
• content item D appears three times, in a different panel each time (and in each panel it is visually represented differently)
• the main content area is composed of three different content items E, F, & G, all added to content panel 6 from the previous diagram
• content items H & I are both in content panel 8

Same Content and Content Template, Different Appearance

In this example, we have content item D, which is the main navigation menu for the site. (The letters shown are just a notational convention for this diagram. OrchestraCMS lets you give descriptive names to each content item you create.) In the header, menu D is a familiar, interactive menu bar with nested menu items that appear in drop-down menus that appear when the top-most menu title is hovered over or clicked upon.

The main navigation menu is used again in the footer, where all of the second-level items are available without having to hover or click to reveal them. The difference between these two is a simple matter of CSS to style them differently, and perhaps a bit of JavaScript to manage the dynamic nature of the menu in the header.

In both cases, the very same content template (Class Styled Menu) is used and the markup is identical. But since they have different DOM container elements, the site’s CSS and JavaScript knows to treat them differently.

Multiple Content Templates per Content Item

One of the more powerful concepts of OrchestraCMS content is the fact that a content item may have multiple content templates associated with it. This means that one content item might be represented on the page in different ways for different purposes.

The main navigation menu (content item D) appears on this page in different places with two different content templates. When the Breadcrumb content template is used, the content author will select the current page (e.g. Contact Us) from the list of pages that are defined within the menu. (The current page becomes a page-specific property of the content item.)

Because it is the main navigation menu, the content item has access to all the site pages in the menu. However, the Breadcrumb content template doesn’t output all those page links, it just needs to show a path to the currently selected page: same content item, different content template for a different purpose, different markup.

Panel Restrictions: Maximum Number of Content Items per Panel

On this example page, several content panels have been configured to hold no more than one piece of content. This makes sense, because you do not want more than one corporate logo or more than one main navigation menu in the header. You want only one of each, and in its appropriate place.

Most page templates have at least one content panel that may hold multiple content items. In our example, content panel 6 within the <main> element is such a panel. It holds three separate pieces of content. E is the initial page welcome text and includes the main page title, “Contact”.  F is the text block that includes a two-column table of corporate locations. G is the “Connect with Us” data entry form. E and F could have been combined into one piece of content, but the content author for this site chose to create them as independent pieces of content.

The maximum number of content items per panel is configured by the developer when he or she creates the page template. Also, a content panel can remain empty. It is not unusual for a page design to provide content panels for which including content items is optional.

Panel Restrictions: Acceptable Content Templates

Each content panel may restrict the content templates that can be added to it. (This is optional, but is generally a best practice when the page’s content design is well defined.) Doing so enables OrchestraCMS to help the content author locate appropriate content for the panel. One or more content templates may be specified.

In our sample page, both content panels 6 and 8 have been configured to accept multiple content templates. Without going into further detail, it’s important to note that on this page, all the other panels would likely be restricted to a single content template (such as Class Styled Menu, Breadcrumb, Basic Search, or Image).

Content Types and Content Templates

To help manage a website’s content, content templates are organized into categories that OrchestraCMS calls content types.

• each content type has one or more content templates associated with it
• content templates are often unique to a given content type (but they do not have to be)
  • each content template can be associated with more than one content type
• OrchestraCMS provides several “core” content types out-of-the-box
  • examples of core content types include Text, Menu, Taxonomy, and Utility
• the website’s content manager can add or remove content templates from any of the core content types
  • for example, he or she might remove any content templates that he or she knows will never be used in the site, thereby making the user interface slightly simpler for the content authors
• the content manager can also create his or her own Custom Content Types: mostly this simply requires a distinct name and then one or more associated content templates
  • for example, to help organize a site’s content, one might create two custom content types named CEO Article and Blog Post; then, add the content template Article to each
  • in this way, all the article-type content in the site can be organized into separate, recognizable categories that the content authors work with day-to-day
  • also, the ability to work with specific content types can be controlled through OrchestraCMS user profiles