Layout and Design
The Content Management System provides for numerous ways to structure your content and page layouts. This page provides an overview of the content layout features you have available for designing your pages.
There are two distinct methods for formatting your HTML output. Firstly, individual content objects have a formatting system that determines how the information in that single content object is organized and presented. Secondly, web pages have a templating system that determines how you combine multiple content objects into a complete web page.
Content Formatting
Every content object has an HTML representation, even if the content is not HTML to start with. If the content is not HTML to begin with, it will simply be converted to HTML by encoding the content using an appropriate HTML tag. This usually results in simple HTML representations—typically a single tag. For example, images will be encoded as img tags, and stylesheets can be encoded using either a style tag for inline CSS or a link tag for an external stylesheet. Even if the content is a weird type that has no way to embed in a web page, it can always be encoded as a link that will allow the visitor to download the content as a file.
Content that is already HTML to begin with is generally more complicated, since that HTML can have a lot of words and a lot of structure. It can be handled two ways:
- It can simply be echoed to the page. This is called free-form content, since the CMS has no rules or constraints on the HTML encoding. The content comes out exactly as you entered it.
- It can be formatted, so that it adheres to a more strict layout. Formats have specific rules for where things like titles and images are positioned, so that similar content objects all have a consistent presentation.
General-purpose content is usually free-form, while more specialized content types are usually formatted. For example, if you add a page to your website, the page will accept free-form content by default because pages are unspecific in their purpose. But if you add a more specialized content type (such as an event or product) to your website, the content will be displayed in a specific format that is tailored to that content type.
Content formats consist of HTML markup mixed with various merge codes that are replaced with information specific to that content object. This is best illustrated with an example. Here is the default format for an article (such as would be posted in a news area or a blog):
[[navpath]] <div class='article clearfix'> <h1 id='article[[id]]' class='articleTitle'>[[title]]</h1> <div class='articleAbout'>[[info]]</div> [[?meta_abstract]]<div class='articleAbstract'>[[meta_abstract]]</div>[[/?meta_abstract]] [[image]] <div class='articleBody'>[[html]]</div> [[?meta_footnote]]<div class='articleFootnote'>[[meta_footnote]]</div>[[/?meta_footnote]] [[tags]] [[tools]] </div> [[index]] <div style='clear: both;'></div>
As you can see, the merge codes in double-brackets define what information gets inserted at what points in the format. This example makes use of the following merge codes:
navpath- this is a navigation bread-crumb that shows where you are in the web site.id- this is the numeric content ID of the article. This gives each article a unique HTML element ID, in case you want to apply CSS rules or JQuery actions to specific articles only.title- this is the title of the article.info- this shows a brief bit of auxiliary information about the content; in the case of articles, it will show a byline, which is typically the author and posting date.meta_abstract- this will display an abstract, introduction, or summary of the article, if one exists. It is wrapped in conditional tags so that if there is no abstract, the container div will also be excluded.image- if the article has an image, its mark-up will be inserted into the format here.html- this is the main body of the article, which is free-form HTML.meta_footnote- as with the abstract, a separate footnote section will be appended to the article if it exists.tags- if the article has been tagged with any keywords or topics, those will be mentioned here.tools- these are other links or tools that the user can use to interact with the content. For articles, this may include the ability to read or post comments, or to share the article on social media.index- this is an index to related content. This could include attachments or other files, or an index of comments and feedback.
There are many other merge codes that are available to you, as well as specialized merge codes for inserting information conditionally.
The CMS is preconfigured with default formats that are suitable for most purposes, but you can override these formats with your own if you want to. For example, you can change the formats to add extra HTML markup, different CSS classes, move the elements around to different positions, or re-code them to make use of one of the many responsive design frameworks out there.
To change the format that is used by a content type, add a line to your system configuration file, exsite.conf, like the following:
content.format.article = ...
Replace "article" with the content type you are reformatting. You can also change summary views used in content listings and indexes by appending _summary to the content type. For example, to change how news articles appear in news listings:
content.format.article_summary = ...
Summary views usually contain a link to url, which will go to the full view of the content.
More information on content formats can be found here: Formatted Views.
Block & Panel Layouts
Blocks and panels are useful formatting tools that allow you to get some of the benefits of structured layouts and strict formatting with general-purpose content that does not otherwise have a specialized function.
Blocks and panels are box-like containers that can easily be tiled or stacked on the page for tidy, symmetric layouts. The basic idea is illustrated with this diagram:
As shown here, panels are small visual containers that will tile horizontally across larger screens. Blocks are larger full-width containers that will stack vertically, but can contain rows of panels within them. Other than these layout differences, blocks and panels are similar. They have titles, some text, an image, and an action or link.
Each box, whether a block or a panel, represents a single content object, and can therefore be constrained to a specific layout using the formatting methods shown above. The CMS can manage multiple block and panel formats concurrently, so it will support a fair amount of diversity in your designs.
Blocks and panels are very flexible, and can be used for both general purpose content, and for specialized content types. Their main limitations are:
- panels are constrained in size, and will not accept large amounts of text without breaking the bounds of the box
- integrated images have specific size or aspect ratio requirements if you want them to tile and align consistently with their neighbours
- they only support a limited number of actions
But a surprising amount of content can be fit into these limitations, so it is a popular and useful presentation style. They work very well as previews or teasers, where their limited space for text is a benefit rather than a drawback, and their limited support for actions is easily turned to linking through to the full content that is being teased.
More information on block and panel layouts can be found here: Blocks & Panels.
Page Templates
The documentation above relates to the formatting of individual content objects. After the formatting of the content is complete, you will have an HTML snippet, but not a complete HTML document. That content snippet then needs to be "dressed up" in rest of the website's design, which can include headers, footers, sidebars, navigation, and more. The full web page will involve combining the HTML for numerous content objects together into a coherent whole, and that requires the use of a whole other templating system.
HTML documents (web pages)
Broadly speaking, web pages are complete HTML documents that are delivered to the viewer's web browser. They are complete in the sense that they are made up of a head and a body, wrapped in an html element, and preceded by a DOCTYPE declaration:
<!DOCTYPE html> <html lang="en"> <head> <!-- the head contains metadata, script, font, and stylesheet info --> </head> <body> <!-- the body contains the actual content being shown to the user --> </body> </html>
The HTML body may in turn have its own complex structure consisting of headers, footers, sidebars, navigation, and its own distinct concept of a body—the important content that the user is there to read. It may include images, videos, and other embedded content. The specifics will vary depending on how the page is designed and what it is trying to show.
The examples we show will all use HTML5, but in practice you can output any HTML standard you care to use.
Templates
Content objects that are meant to represent or generate entire web pages are called templates, or have a display type of "template". When examined at the source level, these template content objects have a structure like the above, namely a DOCTYPE, html element, a head and a body.
Template content is the starting point for generating a web page. From there, the CMS inserts other content objects into the template to "expand" it to a complete document. Every content object has two representations—URL and HTML—and can be inserted into the template in either of those two ways.
To embed a content object into a template by referencing it's URL, use [ [ NAME ] ].*
To include a navigable URL in a template, use { { NAME } } instead. These URLs are more user-friendly than the previous format, and should always give you a nicely formatted web page.
To embed a content object's HTML into your template, use < !--content(NAME)--> which will insert the named content as free-form HTML. Alternatively, use < !--panel(NAME)--> to insert a panel or block, or < !--widget(NAME)--> to insert a widget (such as a popup or blindbox).
Special plug-in apps can be used to generate special content, using a tag like < !--&Module(options)-->.
Lastly, you can insert content metadata directly into the document using < !--$meta-->, where meta can refer to a variety of metadata values, including title, description, author, and more.
* extra spaces have been inserted in these examples so that the support site CMS does not try to actually process these tags. See the example below for correctly formatted examples.
Example Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title><!--$title--></title>
<link rel="shortcut icon" href="[[favicon]]">
<link rel="canonical" href="<!--$link-->">
<link href="[[stylesheet]]" rel="stylesheet">
</head>
<body>
<header class="header-inside">
<!--content(navbar)-->
</header>
<div class="container maincontent">
<!--&SimpleMenu(path)-->
<!--content(body)-->
</div>
<footer>
<div class="container">
<div class="row">
<!--content(footer)-->
</div>
</div>
</footer>
</body>
</html>
Notes
- note the use of title and link to insert metadata into the HTML
- two content objects are referenced by URL - favicon and stylesheet
- three content objects are inserted as HTML - navbar, body, and footer
- one plug-in application is inserted - SimpleMenu, which has been asked to return us a path menu
The process of taking the starting template, and inserting the HTML and URLs of other content objects, is called content expansion. This process is recursive; the HTML that gets inserted into the template can itself contain references to other content objects in the same way. For example, the navbar content referenced in the above example could itself include logos and other business graphics, and the footer could be broken down into more specific content objects for contact information, footer menus, and social media links.
Content expansion continues until there are no more CMS tags that need to be expanded. At that point the page generation is complete, and the output can be sent to the viewer.