Page Template Examples
- Download Examples
- Example 1 - Basic Page Template
- Example 2 - No Title Element
- Example 3 - Multiple Content Elements
- Example 4 - Menus
- Example 5 - Sidebar & Breadcrumbs
- Example 6 - Page Properties
- Example 7 - Header Background Image
Download Examples
All the Page Template Examples are available as a jsHarmony CMS Theme. You can download the theme using the button above and extract it into a site SFTP folder to install. A video tutorial for installing templates can be found in Getting Started Tutorial 1.
Example 1 - Basic Page Template
Each page template should have a "cms-page-config" tag with a "title" property that defines the name of the template.
The page's title can be made editable by adding a "cms-title" tag to the title element.
The page's content can be made editable by adding the "cms-content-editor" tag to the content element.
<html>
<head>
<cms-page-config>
{
"title": "01 Basic Template"
}
</cms-page-config>
</head>
<body>
<h1 cms-title>Page Title</h1>
<div cms-content-editor="body">Page Content</div>
</body>
</html>Example 2 - No Title Element
If a page template has no title element, set the Page Config "title_element_required" property to false.
<html>
<head>
<cms-page-config>
{
"title": "02 No Title Element",
"options": { "title_element_required": false }
}
</cms-page-config>
</head>
<body>
<div cms-content-editor="body">Page Content</div>
</body>
</html>Example 3 - Multiple Content Elements
By default, each page has one Content Element named "body". Change this behavior by overriding the Page Config "content_elements" property:
<html>
<head>
<cms-page-config>
{
"title": "03 Multiple Content Elements",
"content_elements": {
"col1": { "type": "htmleditor", "title": "Column 1" },
"col2": { "type": "htmleditor", "title": "Column 2" }
}
}
</cms-page-config>
</head>
<body>
<h1 cms-title>Page Title</h1>
<div style="display:flex;">
<div cms-content-editor="col1" style="width:50%;">Column 1</div>
<div cms-content-editor="col2" style="width:50%;">Column 2</div>
</div>
</body>
</html>Example 4 - Menus
In order to add a header or footer menu to a Page Template:
- Open the Menus tab and add items to the menu. If creating a theme, you can define required menus in the Site Config.
- Add a Component for rendering the menu to the site's "templates/components" folder. In this example the name of the Component is "topmenu". The component is included in the Page Template Examples download.
- Use the "cms-component" and "cms-menu-tag" attributes to add the menu to the Page Template. The Menu Tag can be found on the Menus tab.
<html>
<head>
<cms-page-config>
{
"title": "04 Menus"
}
</cms-page-config>
</head>
<body>
<div cms-component="topmenu" cms-menu-tag="main"></div>
<h1 cms-title>Page Title</h1>
<div cms-content-editor="body">Page Content</div>
</body>
</html>Example 5 - Sidebar & Breadcrumbs
Install the Breadcrumbs and Sidebar components into the site's "templates/components" folder, and then use "cms-component" attributes to render those components in the Page Template.
In this example, the Breadcrumbs component is named "breadcrumbs", and the Sidebar component is named "sidebar". The components are included in the Page Template Examples download.
<html>
<head>
<cms-page-config>
{
"title": "05 Sidebar & Breadcrumbs"
}
</cms-page-config>
</head>
<body>
<div cms-component="breadcrumbs""></div>
<h1 cms-title>Page Title</h1>
<div style="display:flex;">
<div cms-component="sidebar" style="padding-right:10px;"></div>
<div cms-content-editor="body">Page Content</div>
</div>
</body>
</html>Example 6 - Page Properties
Define the page properties in the Page Config "fields" section, and then apply the page properties to the template using the "cms-onRender" attribute and the Render Functions.
<html>
<head>
<cms-page-config>
{
"title": "06 Page Properties",
"properties": {
"fields": [
{ "name": "showTitle", "caption": "Show Title", "control": "checkbox", "default": "Y", "controlparams": { "value_true": "Y", "value_false": "N" } },
{ "name": "bodyClass", "caption": "Body CSS Class" },
{ "name": "bodyStyle", "caption": "Body CSS Style" }
]
}
}
</cms-page-config>
</head>
<body cms-onRender="addClass(page.properties.bodyClass); addStyle(page.properties.bodyStyle);">
<h1 cms-title cms-onRender="showIf(page.properties.showTitle!='N');">Page Title</h1>
<div cms-content-editor="body">Page Content</div>
</body>
</html>Example 7 - Header Background Image
Page Properties can also use the "media_browser" control to allow the user to select an item from the Media Library. The example below allows the user to select a customizable background image.
<html>
<head>
<cms-page-config>
{
"title": "07 Header Background Image",
"properties": {
"fields": [
{ "name": "headerBackground", "caption": "Header Background", "control": "media_browser"}
]
}
}
</cms-page-config>
</head>
<body>
<div cms-onRender='addStyle("background-image:url("+JSON.stringify(page.properties.headerBackground||"/images/default_background.jpg")+");");'>
<h1 cms-title>Page Title</h1>
</div>
<div cms-content-editor="body">Page Content</div>
</body>
</html>
