Getting started with Page Manager

For starters, I assume that you have managed to install the Page Manager. If not please read the installation instructions first and then come back here.

This document is about how to create new Page Manager powered website, but the same applies if you already have a site and want to integrate Page Manager with that.

To get started with Page Manager I recommend the following approach:

1. Create a single HTML page that looks what you want your site to look in general.
2. Define the user editable sections into that HTML file. See section description below.
3. Especially think what section should be common to all pages. Common navigation menu or page header, maybe?
4. Save this file and use it as basis for other pages.
5. Inform other users about Page Manager and tell them how they can create new pages by copying an old one.

Editable sections

Page Manager uses special section syntax in HTML files to separate user-editable content from the layouts and decorations.

Page Manager does not limit the structure of HTML pages, but for clarity use only basic HTML together with well-defined CSS classes and styles declared in separate CSS-file.

You can use this information as basis for building your own Page Manager enabled website. You can save this file into to you web directory and use Page Manager to modify it and test it.

Section Declarations

Section declarations have the following syntax:

		<site:[html|string|text|richtext|list] 
			id="[section id]" 
			params="[section paramters]">
				[editable content goes here]
		</site:[...]>
	

Section Ids

Section ids must be unique within the page. Across the site same ids can be used. Note that if section parameter common is set to true saving the section will also update all sections with the same id on other pages too.

Section Paramters

Each section can have parameters that modify the behaviour of the section content, the editor interface or the way the section is applied to the page. In general the parameters depend on the section type.

The only generic paramter is common that can have value true or false (default). Is a section has this parameter set, all pages with a section with the same id contain the same content. Furthermore, if this kind of section is edited on any page any sections with the same id are applied with the new content.

Typically this paramter is used in common page headers, navigational menus (common to all pages), footers, etc.

Description of Different Section Types

Plain HTML

Plain HTML can contain any HTML. Be careful with this section type as it allows your users to add ANY HTML and therfore accidentally (or in purpose) to break the page layout.

<site:html id="html-id">This is pure HTML</site:html>

Escaped string

Plain string can be used to allow single line string. Use for example in titles and preformatted tables. See also site:text as it is effectively the same.

<site:string id="string-id">This is a string</site:string>

Escaped text

Plain text can be used to allow editable text. Use for example in titles and preformatted tables. See also site:string as it is effectively the same.

<site:text id="text-id">This is some text</site:text>

Formatted (rich)text

Formatted text can be used to allow editable text with basic formatting capability. Use this for main content of pages and paragraphs. Users are given a "WYSIWYG" editor that can be used to edit the content.

<site:richtext id="richtext-id">This is some richtext</site:richtext>

List

List represents ordered list of items. Each item is inside a <div class="item"> tag. Each item is edited using the the same richtext editor as site:richtext. CSS classes can be used to change the appearence of lists:

• item: Each list item has this class
• index1, index2, ... : Each item has also this class representing its index in the list
• first-item: First item in list has this class
• last-item: Last item in list has this class

<site:list id="list-id"><div class="item index1 first-item"> ITEM 1</div><div class="item index2">ITEM 2</div><div class="item index3 last-item">ITEM 3</div></site:list>