Page Templating - OU Campus Support Site

Transcription

Page Templating Tutorial
OU Campus
OmniUpdate, Inc.
1320 Flynn Road, Suite 100
Camarillo, CA 93012
OmniUpdate, Inc.
1320 Flynn Road, Suite 100
Camarillo, CA 93012
800.362.2605
805.484.9428 (fax)
www.omniupdate.com
Copyright ©2013 OmniUpdate, Inc. All rights reserved.
Document Number: G104.4
3/11/2013
OmniUpdate® and OU Campus™ are trademarks or registered trademarks of OmniUpdate, Inc. Any other company
and product names, and trademarks mentioned within are property of their respective owners. Content is subject to
change without notice.
About OmniUpdate, Inc.
OmniUpdate is the leading web content management system (CMS) provider for higher education. OmniUpdate’s
enterprise web CMS, OU Campus™, empowers institutions to effectively manage and enhance their web presence
and take advantage of the latest web and mobile technologies. Founded in 1982, OmniUpdate is located in Camarillo,
CA.
About This Guide
The Page Templating Tutorial guides users through the process of creating new page templates using existing XSL
files. The guide is intended for template developers of OU Campus. It includes overview topics and step-by-step
procedures for creating new page templates.
OU Campus Support
The Support site is available to everyone and users are encouraged to visit and browse the site for information. An
institution’s administrators are also available if the answer cannot be found on the Support site or further explanation
and clarification is needed. Administrators may contact the OmniUpdate Support Team. Ways to access the OU
Campus support documentation include:
•
•
•
•
•
•
Support site: http://support.omniupdate.com/
The help link in the main interface of OU Campus
The WYSIWYG Help link
Help links embedded in the system
Text instructions are provide onscreen for specific fields and functionality
OmniUpdate Community Network (OCN): http://ocn.omniupdate.com/
Conventions
Shorthand for navigation through the OU Campus CMS is indicated with a greater-than sign and bolded: > For
example, Setup > Sites. Code snippets use Courier New and a shaded background.
OU Campus
Page Templating
Page 2 of 84
Contents
Contents ................................................... 3
Introduction .............................................. 5
Components ........................................... 5
Terminology............................................ 5
Creating the Initial PCF ............................ 6
Example HTML .............................................. 6
Examples of Other TMPLs .................... 39
LEFTNAV.TMPL ........................................... 39
PROPERTIES.TMPL..................................... 39
Creating the TCFs ..................................40
Creating a New Page TCF .................... 40
Title.................................................................. 40
Parsing the File to Create XSL and
Variable List ................................................. 40
PCF .................................................................. 11
Template List............................................... 42
Creating Initial HTML File ................. 11
Navigation List ........................................... 43
Converting the HTML File to a PCF
...................................................................... 13
Complete TCF Code ................................ 43
Example PCF ........................................... 15
Notes on Filenaming............................... 45
Creating a New Section TCF ................ 47
Example Using Multiple PCFStylesheet Declarations...................... 16
Creating Editable Regions and
WYSIWYG Styling .................................. 19
Complete Section TCF Code................ 48
Converting Common Variables to
Includes ................................................50
Creating the Common Variables and
Making the File Editable in the WYSIWYG19
Creating Multiple Regions..................... 20
Adding In-Context Styling to the
WYSIWYG Editor ................................. 21
Navigation Includes ................................. 51
Creating the Section Templates
Include ........................................................... 52
Creating In-Context Editing Files....... 22
Adding the Editor Tag to the Editable
Regions.......................................................... 23
Creating the Styles Drop-Down File 26
Expanding the TCF.................................54
Adding a Mini-WYSIWYG Editor to New
Page Creation ....................................... 54
Overriding Access Settings ................... 55
Pros and Cons of Auto-Publish.......... 55
Configuring Page Parameters and
Properties ............................................... 29
Setting Overrides ...................................... 56
Configuring the Page Parameters......... 29
Passing Directory Variables ..................60
Adding the Meta Data ........................... 31
Using Directory Variables ..................... 60
Creating Page Properties ...................... 31
Passing a Directory Variable to the TMPL61
Creating an RSS Feed Template ...........62
Turning the PCF to a TMPL ................... 35
OU Campus
Page Templating
Page 3 of 84
Basic RSS Variables ............................ 62
Setting Up the Template ....................... 62
Test the New Template.......................... 63
WYSIWYG-CLASS ............................... 69
Creating the Variable CSS .................... 69
Creating a MultiEdit Template ...............72
Passing Media Items ............................ 64
Example of a Multi-Edit Content Area
Selecting a Feed................................... 65
.......................................................................... 74
Creating the Filechooser Variable ..... 66
Adding MultiEdit Tags ........................... 75
Understanding Template Inheritance....83
Best Practices ........................................84
Adding Category Selections ................. 67
Converting to OUC Nodes ..................... 68
Updating the PCF ................................. 68
OU Campus
Page Templating
Page 4 of 84
Introduction
Page templating in OU Campus utilizes a series of files that create a page or series of pages
with very little end-user intervention and that do not require technical or coding knowledge on
the part of the end user. Page templating can create HTML-based templates, which are
generally considered legacy templates, and XML-based templates, which utilize XSLs in order
to style them and to process includes, such as the header, footer, and navigation files. This
guide will focus on XML-based templates, which requires that the necessary XSLs are already
in place. The guide is focused on using Gallena University templates, and therefore, makes
assumptions based on that, such as the node structure, number of editable regions, and
supporting files that need to be in place. It is valuable to keep in mind that the instructions are
based on Gallena University templates and make applicable changes as needed for the
institution’s templates.
Components
Page templating requires certain components, also referred to as file sets, be in place in order
for the templates to function properly. The components include:
1. Template Image: An image depicting the page or section needs to be uploaded to the
templates folder. The image is what the user sees after clicking New in the folder
structure. This should be a .gif image, named the same as the Template Control File to
which it corresponds.
2. Template Control File (TCF): The TCF is also known as the New Page Wizard. It is the
form that appears when a template image is selected, and it also contains the template
files that should be created upon clicking the Create button.
3. Template (TMPL): The TMPL is the template file that is triggered after TCF completion..
This often creates the Publish Control File, but the TMPL can also create files such as
side navigation includes.
These files create the new page or the new section with necessary files.
Terminology
The files created may include any includes or transformation-type files. Additional file types may
be created or used. Understanding these terms will help with the understanding of page
templating.
•
•
•
OU Campus
XML: Stands for eXtensible Markup Language. To create a well-formed XML document,
proper syntax must be included. For the document to be valid, it must validate against
the Document Type Definitions (DTD) declared. PCFs and XSLs are XML files.
Publish Control File (PCF): PCFs are the data files in which the content is added for
pages. They call one or more XSLs in order to transform the data into a styled page.
XSL: Stands for eXtensible Stylesheet Language. The XSL is the file that transforms the
data content into a styled page. It includes the HTML structure, links to the CSS,
JavaScript, and necessary server-side scripts, as well as any other formatting or logic
necessary to transform the page properly.
Page Templating
Page 5 of 84
Creating the Initial PCF
When creating new page templates, it is very common to begin creation from an HTML page.
The HTML page contains the full structure of the content, as well as the data. Deconstructing
the HTML page helps to determine which data is to be in the PCF and what elements need to
be part of the XSL. After the initial dissection of the files, creation of the XSL, and verification
that all necessary components of the PCF exist in the file, the PCF can be converted to a TMPL.
To begin creating the PCF and ultimately the TMPL, start with an HTML example page.
Example HTML
The code rendering this page as HTML looks like this:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
OU Campus
Page Templating
Page 6 of 84
"HTML Tidy for Linux/x86 (vers 25 March 2009), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=us-ascii" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<meta name="Description" content="" />
<title>Gallena University - Creating a New Page</title>
<link rel="stylesheet" type="text/css" media="screen" href=
"/_resources/css/main.css" />
"/_resources/css/nivo-slider.css" />
"/_resources/css/prettyPhoto.css" />

<script type="text/javascript" src=
"https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">
//<![CDATA[//comment1//]]>
</script>
<script type="text/javascript"
src="/_resources/js/jquery.nivo.slider.pack.js">
</script>
<script type="text/javascript"
src="/_resources/js/jquery.infieldlabel.min.js">
</script>
<script type="text/javascript" src="/_resources/js/jquery.ScrollTo.js">
</script>
<script type="text/javascript" src="/_resources/js/jquery.prettyPhoto.js">
</script>
<script type="text/javascript" src="/_resources/js/scripts.js">
</script>
<script type="text/javascript">
//<![CDATA[var page_id="http://training.oudemo.com/about/create-newpage.html";
//]]>
</script>
<script
src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js"
type="text/javascript">
</script>
<link rel="stylesheet" media="screen" href="/_resources/css/mobile.css"
type="text/css" />
<meta name="Keywords" content="Gallena,GU,Why Choose
Gallena,Undergraduate," />
<style type="text/css">
/*<![CDATA[*/
span.c3 {float:left;margin-top:10px;}
img.c2 {float: right; margin-left: 4px; margin-right: 4px;}
img.c1 {float: left; margin-left: 4px; margin-right: 4px;}
/*]]>*/
</style>
</head>
<body>
<div id="header">
<div id="header-content">
<div id="logo">
<a href="/index.html"><img src="/_resources/images/logo.png" alt=
"Gallena University" width="206" height="79" /></a>
</div>
<ul id="new-nav">
<li><span><a href="/welcome/index.html"
class="button_item">Welcome</a></span></li>
<li><a href="/about/index.html" class='button_item'>About</a></li>
<li><span><a href="/news/index.html"
class='button_item'>News</a></span></li>
<li><span><a href="/academics/index.html"
class="button_item">Academics</a></span></li>
<li class="current"><a href="/admissions/index.html"
class="button_item">Admissions</a></li>
<li class="last"><a href="/athletics/index.html"
class="button_item">Athletics</a></li>
</ul>
</div>
</div>
<div id="main-content">
<div id="wrapper">
<div id="breadcrumb">
<ul id="breadcrumb-nav">
OU Campus
Page Templating
Page 8 of 84
<li><a href="http://training.oudemo.com/">Home</a><span
class="raquo">»</span></li>
<li><a href="/about/">About GU</a><span
class="raquo">»</span></li>
<li>Creating a New Page</li>
</ul>
<div class="clear">

</div>
</div>
<div id="sidebar">
<div id="sidebar-innertube">
<div class="ribbon ribbon-first">
<h5>Quick Links</h5>
</div>
<ul id="sidebar-nav" class="nav-link">
<li><a title="About" href="/about/index.html">About
Gallena</a></li>
<li><a title="History"
href="/about/history.html">History</a></li>
<li><a title="Library"
href="/about/library.html">Library</a></li>
<li><a title="Campus Map" href="/welcome/maps.html">Campus
Map</a></li>
<li><a title="Class Registration"
href="/about/classreg.html">Class Registration</a></li>
<li><a title="Tour Registration"
href="/about/campus_tour.html">Tour Registration</a></li>
<li><a title="Students on Campus" href="/about/ee.html">Students
on Campus</a></li>
<li><a title="Frequently Asked Questions"
href="/about/faqs.html">Frequently Asked Questions</a></li>
<li><a title="Test" href="/about/test.html">Test</a></li>
<li><a title="Creating a New Page" href="/about/create-newpage.html">Creating a New Page</a></li>
</ul>
<div class="ribbon">
<h5>Search</h5>
</div>
<form id="search-form" method="post" action="http://ousearch2.omniupdate.com/query.html">
<input type="hidden" name="hidden" value="" /> <input
type="hidden" value="gu" name="col" /> <input type="hidden" value="gu"
name="style" />
<input type="hidden" value="utf-8" name="charset" />
<p><label for="search">Type here to search</label> <input
type="text" id="search" name="search" /></p>
</form>
<div class="ribbon">
<h5>What Students Say</h5>
</div>
OU Campus
Page Templating
Page 9 of 84
<blockquote>
<span id="student_quotes"> </span><script
type="text/javascript">
//<![CDATA[
$.get("/_resources/php/quotes.php",function(data){$("#student_quotes").replac
eWith(data);});
//]]>
</script>
</blockquote>
</div>
</div>
<div id="content">
<div class="blog-post clearfix post-content">
<h2 class="h-color-link">Creating a New Page</h2>
<p><img class="c1" src="/_resources/images/about/gulibrary.jpg"
alt="Student" width="150" height="127" />Six started far placing saw respect
females old. Civilly why how end viewing attempt related enquire visitor. Man
particular insensible celebrated conviction stimulated principles day. Sure
fail or in said west. Right my front it wound cause fully am sorry if. She
jointure goodness interest debating did outweigh. Is time from them full my
gone in went. Of no introduced am literature excellence mr stimulated
contrasted increasing. Age sold some full like rich new. Amounted repeated as
believed in confined juvenile.</p>
<p><img class="c2" src="/_resources/images/about/trade%20show.jpg"
alt="Show" width="150" height="113" />Suppose end get boy warrant general
natural. Delightful met sufficient projection ask. Decisively everything
principles if preference do impression of. Preserved oh so difficult
repulsive on in household. In what do miss time be. Valley as be appear
cannot so by. Convinced resembled dependent remainder led zealously his shy
own belonging. Always length letter adieus add number moment she. Promise few
compass six several old offices removal parties fat. Concluded rapturous it
intention perfectly daughters is as.</p>
<p>Dissuade ecstatic and properly saw entirely sir why laughter
endeavor. In on my jointure horrible margaret suitable he followed speedily.
Indeed vanity excuse or mr lovers of on. By offer scale an stuff. Blush be
sorry no sight. Sang lose of hour then he left find.</p>
</div>
<a href="/about/create-new-page.pdf">View as PDF</a>
</div>
<div class="clear">

</div>
<div id="footer">
<ul id="footer-nav">
<li><a href="/happenings/index.html">Calendar</a></li>
<li><a href="index.html">Admissions</a></li>
<li><a href="/news/">News & Events</a></li>
<li><a href="http://training.oudemo.com/jcosta/">Student
Blogs</a></li>
<li><a href="/contact.html">Contact Us</a></li>
<li><span id="new-direct-edit"></span></li>
OU Campus
Page Templating
Page 10 of 84
</ul><span class="c3">Gallena University, California 2314 Running
Springs Rd Gallena, CA 91255-4901 USA Tel: (818) 555-9401</span><br />
<br />
<ul id="social">
<li><a href="http://twitter.com/gallena_univ" title=""><img src=
"/_resources/images/twitter-ico.png" alt="twitter" width="32"
height="32" title="Gallena University Twitter profile" /></a></li>
<li><a href="http://www.facebook.com/pages/GallenaUniversity/43156474752" title=""><img src="/_resources/images/facebookico.png" alt="facebook" width="32" height="32" title="Gallena University
Facebook profile" /></a></li>
<li><a href="/flickr_gallery.html" title=""><img
src="/_resources/images/flickr-ico.png" alt="flickr" width="32" height="32"
title="Gallena University Flickr profile" /></a></li>
<li><a href="/news/feeds.html" title=""><img
src="/_resources/images/rss-ico.png" alt="rss" width="32" height="32"
title="Gallena University RSS Feed" /></a></li>
</ul>
<div class="go-top">Top
</div>
<div class="clear">
 
</div>
<p id="copyright">Copyright © <a href="http://omniupdate.com"
title="copyright">OmniUpdate Inc.</a></p>
</div>
</div>
</div><script type="text/javascript" src="/_resources/js/scripts.js">
</script>
</body>
</html>
Parsing the File to Create XSL and PCF
The head code, as well as the <div> structure and supporting HTML is pulled into the XSL
used to style the page. Additionally, the include statements for included elements are
referenced from within the XSL. For the purposes of this tutorial, assume the XSL has already
been created from the parsed HTML document.
Creating Initial HTML File
The first step is creating a PCF with editable content areas. In the case of the above referenced
example, this results in an HTML with the following initial structure:
<p><img class="c1" src="/_resources/images/about/gulibrary.jpg" alt="Student"
width="150" height="127" />Six started far placing saw respect females old.
Civilly why how end viewing attempt related enquire visitor. Man particular
insensible celebrated conviction stimulated principles day. Sure fail or in
said west. Right my front it wound cause fully am sorry if. She jointure
goodness interest debating did outweigh. Is time from them full my gone in
OU Campus
Page Templating
Page 11 of 84
went. Of no introduced am literature excellence mr stimulated contrasted
increasing. Age sold some full like rich new. Amounted repeated as believed
in confined juvenile.</p>
<p><img class="c2" src="/_resources/images/about/trade%20show.jpg" alt="Show"
width="150" height="113" />Suppose end get boy warrant general natural.
Delightful met sufficient projection ask. Decisively everything principles if
preference do impression of. Preserved oh so difficult repulsive on in
household. In what do miss time be. Valley as be appear cannot so by.
Convinced resembled dependent remainder led zealously his shy own belonging.
Always length letter adieus add number moment she. Promise few compass six
several old offices removal parties fat. Concluded rapturous it intention
perfectly daughters is as.</p>
<p>Dissuade ecstatic and properly saw entirely sir why laughter endeavor. In
on my jointure horrible margaret suitable he followed speedily. Indeed vanity
excuse or mr lovers of on. By offer scale an stuff. Blush be sorry no sight.
Sang lose of hour then he left find.</p>
Starting with an HTML file extension, which will be converted to a PCF, the data included will be
displayed with no styling in both preview and edit.
Preview
Edit
OU Campus
Page Templating
Page 12 of 84
Converting the HTML File to a PCF
In order to convert the file to a PCF, the file needs to be updated to be formatted in proper XML
structure. This includes adding an XML declaration, defining the DOCTYPE, and adding a root
node. It also needs the pcf-stylesheet declaration, which declares which XSL is to be used for
the transformation of the file to a styled page. Use the Source Code Editor to make the
changes.
NOTE: For the purposes of this tutorial, it is valuable to understand the XSL that will be called is
looking for a _leftnav.inc file and _properties.inc file. These need to be added to the directory
prior to attempting to render the PCF in order to avoid an error.
Add the following to the HTML file in the order described:
1. The XML declaration identifies the version of XML to be used, as well as declares the
encoding used on the page. For these purposes, XML version 1.0 is used, along with
UTF-8 encoding.
<?xml version="1.0" encoding="utf-8" ?>
2. The pcf-stylesheet declaration identifies the path to the XSL that is used to transform the
data, and the extension that is appended in place of .pcf on publish. It may also include
a separate site identifier if the XSL is in a different OU Campus site, along with other
attributes described below. It is possible to have multiple pcf-stylesheet declarations if
multiple outputs are desired. For instance, if the published page should be published as
an HTML file and a PDF, two pcf-stylesheet declarations will be included. See an
example of this after the page example in this section.
<?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html"
title="Web" ?>
Attribute Name
Syntax Example
Description
path
path="/_resources/xsl/defau
lt.xsl"
Required
extension="html"
Required
extension
OU Campus
Defines the path to the XSL file that will be
used to transform the page.
Page Templating
Page 13 of 84
Attribute Name
Syntax Example
Description
Defines the extension that is used to replace
.pcf on publish.
site
site="templates"
Defines an alternative site where the XSL
file that was defined as part of the path
resides.
title
tite="Web"
Defines a friendly name, which will appear in
place of the extension on the tabs shown in
the preview.
alternate
alternate="yes"
Used when there is more than one PCFStylesheet declaration to identify the file as a
secondary output type in order to create a
preview based on the alternative output.
params
params="varname=string"
Passes an <xsl:param> value to a toplevel parameter by identifying the parameter
with the same name and providing the value.
publish
publish="no"
Prevents the defined stylesheet from
publishing. This is useful for stylesheets that
should only create a preview, such as a
debug XSL for developers.
3. The DOCTYPE declares the root node of the document and it defines the document
structure with a list of legal elements, attributes, and entities. These can be included
within the DOCTYPE definition or referenced as an external document. For these
purposes, an external document is referenced.
<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">
4. The root node is the first tag of the file, as well as the final closing tag. All data and other
nodes must be properly encased within this root node. This example uses <document>
for the root node.
In this case, the XSL being referenced is looking for /document/content in order to pull in the
page’s data. This path is called an XPath. To create the page templates, knowing these XPaths
and following the same node structure is necessary to view content on the page. If the page
were saved without a node of <content> having been added, on preview, no content would
display. To avoid this, add <content> immediately following <document>, and add
</content> immediately preceding </document>.
After the changes are made, the file should be saved with a PCF extension in place of the
HTML extension.
Before
OU Campus
Page Templating
Page 14 of 84
After
Example PCF
title="Web" ?>
<document>
<content>
<p><img class="c2"
src="/_resources/images/about/trade%20show.jpg" alt="Show" width="150"
height="113" />Suppose end get boy warrant general natural. Delightful met
sufficient projection ask. Decisively everything principles if preference do
impression of. Preserved oh so difficult repulsive on in household. In what
do miss time be. Valley as be appear cannot so by. Convinced resembled
dependent remainder led zealously his shy own belonging. Always length letter
adieus add number moment she. Promise few compass six several old offices
removal parties fat. Concluded rapturous it intention perfectly daughters is
as.</p>
</content>
</document>
OU Campus
Page Templating
Page 15 of 84
Preview
Example Using Multiple PCF-Stylesheet Declarations
If multiple outputs are desired, multiple pcf-stylesheet declarations are needed. The rest of the
PCF appears just the same, but a different XSL is used to transform the second output. When
defining the additional declarations, it is valuable to include the title and alternate="yes"
attributes. Having the additional declarations defined as alternate allows multiple previews to be
rendered.
Example Code
title="Web" ?>
<?pcf-stylesheet path="/_resources/xsl/page2pdf.xsl" extension="pdf"
title="PDF" alternate="yes" ?>
OU Campus
Page Templating
Page 16 of 84
<document>
<content>
<p><img class="c2"
src="/_resources/images/about/trade%20show.jpg" alt="Show" width="150"
height="113" />Suppose end get boy warrant general natural. Delightful met
sufficient projection ask. Decisively everything principles if preference do
impression of. Preserved oh so difficult repulsive on in household. In what
do miss time be. Valley as be appear cannot so by. Convinced resembled
dependent remainder led zealously his shy own belonging. Always length letter
adieus add number moment she. Promise few compass six several old offices
removal parties fat. Concluded rapturous it intention perfectly daughters is
as.</p>
</content>
</document>
Example of Web Output
OU Campus
Page Templating
Page 17 of 84
Example of PDF Output
OU Campus
Page Templating
Page 18 of 84
Creating Editable Regions and WYSIWYG Styling
Now that the initial PCF has been created, the file needs to be updated so that it can be edited.
To do this, editable regions are created using custom OU Campus code. Additionally, the
regions can be styled so that it contains in-context CSS for editing from within the WYSIWYG
Editor.
Making the File Editable in the WYSIWYG
To begin creating the editable region, simply start by opening the file in the Source Code Editor.
After the opening <content> tag, add the following:

Then, right before the closing </content> tag, add the following:

This defines the editable region. Example attributes are shown below:
1. Label: Provides a unique label for the editable region. It must be unique to the page, but
it does not have to match the containing node’s name.
2. Group: Defines the group of users who can edit this editable region.
3. Button: Defines the edit button that should appear on the screen.
4. Break: Defines a line break following the button.
For a list of all available attributes, visit the Support site, and navigate to Development > Page
Tagging > Page Tagging Reference.
Once the defined tags are added, save the page, and click on the Edit button. Above the main
content area, a green edit button should now be displayed.
OU Campus
Page Templating
Page 19 of 84
Creating Multiple Regions
It is possible to have more than one editable region. Very often, the editable regions correspond
with specific XPaths, but they do not have to. They simply need to be included within the
XPaths.
In this case, two editable regions are created for the main content area. One is for the title, and
the other for the actual content region.
1. Open the page in the Source Code Editor.
2. After the opening <content> tag, add the following:

3. Right before the editable region tag created in the exercise above, add the following:

4. Move the <h2> tags to right before the new opening div tag, and right after the closing
div tag.
<h2 class="h-color-link">
</h2>
5. Move the title to between the opening and closing div tags.
<h2 class="h-color-link">
Creating a New Page
</h2>
OU Campus
Page Templating
Page 20 of 84
To test the updates, click on Edit, and there will be two Edit buttons: one for the title, and one for
the main content area.
Adding In-Context Styling to the WYSIWYG Editor
Now that the editable regions have been created, click the Edit Main Content Area button. When
it opens, notice that the title no longer appears because it is in another editable region, and
there is no styling applied to the WYSIWYG Editor. The background is white, and the text shows
no resemblance to the actual page’s text.
OU Campus
Page Templating
Page 21 of 84
To add in-context styling to the WYSIWYG Editor, the files need to first be prepped.
Creating In-Context Editing Files
One of the first things to do is to create the background image. The easiest way to do this is to
remove content from the editable region that will ultimately be the area being edited with this
background image. Then on preview of the page, take a screenshot of the page without the
footer, and use image editing software to fade it out using the opacity settings. It may be
necessary, given the background image, and proximity of the footer to the content area, to add
paragraph breaks with no content to create a larger empty background area.
OU Campus
Page Templating
Page 22 of 84
A different image should be created for editable regions that should appear differently.
Next is to create the CSS file for the editable region. At a minimum, this file should import the
main CSS files, and it should have a body tag that references the image just created, as well as
contains margins necessary to align the text that will be added on the background image with
where it will actually appear on the page. The file can also include special classes that should
appear in the WYSIWYG Editor. These classes may be those that will be added to the Styles
drop-down.
Setting the margins can be done using the Layout option of the browser’s inspect tool or the
image editor used to create the background image. It is possible that some trial and error may
occur as well.
@import url("/_resources/css/main.css");
body {
background-image: url("/_resources/ou/editor/pt-onecolumn.jpg");
background-repeat: no-repeat;
margin: 185px 17px 200px 11px;
min-width:0px;
font-family: Arial,"Helvetica Neue",Helvetica,Geneva,sans-serif;
background-color: #EEEEEE;
color:#4B4A4A;
text-align: left !important;
line-height: 20px;
}
p
{padding: 0 0 20px 0; }
Save the CSS file as pt-onecolumn.css and upload it, and the background image ptonecolumn.jpg to the /_resources/ou/editor folder in OU Campus. The CSS file needs to be
published to production.
Adding the Editor Tag to the Editable Regions
Now that the files have been created, the editable regions can be added to the PCF. Navigate
back to the PCF, and open the page in the Source Code Editor. Start by adding the editor tag to
the main content area.
After the opening div tag for the main content area (the one with label="maincontent"), add
the following:

This tag includes:
1. csspath: The path to the CSS file for the WYSIWYG Editor.
2. cssmenu: The path to the text file defining the classes available in the Styles drop-down.
Formatting of this file and requirements for its use will be described shortly.
3. width: The width of the WYSIWYG Editor’s area.
OU Campus
Page Templating
Page 23 of 84
Additional attributes are available. For a list of all available attributes, visit the Support site, and
navigate to Development > Page Tagging > Page Tagging Reference.
Save the changes, and edit the main content region. Notice the newly added background image
and how the text aligns appropriately to provide in-context editing.
For the title, a very simplistic toolbar will be added to the editor tag. Because the title’s styling is
being added outside the editable region (remember the <h2> tags were added outside the
editable region’s div tags), and the CSS for the editable region should be updated to include the
styling for the header so that it displays as expected in the WYSIWYG Editor.
Follow the steps that were taken for the main content area to obtain the background image and
to create the CSS file for the editable region. Upload and save the CSS file as pt-onecolumntitle.css, and the background image pt-onecolumn-title.jpg, and make sure to publish the CSS
file.
OU Campus
Page Templating
Page 24 of 84
Image
Editable Region CSS
body {
background-image: url("/_resources/ou/editor/pt-onecolumntitle.jpg");
margin: 130px 17px 0 11px;
padding: 12px 0 10px;
min-width:0px;
font-family: Georgia,"Times New Roman",Times,serif;
font-size:28px;
text-rendering: optimizelegibility;
border-bottom: 1px solid #C9C9C9;
color:#4B4B4B;
line-height: 20px;
}
Then add the following after the opening div tag for the title area (with label="pageheader").

In this case, cssmenu was not defined, as there will be no Styles drop-down, but a toolbar was
defined in order to restrict the tools available to all users. This toolbar already exists for the
workshop. The only tools included in this example toolbar include Save, Auto-Draft, and Spell
Check.
Save the page, and then Edit the title area. The background image should appear, along with a
restrictive toolbar, and the proper styling for the title once it is entered.
OU Campus
Page Templating
Page 25 of 84
Creating the Styles Drop-Down File
The background images, WYSIWYG CSS files, and specialized toolbar have all be defined and
declared. Earlier, though, a file was declared for the cssmenu attribute in the main content’s
editable region. However, currently nothing appears in the Styles drop-down.
This is because while the file has been declared, it has not actually been created. The file is a
simple text file. It includes any classes desired for the drop-down, a friendly name, and a block
declaration if it is meant to be a block-level element. The classes should be in both the CSS for
the editable region, and the CSS for the site.
NOTE: If the class is not associated with any other identifiers in the site’s CSS, such as an id
attribute or the body tag, it may not need to be included in the editable region’s CSS. Simply test
the results before adding the style to the editable region’s CSS.
To format the text file for the Styles drop-down, first navigate to the existing file styles.txt in the
/_resources/ou/editor directory. Copy it to the same directory, and rename it to pt-styles.txt.
Add the class name, .quote, a single tab, and a friendly name for the drop-down. The quote
class should be applied as a block-level element, so add another single tab, and then the word
“block.” Add one class per line. Remove the header classes.
.yellow
.green
.quote
Yellow
Green
Quote block
Save the file, it does not need to be published. Test that everything is functioning as expected
by going to the PCF and editing the main content area. The Styles drop-down should display
now with Yellow, Green, and Quote.
OU Campus
Page Templating
Page 26 of 84
Test the application of the styles by selecting text and applying the styles.
OU Campus
Page Templating
Page 27 of 84
OU Campus
Page Templating
Page 28 of 84
Configuring Page Parameters and Properties
The PCF now created includes the main body area, but the original file included side navigation
and student quotes. These pieces are missing because the XSL is looking for a page parameter
that does not exist. Since the parameter does not exist, the XSL is defaulting to a one column
layout.
Additionally, there is no current way to edit the meta data, including title, keywords, and
description. These fields should be added to the PCF in order to keep them editable on a pageby-page basis. This is done by adding the content to the PCF and then identifying what is
editable by users by wrapping it in properties tags.
In order to effectively complete this task, it is necessary to know what is in the XSL. For this
exercise, the available properties will be defined in this document.
1. Page Type: Defines the type of page for the XSL transformation. This particular
parameter will not be included in the Page Properties.
2. Student Quotes: Defines whether or not the student quotes display on the left-hand side.
3. Keywords: Defines a list of keywords that can be selected.
In addition to these parameters, meta data for the title, description, and author will be added.
Keep in mind that adding the additional parameters, specifically the page type selector, and
then changing the page type will affect the in-context editing that was done earlier as that was
based on a one column layout. Ultimately additional CSS files, background images, and editor
tags should be created, which results in a different page template for each layout. Keep in mind,
that using the <ouc:div> tags discussed later allows for using one page template with
dynamic CSS that is based on the page type selection. This requires additional XSL formatting.
Configuring the Page Parameters
After determining which page parameters need to be added to the page, complete the task by
adding the following code after the opening <document> tag.
<config>
<parameter name="pagetype" type="select" group="Everyone" prompt="Page
Type" alt="Please choose appropriate page type.">
<option value="article" selected="false">Article</option>
<option value="content" selected="false">Content</option>
<option value="onecolumn" selected="true">One Column</option>
</parameter>
<parameter name="quotes" type="select" group="Everyone" prompt="Student
Quotes" alt="Do you want to display the student quotes?">
<option value="true" selected="true">Yes</option>
<option value="false" selected="false">No</option>
</parameter>
<parameter name="keywords" prompt="Keywords" type="checkbox"
alt="Select the appropriate keywords for the page.">
<option value="Gallena" selected="true">Gallena</option>
<option value="GU" selected="true">GU</option>
OU Campus
Page Templating
Page 29 of 84
<option value="Gallena University" selected="false">Gallena
University</option>
<option value="Why Choose Gallena" selected="true">Why Choose
Gallena</option>
<option value="Undergraduate"
selected="true">Undergraduate</option>
<option value="Graduate" selected="false">Graduate</option>
</parameter>
</config>
The <config> tags encompass the <parameter> tags and are used in the XPath within the
XSL.
The first parameter defines the page type. It includes the following:
1. Name: The name of the parameter, which is used in the XPath in the XSL to determine
the layout.
2. Type: The type of parameter. This can be text, select (drop-down), radio, checkbox, or a
filechooser.
3. Group: The group of users who can edit this parameter when the parameter is wrapped
in a properties tag.
4. Prompt: The friendly label that is displayed when the parameter is wrapped in a
properties tag.
5. Alt: The instructional text for the field that will be displayed when the parameter is
wrapped in a properties tag.
Between the opening and closing <parameter> tags, there are the available options.
For the <option> tags, two main attributes are needed. A friendly name is displayed between
the opening and closing <option> tags.
Attribute Name
Syntax Example
Description
value
value="true | false"
Defines the value defined in the XPath within
the XSL.
selected
selected="true | false"
Defines whether the defined value is the
selected value for the PCF.
These settings are repeated with different values for the parameters defining whether or not the
student quotes should be displayed, and which keywords are to be applied to the page.
OU Campus
Page Templating
Page 30 of 84
Adding the Meta Data
Following the closing </config> but before the opening <content> tag, add the following in
order to configure the meta tags.
<metadata>
<meta name="Description" content="This is the meta description for
creating a new page." />
<meta name="Author" content="ME" />
</metadata>
<title>Create a New Page</title>
The <metadata> node encompasses the <meta> tags because it is part of the XPath that will
copy all of the meta information into the head code. The <title> node will be used in the head
code as well. Both sets of data can now be edited on a page-by-page basis, however.
Creating Page Properties
To identify parameters, the meta data, and the title for display in the Page Properties screen,
the content need to be wrapped in properties tags. Before the opening <config> tag, add the
following:
OU Campus
Page Templating
Page 31 of 84

This identifies where the page properties start.
Close the identified page properties using a closing tag right below the closing </title> tag.

It is possible to have multiple sets of properties tags if there are certain parameters and other
data that should not be included in the page properties in between.
Save all the changes, and click on the Props icon to confirm the page properties display as
expected.
OU Campus
Page Templating
Page 32 of 84
To see how the page type parameter changes the layout of the page:
1.
2.
3.
4.
From the Page Type dropdown select “Content.”
Save the changes.
View how the preview changed.
View the source of the page, and observe that the parameter code for the Page Type
parameter has changed.
<parameter name="pagetype" type="select" group="Everyone" prompt="Page Type"
alt="Please choose appropriate page type.">
<option value="content" selected="true">Content</option>
<option value="onecolumn" selected="false">One Column</option>
</parameter>
The preview of the page now displays the side navigation, search, and student quotes, which
are defined by the XSL and page type configuration, along with the Student Quotes parameter.
OU Campus
Page Templating
Page 33 of 84
OU Campus
Page Templating
Page 34 of 84
Turning the PCF to a TMPL
After configuring the PCF to have all necessary parameters and node configuration, convert the
PCF to a TMPL. This requires very little extra work. TMPLs are the templates for the files
created by the TCF. For pages, these are configured identically to PCFs with one change.
Instead of having hard-coded content, within the TMPL there are echo variables that echo in
content from the TCF. It is also possible to have some example content in the editable regions,
or just empty editable regions.
Note: It is important to note that any include files, such as the side navigation and breadcrumb
files, created with a new section will need to have TMPLs as well. These can then be triggered
by the New Page Wizard. These files are generally pretty simple, and a couple of examples
(leftnav.tmpl and properties.tmpl) follow the explanation of converting the PCF to a TMPL below.
For the purposes of this demonstration, the description entered into the TCF is echoed into the
main content area. Additionally, the title is echoed into both the <title> node and the editable
region for the page heading. The parameters and other meta data will also be echoed.
The syntax for an echo variable is:

The value for the variable should match the name of the variable in the TCF. If options are being
included, for instance when making a page type selection, encoding="none" needs to be
included in the echo statements in order to have the proper XML syntax passed.
There are also system-defined variables, which exist regardless of the variables in the TCF.
These include options such as the root relative path, the site name, and current directory. For a
full list of system-defined echo variables, visit the Support site, and navigate to Development >
Template Files > TMPL Reference.
For this demonstration, make the changes highlighted below:
Current Code
<?xml version="1.0" encoding="utf-8"?>
title="Web"?>
OU Campus
Page Templating
Page 35 of 84
alternate="yes" title="PDF"?>
<document>
<config>
<parameter name="pagetype" type="select" group="admin" prompt="Page
Type" alt="Please choose a appropriate page type">
</parameter>
<parameter name="quotes" type="select" group="Everyone" prompt="Student
Quotes" alt="Do you want to display the student quotes?">
</parameter>
<parameter name="keywords" prompt="Keywords" type="checkbox" alt="Pick
select the appropriate keywords for the page">
University</option>
Gallena</option>
</parameter>
</config>
<metadata>
<meta name="Description" content="" />
<meta name="Author" content="" />
</metadata>
<title>New Page</title>
<content>
<h2 class="h-color-link">
Creating a New
Page II
OU Campus
Page Templating
Page 36 of 84
</h2>

cssmenu="/_resources/ou/editor/pt-styles.txt" width="1042" -->
<p>
<img style="border: 0pt none; margin: 5px; float: left;"
src="/_resources/images/about/gulibrary.jpg" alt="library" width="269"
height="227" />
The mission of the Library organization is to connect students,
faculty, staff, and members of the local community with the information
resources they need for study, research, and recreation. The library contains
substantial collections of books, journals, government documents, videos,
maps, and other physical materials, all listed in its online catalog.
</p>
<p>
The Library organization provides a wide range of library
instruction opportunities to the campus community. For many students the
first introduction to library services at GU is through the required library
component of University 100, designed to introduce new students to basic
concepts of information literacy. Librarians also provide a variety of
workshops, as well as individual in-depth consultation focusing on a specific
research topic.
</p>
<p>
The Library provides adaptive devices to make our print and
electronic resources accessible to the disabled and works closely with
Disabled Student Services to insure that equipment, facilities, and
collections are responsive to special needs.
</p>
<p>
For more information about the GU Library, please contact the
Campus Librarian at <a
href="mailto:[email protected]?subject=GU%20Library%20Information
">[email protected]</a>.
</p> 
</content>
</document>
New Code
title="Web"?>
OU Campus
Page Templating
Page 37 of 84
<document>
<config>
<parameter name="pagetype" type="select" group="admin"
prompt="Page Type" alt="Please choose a appropriate page type">

</parameter>
<parameter name="quotes" type="select" group="Everyone"
prompt="Student Quotes" alt="Do you want to display the student quotes?">

</parameter>
alt="Pick select the appropriate keywords for the page">

</parameter>
</config>
<metadata>
<meta name="Description" content="" />
</metadata>
<title></title>
<content>
<h2 class="h-color-link">



</h2>



</content>
</document>
After making the described changes, save the file as a TMPL with a new path and update the
name to pt-new-page.tmpl. The new path is /_resources/ou/templates, which is the path to
where the page templates (TCFs and TMPLs) exist.
OU Campus
Page Templating
Page 38 of 84
Original Path
New Path
Examples of Other TMPLs
In order to have additional files created, such as the side navigation and breadcrumb files,
TMPLs need to be created for those as well. This is generally done one time initially, and then
the same files are used in all necessary sections created in the future.
The following two examples depict the TMPLs for the leftnav.tmpl and properties.tmpl files that
are created with a new section for Gallena University’s templates.
LEFTNAV.TMPL
The leftnav.tmpl creates a basically empty file with only an editor tag. Any necessary div tags for
making the file appear as an editable region are in the XSL. The code to be added to the file to
create new navigation items is entered upon new page creation via the TCF.

PROPERTIES.TMPL
The properties.tmpl is, in this case, used to create the breadcrumb file. This particular TMPL
creates a Page Property that makes editing the breadcrumb title user friendly.
<html>
<head>
<title>
Breadcrumb Name
</title>
Current Breadcrumb Name: <parameter name="breadcrumbs" type="text"
group="Everyone" prompt="Breadcrumb Name" alt="Please provide a friendly
breadcrumb name"></parameter>
</head>
<body>
<h3>Please click on the page properties (<img
src="/_resources/images/properties_icon.jpg" alt="pp" style="position:
relative; top: 13px;padding-left: 5px;padding-right: 5px;"/>) icon to change
the default breadcrumb name for the current folder</h3>
</body>
</html>
OU Campus
Page Templating
Page 39 of 84
Creating the TCFs
The page template has been created. To allow users to now create new pages using the newly
created template, a TCF needs to be created. The TCF is also known as the New Page Wizard,
and it is the form that the user fills out in order to create a new page. It allows for variable data,
such as page title, meta description, and keywords to be populated, and then passed to the
TMPL. The options that are included in the TCF can be extremely expansive and include page
parameter selections, as well as the pre-population of page data.
The TCF needs to be configured using XML rules that include:
•
•
•
All tags must close
All attribute values must be encased in quotes
Attributes are defined using lowercase letters
Creating a New Page TCF
For the purposes of this tutorial, the first TCF that will be created includes:
•
•
•
•
•
•
•
•
Defining the page title
Entering the meta description for the page
Selecting the keywords for the page
Entering the author for the page
Selecting the page type for the newly created page
Selecting whether or not student quotes show on the page
Determining whether or not the page should be added to the side navigation
Entering the filename for the page
These elements will be added using the following:
•
•
•
Variable list
Template list
Navigation list
An additional list is also available. The additional list type creates directories. This will be used
when creating a new section template, rather than a new page template. For now, this will be
skipped.
Title
The TCF begins with a <title> node. This contains the title for the New Page Wizard. It is
used to help the users confirm they are creating the correct page or section.
Variable List
The <variable-list> node defines the variables set. It includes a variable for nearly every
input field on the New Page Wizard’s form. The variables are configured similarly to those of
page parameters. For details on all available variable attributes, visit the Support site and
navigate to Development > New Page Wizard (TCF) > TCF Reference.
OU Campus
Page Templating
Page 40 of 84
The variables can be configured as text, a filechooser, drop-down (select), checkboxes, radio
buttons, or an asset. It is also possible to include a mini-WYSIWYG Editor with a text element.
For the purposes of this tutorial, the variables to be configured will include the:
•
•
•
•
•
•
•
Page title (text field)
Meta description (text field)
Keywords (checkboxes)
Author (text field)
Page type selection (drop-down)
Student quotes on or off (drop-down)
Automatic side navigation selection (drop-down)
Each variable will include at a minimum:
•
•
•
Name: A unique name for the variable. This is passed to the TMPL.
Prompt: The friendly identifier for the field.
Alt: The instructions for the field.
Without a type defined, the default is text.
When drop-down (select), checkboxes, or radio buttons are being used, options need to be
included between the opening and closing variable tags. Options should always include their
value and an identifier of whether or not that option has been selected. If these options are
going to be echoed into the TMPL, output="xml" needs to be added to the <variable> tag
to properly pass the full set of options and not just the selected value’s text.
Code for Variables
<variable-list>
<variable name="title" type="text" prompt="Enter Page Title:" alt="Give
your new page a title."></variable>
<variable name="description" type="text" prompt="Description:"
alt="Describe your new page."></variable>
<variable name="keywords" type="checkbox" prompt="Keywords:"
alt="Select the appropriate keywords for the page." output="xml">
<option value="Gallena University" selected="true">Gallena
University</option>
<option value="Why Choose Gallena" selected="false">Why Choose
Gallena</option>
selected="false">Undergraduate</option>
</variable>
<variable name="author" type="text" prompt="Author:" alt="The author
name for this page."></variable>
<variable name="pagetype" type="select" prompt="Page Type:" alt="What
type of page would you like to create?" output="xml">
OU Campus
Page Templating
Page 41 of 84
</variable>
<variable name="quotes" type="select" prompt="Student Quotes:" alt="Do
you want to display the student quotes?" output="xml">
</variable>
<variable name="autonavigation" type="select" prompt="Add Navigation
Item:" alt="Add the page to the left navigation file automatically?">
</variable>
</variable-list>
Template List
After configuring the variables that will be used in the new page creation, the templates that
should be created are defined. For a singular page, one template is generally defined, but for
new sections, this will often include a template for the page, a template for the side navigation,
and a template for the breadcrumb file. It is possible that other template files will be created. It
all depends on the site’s configuration and template needs.
In this case, the TMPL that was created earlier will be created with this New Page Wizard.
Within the <template-list> the <template> is defined. For a full list of available attributes,
see the Support site, and navigate to Development > New Page Wizard (TCF) > TCF
Reference.
This template will focus on:
•
•
•
•
•
•
•
•
•
OU Campus
Prompt-Prefix: This identifier for the template gets appended to pre-defined prompts that
appear in the New Page Wizard as needed.
Filename: Provides a default filename for the page that will be created. If not included,
this will default to untitled.
Extension: Provides the extension that will be appended to the filename.
Filename-Alt: Allows customized alt text to be provided that will show up next to the
filenaming field.
Display-Group: Setting “no” for this attribute hides the access drop-down for the page
creation. This is strongly encouraged in order to prevent users from changing the
settings as defined by the administrator.
Display-Destination: Setting “no” for this attribute hides the destination field allowing a
destination to be included identifying where the new page should be created. This
should generally be set to “no,” but if the destination attribute is being used, this can
be used to allow the destination to be changed by the user.
Display-Overwrite: Setting “no” for this attribute hides the overwrite checkbox, which
would allow the user to overwrite a file of the same name. This is strongly encouraged in
order to help maintain content integrity and prevent undesired overwrites.
Preferred-Redirect: Setting “yes” identifies this file as the desired redirect after the new
page is created, taking the user directly to this page for editing purposes.
Publish: Setting “no” identifies that this file should not be published upon creation.
Page Templating
Page 42 of 84
•
•
Autonav: By using the variable name from the <variable-list> within a set of curly
braces, the selection from the variable is passed to this attribute, and then ultimately will
be passed to the <navigation-list>.
The TMPL name will be added between the opening and closing <template> tags.
Code for Template
<template-list>
<template prompt-prefix="New Page" filename="untitled" extension="pcf"
filename-alt="Use only lowercase letters, numbers, and hyphens only."
display-group="no" display-destination="no" display-overwrite="no" preferredredirect="yes" publish="no" autonav="{autonavigation}">pt-newpage.tmpl</template>
</template-list>
Navigation List
The <navigation-list> defines whether or not a new navigation item is added to the side
navigation file. The value passed starts in the variables, gets passed through the templates, and
then defines the action to take place.
In this case, if the value passed is “true,” a new line item is created in the _leftnav.inc file of the
current directory. The line item will include the value of the title variable that was defined above,
as wells as the root relative path to the file. If the value passed is “false,” no additional actions
will occur.
The navigation list requires:
•
•
•
Name: Identifies whether the selection above was true or false.
Path: Identifies the path to the side navigation file.
Publish: Entering “no” means that the side navigation file will not be automatically
published on creation of the new item, which is preferred as the page to which that
would correspond does not yet exist on production.
Code for Navigation
<navigation-list>
<navigation name="true" path="_leftnav.inc" group="everyone"
publish="no">
<li><a title="{title}"
href="{ox_autonav:shorturl}">{title}</a></li>
</navigation>
<navigation name="false" path="_leftnav.inc" group="everyone"
publish="no"></navigation>
</navigation-list>
Complete TCF Code
When all of the above elements are put together, this creates the TCF. The TCF will be saved
as pt-new-page.tcf to /_resources/ou/templates, and a corresponding gif image with the same
name (pt-new-page.gif) will be uploaded to the same folder.
OU Campus
Page Templating
Page 43 of 84
Complete Code
<variable-list>
<variable name="title" type="text" prompt="Enter Page Title:" alt="Give your
new page a title."></variable>
<variable name="description" type="text" prompt="Description:" alt="Describe
your new page."></variable>
<variable name="keywords" type="checkbox" prompt="Keywords:" alt="Select the
appropriate keywords for the page." output="xml">
University</option>
Gallena</option>
<option value="Undergraduate" selected="false">Undergraduate</option>
</variable>
<variable name="author" type="text" prompt="Author:" alt="The author name for
this page."></variable>
<variable name="pagetype" type="select" prompt="Page Type:" alt="What type of
page would you like to create?" output="xml">
</variable>
<variable name="quotes" type="select" prompt="Student Quotes:" alt="Do you
want to display the student quotes?" output="xml">
</variable>
<variable name="autonavigation" type="select" prompt="Add Navigation Item:"
alt="Add the page to the left navigation file automatically?">
</variable>
</variable-list>
<template-list>
<template prompt-prefix="New Page" filename="untitled" extension="pcf"
filename-alt="Use only lowercase letters, numbers, and hyphens." displaygroup="no" display-destination="no" display-overwrite="no" preferredredirect="yes" publish="no" autonav="{autonavigation}">pt-newpage.tmpl</template>
</template-list>
<navigation-list>
publish="no">
OU Campus
Page Templating
Page 44 of 84
</navigation>
<navigation name="false" path="leftnav.inc" group="everyone"
</navigation-list>
Example New Page Wizard
After creating the new TCF, test it!
Notes on Filenaming
The result of the above steps provides a filename field in the New Page Wizard which includes
the .pcf extension. Users will need to be made aware of the importance of leaving the extension
in place when creating a new page. If .pcf is removed and replaced with a different extension,
the XSL styling the page will not be called, resulting in no header, footer, includes, styles, or
other such elements.
Alternatively, a variable could be used for the filename, and then passed to the filename
attribute in the <template> node using curly braces. In this case, be sure to include the
attribute display-filename="no" as the filename will be populated from the variable. The
filename-alt attribute is also not needed. If using this method, be sure to train users that an
OU Campus
Page Templating
Page 45 of 84
extension should not be included when creating a new page. If an extension is included (e.g.,
html), the resulting filename would appear like this: newpage.html.pcf. It can be valuable to
update the alt text of the variable to include a note about not including the extension.
Example TCF Code
<variable-list>
University</option>
Gallena</option>
</variable>
</variable>
</variable>
</variable>
<variable name="filename" type="text" prompt="New Page Filename" alt="Use
only lowercase letters, number, and hyphens. Do not include an
extension.">untitled</variable>
</variable-list>
<template-list>
OU Campus
Page Templating
Page 46 of 84
<template prompt-prefix="New Page" filename="{filename}"
extension="pcf" display-filename="no" display-group="no" displaydestination="no" display-overwrite="no" preferred-redirect="yes" publish="no"
autonav="{autonavigation}">pt-new-page.tmpl</template>
</template-list>
<navigation-list>
publish="no">
</navigation>
</navigation-list>
Creating a New Section TCF
A new section TCF is created in a similar fashion to the new page TCF. The main differences
include:
•
•
•
Defining a directory name
Hiding the page’s filename
Calling additional templates as part of the <template-list> in order to create the
supporting files
Additionally, <directory-list> will be used as a part of this demonstration. It is possible to
create the new directory for the section without the <directory-list>, but the using of
<directory-list> allows for empty directories to be created and access settings to be
assigned. This is helpful in cases where an images or documents folder is desired.
Create the new TCF by making a copy of the existing TCF, and making the updates described:
1. Update the text within the <title> node to: New Section.
2. Add a new variable for defining the new section’s directory name:
<variable name="dirname" type="text" prompt="Enter a Directory Name:"
alt="Use lowercase letter, numbers, or hyphens only to create a new directory
name."></variable>
3. Create a new <directory-list>, and pass the newly created directory name to it.
Use {directory/} to pull in the current directory’s path, and also create a new
directory for pdfs.
<directory-list>
<parent path="{directory/}">
<directory name="new-dir">{dirname}</directory>
<directory name="new-images">{dirname}/pdfs</directory>
</parent>
<directory-list>
OU Campus
Page Templating
Page 47 of 84
4. Update the template for the page to have:
a. filename="index" — This will be the homepage for the section, and it should
always have the same name. For this instance, it should be index, but depending
on the institution’s settings, it may be default, or some other common name.
b. Remove filename-alt — Since the filename will not be displayed, the
filename-alt is no longer needed.
c. Add display-filename="no" — To prevent the user from accidentally
changing the filename from the desired index to something else, the filename is
hidden.
d. Add destination="{new-dir}" — Defines the destination for the files to be
created in the new directory. Uses the variable created in the <directory> tag
above.
e. Add force-destination="yes" — Creates the folders or directories if they
do not exist already and have not been defined.
<template prompt-prefix="New Page" filename="index" extension="pcf" displayfilename="no" destination="{new-dir}" force-destination="yes" displaygroup="no" display-destination="no" display-overwrite="no" preferredredirect="yes" publish="no" autonav="{autonavigation}">pt-newpage.tmpl</template>
5. Add in two new <template> tags. One for creating the side navigation file (_leftnav.inc)
and one for creating the breadcrumb file (_properties.inc). Make sure to change the
preferred-redirect to “no” for each of these templates.
<template prompt-prefix="Navigation" filename="_leftnav" extension="inc"
display-filename="no" destination="{new-dir}" force-destination="yes"
display-group="no" display-destination="no" display-overwrite="no" preferredredirect="no" publish="no">leftnav.tmpl</template>
<template prompt-prefix="Properties" filename="_properties" extension="inc"
display-group="no" display-destination="no" display-overwrite="no" preferredredirect="no" publish="no">properties.tmpl</template>
Complete Section TCF Code
When all of the above elements are put together, this creates the TCF. The TCF will be saved
as pt-new-section.tcf to /_resources/ou/templates, and a corresponding gif image with the
same name (pt-new-section.gif) will be uploaded to the same folder.
Complete Code
<title>New Section</title>
<variable-list>
name."></variable>
<variable name="title" type="text" prompt="Enter Page Title:" alt="Give
your new page a title."></variable>
OU Campus
Page Templating
Page 48 of 84
<variable name="description" type="text" prompt="Description:"
alt="Describe your new page."></variable>
University</option>
Gallena</option>
selected="false">Undergraduate</option>
</variable>
<variable name="author" type="text" prompt="Author:" alt="The author
name for this page."></variable>
<variable name="pagetype" type="select" prompt="Page Type:" alt="What
type of page would you like to create?" output="xml">
</variable>
<variable name="quotes" type="select" prompt="Student Quotes:" alt="Do
you want to display the student quotes?" output="xml">
</variable>
<variable name="autonavigation" type="select" prompt="Add Navigation
Item:" alt="Add the page to the left navigation file automatically?">
</variable>
</variable-list>
<directory-list>
<directory name="new-images">{dirname}/pdfs</directory>
</parent>
<directory-list>
<template-list>
<template prompt-prefix="New Page" filename="index" extension="pcf"
<template prompt-prefix="Navigation" filename="_leftnav"
extension="inc" display-filename="no" destination="{new-dir}" forcedestination="yes" display-group="no" display-destination="no" displayoverwrite="no" preferred-redirect="no" publish="no">leftnav.tmpl</template>
OU Campus
Page Templating
Page 49 of 84
<template prompt-prefix="Properties" filename="_properties"
extension="inc" display-filename="no" destination="{new-dir}" forcedestination="yes" display-group="no" display-destination="no" displayoverwrite="no" preferred-redirect="no"
publish="no">properties.tmpl</template>
</template-list>
<navigation-list>
publish="no">
</navigation>
</navigation-list>
Example New Page Wizard
Test the new section!
Converting Common Variables to Includes
When multiple TCFs are being created, it is common to have variables, template sets, and the
navigation items repeat. In order to make editing the TCFs easier in the future, it is useful to
group the repeated elements together and add them to an include file. The include file can be
OU Campus
Page Templating
Page 50 of 84
added to applicable TCFs. If the elements within the include file need to be updated, they only
need to be updated in one location, and the updates will apply to all TCFs using that file.
There are certain requirements to use include files:
1. The include file must have an extension of .inc. It cannot be a .tcf extension as it will
then be included in the New File template selecting page and will result in an error if
chosen.
2. The include file must be in the same templates directory as the TCFs referencing the
file/performing the inclusion or an error will result.
3. The content of the include file must be a valid TCF command set.
Creating the Common Variables and Navigation Includes
To create the include files for the common variables and navigation, copy the code from one of
the created and confirmed TCFs. For this demonstration, start with the pt-new-page.tcf file, and
copy the variables for:
•
•
•
•
•
•
•
Title
Description
Keywords
Author
Page type
Quotes
Auto navigation
In an empty text file, paste the variables. Save the file with the name pt-commonvars.inc, and
upload it to /_resources/ou/templates.
University</option>
Gallena</option>
</variable>
OU Campus
Page Templating
Page 51 of 84
</variable>
</variable>
</variable>
Then replace the variables in the TCF with:
<variable-list>
<include>pt-commonvars.inc</include>
</variable-list>
Repeat the steps for the two <navigation> nodes. Save the include file as pt-navigation.inc.
<navigation name="true" path="_leftnav.inc" group="everyone" publish="no">
<li><a title="{title}" href="{ox_autonav:shorturl}">{title}</a></li>
</navigation>
Then within the TCF, replace the <navigation> nodes with:
<navigation-list>
<include>pt-navigation.inc</include>
</navigation-list>
After making the changes, test the updates using the New Page Wizard.
Creating the Section Templates Include
Now that the common variables include has been created, open the pt-new-section.tcf. Start by
replacing the variables that were just put in the include file with the same include syntax, and
repeat for the navigation section.
<variable-list>
name."></variable>
<include>pt-commonvars.inc</include>
</variable-list>
<navigation-list>
<include>pt-navigation.inc</include>
</navigation-list>
OU Campus
Page Templating
Page 52 of 84
Then copy the two <template> nodes for the side navigation and breadcrumb files. Repeat
the steps for creating an include that were described above for these two <template> nodes.
Save this file with the name pt-sectiontemplates.inc.
display-group="no" display-destination="no" display-overwrite="no" preferredredirect="no" publish="no">leftnav.tmpl</template>
display-group="no" display-destination="no" display-overwrite="no" preferredredirect="no" publish="no">properties.tmpl</template>
In the pt-new-section.tcf file, replace the two <template> nodes with:
<template-list>
<template prompt-prefix="New Page" filename="index" extension="pcf"
<include>pt-sectiontemplates.inc</include>
</template-list>
These same steps could be repeated for the <directory-list>’s child nodes if desired and
repeated in other sections.
After making all changes and saving all files, test the outcome.
OU Campus
Page Templating
Page 53 of 84
Expanding the TCF
Now that two TCFs have been created, it is time to extend some additional functionality. This
portion of the tutorial will review just a few of the ways that the TCF, and then ultimately the
TMPL can be expanded. Refer to the Support site for more information on available options and
attributes.
This section will focus on:
•
•
Adding a mini-WYSIWYG Editor to the available options
Overriding access settings using <template> attributes
Adding a Mini-WYSIWYG Editor to New Page Creation
Currently, the meta description is being passed to the TMPL, and ultimately to the PCF as
starter content for the page. It is possible to make this starter content more complete and allow
for a more detailed starter page. To do this, a new variable is added to the TCF with the editor
attribute included. The echo variable in the TMPL for the content region that is currently using
“description” is then updated with the new variable.
For this demonstration, the updates will be made in the newly created common variables file,
making them available on all TCF using that include. Keep in mind that this example is using the
same TMPL for all files currently using the common variables include file, but if there were
different page templates, they would need to all be updated with the new variable name to pass
this content.
1. Navigate to /_resources/ou/templates.
2. Open and edit in source the pt-commonvars.inc.
3. After the page type variable, add a new variable for page content. Since the WYSIWYG
Editor will be used (editor="yes"), the output will have HTML tags included. Make
sure to include output="xml" to properly pass the encoding.
<variable name="pagecontent" type="text" editor="yes" rows="10" prompt="Body
Content:" alt="Add some starter content to your page."
Output="xml"></variable>
4. Save the changes.
5. In the TMPL (pt-new-page.tmpl), change the echo variable for the content to look for
“pagecontent.” Again, since HTML tags will be included, be sure to add
encoding="none" to the echo variable. Remove the <p> tags that were in place for
the description being passed.
<!-ouc:editor csspath="/_resources/ou/editor/pt-onecolumn.css"
cssmenu="/_resources/ou/editor/pt-styles.txt" width="1042"/ -->
OU Campus
Page Templating
Page 54 of 84
7. Test the updates by creating a new section using the template created earlier. Note:
Since the new page TCF created earlier was not updated to use the common variables
include, that template will not yet reflect these changes.
Overriding Access Settings
Now that the TCF was updated with a new variable, the <template> node can be updated to
override some access settings that may be defined by the directory. This allows an
administrator to define permissions based on the file and not necessarily where it appears in the
site. This can also be used in a <directory> node to override access settings for a directory
that is being created. Some good examples of how this may be used include:
•
•
•
•
Excluding include files, such as side navigation, from being included in the sitemap
generated in Setup > Sites.
Overriding access settings on property files to restrict them to administrators only.
Setting a publishers group for files that should be automatically published.
Setting a template group for a binary folder that will be created.
Pros and Cons of Auto-Publish
At this point, it is valuable to take a moment to understand the pros and cons of auto-publish on
page creation. There are many things to consider, but the main areas are:
•
•
OU Campus
Will users have approvers assigned?
How long is it generally between page creation and publish?
Page Templating
Page 55 of 84
•
Will the publishers remember to publish both the new page and the updated or new
include files?
If a user has an approver assigned, or there is an approver assigned to the directory where the
new files are being created, an error will be encountered on page creation when using autopublish. The user then needs to dismiss the error, cancel the page creation, and refresh to see if
any or all of the files were actually created. Depending on the TCF configuration and the
number of files that are being created, it is possible that all necessary files will not be created.
For instance:
•
•
•
•
The user is creating a new section template, which includes an index page, side
navigation, and breadcrumb file, in that order.
The side navigation and the breadcrumb file are both set to auto-publish.
The user has an approver.
When the user attempts to create the new section, the auto-publish will “choke” on the
side navigation resulting in the breadcrumb file never being created, which will cause an
error on the page.
This can be avoided by not auto-publishing the files, which means that the publisher will need to
remember to publish them when the page initially gets published. Alternatively, the user can be
placed in a publishers group that gets assigned to those files via the TCF. The user can then
publish just those files, allowing the auto-publish to complete on page creation. If the autopublish is set on new page creation and not just new sections, then in this case a broken link will
exist on the production server until the new page is published as the side navigation will appear
on other pages in the section and have a link to a page that does not yet exist.
As a best practice, do not auto-publish files as having pages on production that link to nonexistent pages is not preferred. Keep in mind, however, that this requires publishing more than
one file when the page is initially ready to be published. Be sure all users are properly trained on
the needs of the templates.
Setting Overrides
In this example, the settings to be overridden are:
•
•
•
Defining a folder only template group for the pdfs directory.
Excluding both the properties file and side navigation file from being indexed by the
sitemap.
Defining the access group for the properties file as “None.”
These changes will be made in this example in the new section template created earlier.
1. Navigate to /_resources/ou/templates.
2. Open and edit in source the pt-new-section.tcf.
3. In the <directory> node for creating a new pdfs folder, add: templategroup="Folder Only"
<directory-list>
OU Campus
Page Templating
Page 56 of 84
<directory name="new-images" template-group="Folder
Only">{dirname}/pdfs</directory>
</parent>
<directory-list>
4.
5.
6.
7.
Save the changes.
Navigate to the pt-sectiontemplates.inc file and edit with the source editor.
In the first <template> node for the navigation, add: exclude-sitemap="yes"
In the second <template> node for the properties, add: exclude-sitemap="yes" and
group="None"
display-group="no" display-destination="no" display-overwrite="no" preferredredirect="no" publish="no" exclude-sitemap="yes">leftnav.tmpl</template>
display-group="no" display-destination="no" display-overwrite="no" preferredredirect="no" publish="no" exclude-sitemap="yes"
group="None">properties.tmpl</template>
9. Test by creating a new section and verify that the settings were passed.
Index Access Settings
The access settings were all inherited from parent directory.
OU Campus
Page Templating
Page 57 of 84
LeftNav Access Settings
The access settings were all inherited from parent directory, except the Exclude From
Sitemap.
Properties Access Settings
The access settings were all inherited from parent directory, except the Access Group and
Exclude From Sitemap.
OU Campus
Page Templating
Page 58 of 84
PDFs Access Settings
The access settings were all inherited from parent directory, except the Template Group.
OU Campus
Page Templating
Page 59 of 84
Passing Directory Variables
Directory variables can be an important tool for a site developer or administrator. The concept is
simple. Each directory variable has a property name, and a corresponding property value
represented as a snippet of text. These variables have context. For instance, applying a
directory variable to the “/academics” folder will set that value for that directory and all of the
directories below it. Therefore, “/academics/biology” will have this value defined, but a sibling
directory such as the “/athletics” directory will not. However, this value is not permanently set as
the value can be overridden further down in the directory structure by simply recasting a
variable with the same name and different value.
Example Directory Variables
Using Directory Variables
The directory variable system was designed to serve multiple purposes. Currently, it has three
pre-populated variable options, which can be used during the new page creation process and as
a part of the XSL.
The following are system-level directory variables:
1. ox_ftp_image_root: Redefines the default image directory in the WYSIWYG Editor
for this directory and all children directories. The value is the path from the site root to
the target image directory.
For example: /admissions/images or /athletics/baseball/images
2. ox_ftp_media_root: Redefines the default media directory in the WYSIWYG Editor
for this directory and all children directories. The value is the path from the site root to
the target image directory.
For example: /admissions/media or /athletics/baseball/media
3. publish: Defines publishing actions. It is used with a value of skip:[extensions
list]. Extensions are separate with a comma and no spaces.
When the ox_ftp_image_root or ox_ftp_media_root are set for a given directory, a user will be
placed into that set location when they use the Insert/Edit Image or Insert/Edit Embedded
Media tools of the WYSIWYG Editor.
OU Campus
Page Templating
Page 60 of 84
Directory variables can be used in:
1.
2.
3.
4.
5.
In the XSL
In the echo var of the TMPL
In the <directory-list>’s child nodes
In the <template-list>’s child nodes
In the <navigation-list>’s child nodes
Passing a Directory Variable to the TMPL
Using directory variables in the XSL allows the value to remain variable after page creation.
Using a directory variable in the TMPL passes the current value at the time of page creation.
Therefore, if the directory variable is updated later, the current pages will not be affected.
There are still valuable use cases for this. One such use case is to define a path for a
filechooser that is part of the page properties. This can allow the default location to be based on
the directory in which the page was created.
1.
2.
3.
4.
Navigate to /_resources/ou/templates.
Copy article.tmpl to the same directory, and rename it to pt-article.tmpl.
Open and edit pt-article.tmpl.
In the parameter named “article_image,” replace the current path
(/_resources/images/news) with .
5. Test by creating a new page, and then editing the page properties. Make sure to use the
Page Templating New News TCF.
OU Campus
Page Templating
Page 61 of 84
Creating an RSS Feed Template
This section explains how to create the template for a new page wizard (TCF) that automatically
generates an RSS item at page creation time. While the site being used for the tutorial already
has one, which was used when discussing Directory Variables, it is still valuable to understand
the attributes that can be passed, and the options available.
There are several reasons why passing the variables via the TCF is helpful:
•
•
•
•
It reduces replication of work effort and minimizes errors
It limits the user’s need to touch the items
It lowers the user’s need to understand RSS
It can give additional control to the user as they can choose the feeds to which pages
are associated
The page and RSS item can use the same variable information to whatever level is desired. For
instance, the title can be used on both the page and as a part of the RSS item. So the user only
has to enter it once.
Additionally, users do not have to understand the RSS item fields as they will pre-populate, and
the user has only to edit the page in the traditional manner. While the RSS Items icon will show
on the Page Actions as soon as an RSS feed is assigned to the page, the user can ignore it
unless changes need to be made.
This portion of the tutorial will review:
•
•
•
•
Passing the title and short description to the RSS item on page creation
Passing media selections to the RSS item
Allowing users to select the feed to which the page should be assigned during page
creation
How to pass categories on page creation, which can then be used by a parsing script to
display dynamic information on the page
Basic RSS Variables
•
•
•
•
•
Title: Generally matches page title.
Description: Can be the meta data and is usually short. It can be referred to as an
article teaser.
Author: Who published the page or wrote the news article.
Link: A link back to the page from the item. This is included automatically and does not
have to get passed.
Publication Date: Entered by the system upon publish.
Setting Up the Template
To get started, make a copy of the pt-new-page.tcf found in /_resources/ou/templates.
Rename this TCF pt-new-news.tcf.
OU Campus
Page Templating
Page 62 of 84
Edit the newly created pt-new-news.tcf:
1. Change the current title to a new title: <title>New News Page</title>
This is the name that will appear at the top of the New Page Wizard.
2. Several of the basic variables already exist in this file.
3. Update the alt tag for the description variable to read: alt="Describe your new
page. This will be used as meta data and for the RSS item."
4. Add display="no" to the page type variable, and change the selected option to
Article. Make sure that Content and One Column are set as selected="false".
page would you like to create?" output="xml" display="no">
<option value="article" selected="true">Article</option>
<option value="content" selected="false">Content</option>
</variable>
5. Add the following attributes to the <template> node in order to echo in the values that
are entered into the variables for title, description, and author into the RSS item:
a. rss-title="{title}"
b. rss-description="{description}"
c. rss-author="{author}"
6. Change the TMPL being called to pt-article.tmpl.
<template prompt-prefix="New Page" filename="{filename}" extension="pcf"
display-filename="no" display-group="no" display-destination="no" displayoverwrite="no" preferred-redirect="yes" publish="no"
autonav="{autonavigation}" rss-title="{title}" rssdescription="{description}" rss-author="{author}">pt-article.tmpl</template>
8. Upload an image with the same name as the TCF: pt-new-news.gif.
Test the New Template
In order to test the new template, start by
1. Navigating to Setup > Template Groups.
2. Edit the News and Section template group.
3. Check the box under the new template and save the changes.
After adding the template to the template group:
1. Navigate back to Content > Pages.
2. Click on the breadcrumb to get to the root of the site.
OU Campus
Page Templating
Page 63 of 84
3. Click on the access settings next to the news directory, and ensure that an RSS Feed is
selected in the drop-down. If not, select one. Also check that the News and Section
template group is assigned. Make any necessary changes, and Save the changes.
4. Enter into the news directory, and click New.
5. Select the new template.
6. Complete the fields, and click Create.
7. Verify that the Title, Description, and Author are populated in the RSS Items icon.
8. Publish the page.
9. In another tab, navigate to the live feed and observe the new item.
Passing Media Items
In addition to the standard feed item fields, media can be passed to the RSS item as well. The
media will be used by feed readers that support media. The selected media can also be passed
to the page content upon page creation and can be used with scripts that parse and display the
feed items on a page, such as the homepage.
1. Navigate to the pt-new-news.tcf in the /_resources/ou/templates.
2. Add the following variables to the TCF. The variables:
a. Allow the user to determine whether a selected image is displayed on the page
or not.
b. Allow the user to select an image, which will be used both as part of the page
when image teaser is set to yes and as part of the media options.
c. Allow the user to select a thumbnail image, which can be used as part of the
output display
<variable name="image_teaser" type="select" group="Everyone" prompt="Show
Article Image:" alt="Do you want to display the article with an image
teaser?" output="xml">
</variable>
<variable name="article_image" type="filechooser" group="Everyone"
prompt="Article Image:" alt="Please choose a suitable image for the article.
This will be used as the RSS image too."
path="/images/news/">/images/news/american_football.jpg</variable>
<variable name="thumb" type="filechooser" path="/images/news/thumbs/"
prompt="Thumbnail Image:" alt="RSS Thumbnail
Image">/images/news/thumbs/american_football.jpg</variable>
3. In the <template> node, add the following. The order is important and must always be
input as described. The ^^ identifies that a new value is being passed. This passes:
a. Title: The title is passed as the title of the image.
b. Link: The full sized image is passed as the image link.
c. Description: The description is passed as the description of the media.
d. Thumbnail: A thumbnail image is passed as the thumbnail.
e. Keywords: This last option would pass keywords to the media. This is being
skipped at this time.
rss-media="{title}^^{article_image}^^{description}^^{thumb}"
OU Campus
Page Templating
Page 64 of 84
5. Open the pt-article.tmpl file.
6. Change the path for the article image parameter back to /images/news.
<parameter name="article_image" type="filechooser" group="Everyone"
prompt="Article Image:" alt="Please choose a suitable image for the article."
path="/images/news"></parameter>
7. Note the two parameters that are echoing in the image teaser and article image
selections.
Test the changes:
1.
2.
3.
4.
5.
6.
Click on the breadcrumb to get to the root of the site.
Enter into the news directory, and click New.
Select the new template.
Complete the fields, taking note of the newly added ones, and click Create.
Verify that the Title, Description, and Author are populated in the RSS Items icon.
Click on the media, identified by the title, and verify that all media options, except
Keywords, were passed.
7. Publish the page.
8. In another tab, navigate to the live feed and observe the new item.
Selecting a Feed
A template has been created that passes the necessary RSS item information. However, an
administrator still has to set the feed to which new items are added in the access settings prior
to the template being used. This feed selection can be passed by the TCF in one of three ways:
1. With a hard-coded feed selection in the <template> node
2. Using a filechooser, allowing user selection
3. Using a drop-down, allowing user selection
The benefit of allowing users to select which feed they want to publish to is that it empowers
users and minimizes the amount of Level 10 administrator intervention that is required. It also
allows items to be added to the appropriate feeds when multiple feeds are being used.
OU Campus
Page Templating
Page 65 of 84
Either of these can be created by adding to the previously added RSS variables. This entails
creating another variable with the named “feed.” Since a template already exists in the sample
site that uses a drop-down variable, this example will use a filechooser. It is important to
understand the pros and cons of both.
Drop-Down
A drop-down selector gives the administrator the power to choose which feeds are available to
the user for selection. This helps eliminate the inclusion of feeds that may have specific
purposes and should only contain items that administrators specifically designate. It also
prevents users from accidentally choosing an aggregate feed, which should only have members
and not its own individual feed items. Drop-down selectors also give the administrator the ability
to add friendlier names for the feeds rather than the filename.
However, if additional feeds are added, the administrator will need to update the template to
make them available.
Filechooser
The filechooser option allows users to choose from all currently published feeds. Administrators
do not have to touch the templates when adding new feeds.
The user does have to be aware of which feeds are aggregate feeds as items should never be
added to those, and selecting a feed may be more difficult due to the selection being made by
the filename.
If using the filechooser option, make sure to Rebuild the feed when first creating it in order for it
to be available in the filechooser.
Creating the Filechooser Variable
To add a filechooser variable for selecting a feed, navigate to /_resources/ou/templates, select
the pt-new-news.tcf file, and add the following after the media variables that were added
previously:
<variable name="feed" type="filechooser" path="/rss" lockout="yes"
prompt="RSS Feed:" alt="Select an RSS feed for the
page.">/rss/news.xml</variable>
A new attribute of lockout="yes" has been added to restrict users from selecting a file from a
different folder.
Pass this new variable to the <template> node. In the template node add: rssfeed="{feed}"
Save the changes.
Test the changes:
1.
2.
3.
4.
5.
OU Campus
Click on the breadcrumb to get to the root of the site.
Enter into the news directory, and click New.
Select the new template.
Complete the fields, taking note of the newly created filechooser, and click Create.
Click on the access settings for the new file, and observe the RSS Feed selected.
Page Templating
Page 66 of 84
Adding Category Selections
In addition to the common options already discussed, it is also possible to pass extra XML
nodes. This is generally used for things like passing a homepage indicator or categories. These
extra XML nodes can then be used in the script that parses and displays the feed on a page.
For instance, many feed items may be added to a given feed, but only certain items may be
desirable to have on the homepage. A selector can be added to the TCF allowing the user to
choose whether or not the item is added to the homepage, which then gets passed to the Extra
XML.
To add extra XML nodes, define the variable selectors in the TCF. Additionally, two variables
that are not displayed need to be created. These create the opening and closing tags for the
extra XML nodes.
As an example, if a homepage selector was desired, the following could be added to the TCF:
<variable name="rss-home" type="select" prompt="Add to homepage?" alt="Do you
want to display the item on the homepage feed?">
<option value="yes" selected="true">Yes</option>
<option value="no" selected="false">No</option>
</variable>
<variable name="hopen" display="no"><home></variable>
<variable name="hclose" display="no"></home></variable>
This creates both the drop-down for the user’s selection, and the opening and closing tags for
the extra XML node.
Drop-Down in TCF
Within the <template> node, add the rss extra attribute: rss-extra="{hopen}{rsshome}{hclose}"
This will pass the variable data to the RSS item.
Populated Extra XML Node
The new template is now ready to use with all desired data.
OU Campus
Page Templating
Page 67 of 84
Converting to OUC Nodes
In replacement of the standard commented div and editor tags, nodes can be used. There are a
variety of benefits to this, including:
1. Increased validation of the document. With the use of nodes, the document becomes
fully XML valid.
2. The ability to change the layout of the WYSIWYG in-context editing based on a Page
Properties defining the layout.
3. Pre-configuration for future use.
To use ouc nodes, updates need to be made to the XSLs, including:
1. An additional template match, which passes a wysiwyg-class attribute to the div tag.
This is used for the in-context editing.
2. A variable for identifying the class to be passed.
3. Updates to the XPaths. Since the tags are now actual nodes, they need to be included in
the XPaths.
4. Update to the main document template match identifying the root node of the document.
For the purposes of this tutorial, assume those changes have already been made.
Updating the PCF
Navigate to the create-new-page.pcf file and make a copy of it with the name create-new-pagediv.pcf. Open this new document.
Start by changing the pcf-stylesheet declaration to point to default-oucdiv.xsl.
<?pcf-stylesheet path="/_resources/xsl/default-oucdiv.xsl" extension="html"
title="Web"?>
Then add a namespace to the root node. This is used because ouc: will be added to the new
nodes. Namespaces provide a method to avoid element name conflicts, and whenever a new
namespace is used within a file, the use of that namespace needs to be declared, along with a
URI to the schema for the namespace. This URI is called a namespace name.
Update the <document> node to read as:
<document xmlns:ouc="http://omniupdate.com/XSL/Variables">
Replace all commented OmniUpdate tags with a node: <ouc:NAME>.
•
•
•
•
•
OU Campus
<!-<!-<!-<!- becomes <ouc:properties>
/ouc:properties --> becomes </ouc:properties>
ouc:div --> becomes <ouc:div>
/ouc:div --> becomes </ouc:div>
ouc:editor --> becomes <ouc:editor>
Page Templating
Page 68 of 84
•
 becomes </ouc:editor>
Leave all attributes alone. They will remain the same.
Save the page. The preview should appear exactly the same as it did before the edits.
Essentially the page has been converted to use the <ouc:NAME> tags.
WYSIWYG-CLASS
In order to take full advantage of the new nodes, the wysiwyg-class attribute can be used. The
wysiwyg-class attribute allows for the CSS applied to the editable region’s WYSIWYG Editor to
change based on a Page Property. It also allows one CSS file to be used for all editable regions
with multiple body tags that include classes defining the editable region in order for the
background image and margins to change appropriately.
The wysiwyg-class attribute can be added to <ouc:div> tag via the XSL and the
<ouc:editor> tag. The attribute from within the <ouc:editor> tag is used to give static
information to the CSS file. For instance, if there are multiple editable regions, the attribute will
identify the region and therefore the body CSS that should be applied to the editor. In this case,
the class will be added to the <ouc:editor> tag for the title.
Within the create-new-page.pcf file, find the editor tag for the title, and change the CSS file to ptoucdiv.css. Also add wysiwyg-class="title".
<ouc:editor csspath="/_resources/ou/editor/pt-oucdiv.css"
cssmenu="/_resources/ou/editor/pt-styles.txt" width="1042" toolbar="Title
Toolbar" wysiwyg-class="title" />
Also update the editor tag for the main content area to point to the new CSS file.
<ouc:editor csspath="/_resources/ou/editor/pt-oucdiv.css"
cssmenu="/_resources/ou/editor/pt-styles.txt" width="1042"/>
Save the changes. The preview should appear as expected based on the page’s configuration.
Creating the Variable CSS
To see the background of the file change based on the editable region and the page layout, the
CSS file needs to be configured.
The body selectors already in use will be combined into one file, and classes will be applied,
allowing the editor to pull the correct body background based on the wysiwyg-class attribute
values. This example will have five.
1.
2.
3.
4.
A default one column layout
A content layout
A title layout for one column pages
A title layout for content pages
The CSS file will be configured as follows:
body {
OU Campus
Page Templating
Page 69 of 84
background-image: url("/_resources/ou/editor/pt-onecolumn.jpg");
min-width:0px;
color:#4B4A4A;
line-height: 20px;
}
body.content {
background-image: url("/_resources/ou/editor/pt-twocolumn.jpg");
min-width:0px;
color:#4B4A4A;
line-height: 20px;
}
body.title.onecolumn {
background-image: url("/_resources/ou/editor/pt-onecolumntitle.jpg");
margin: 168px 17px 0 11px;
min-width:0px;
font-size:28px;
color:#4B4B4B;
line-height: 20px;
}
body.title.content {
background-image: url("/_resources/ou/editor/pt-twocolumn-title.jpg");
min-width:0px;
color:#4B4A4A;
line-height: 20px;
}
p {
margin: 0 0 20px;
OU Campus
Page Templating
Page 70 of 84
}
p, li, blockquote {
line-height: 1.4em;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 10px;
}
h1, h2, h3, h4, h5, h6 {
color: #4B4B4B;
}
main.css
h3 {
font-size: 24px;
}
Take note that the body selectors have different classes applied to each, except the first. The
first one is the default. This is used when classes are not being applied or do not exist in the
CSS file.
Note: If a page is not checked out to a user when he/she enters into an editable region, the
class will not be passed, and the default body selector will be used. It is valuable to check out
the page prior to editing in order to ensure the proper CSS is being applied to the editor.
After saving the file, upload it to the /_resources/ou/editor folder and publish it.
Test the page by editing different editable regions and changing the Page Properties.
The page is now using the ouc nodes and corresponding CSS. Save this page as a TMPL in
order to use it to create new pages. Remember that TCFs may need to be updated to point to
the new TMPL if it has a new name.
OU Campus
Page Templating
Page 71 of 84
Creating a MultiEdit Template
The MultiEdit editor allows form-controlled editing for XML and other structured content.
Administrators can create forms-based templates that present users with an easy-to-follow
guide for adding content to a structured layout. Templates can include both style-free form fields
and WYSIWYG content editing areas. MultiEdit is also valuable as it ensures that the same
node structure is used for every document.
MultiEdit can be set up to show only the forms-based editor rather than an editable region with
the WYSIWYG toolbar. It can also be configured so that both editors are available However, it is
not advised that a MultiEdit region is also editable via the standard editor. Instead, there may be
a combination of form-type elements and standard editable regions on a given page.
The form template can be designed so that only a specific type of information can be added. For
example, content types include text area, radio button, Asset Chooser, check box, drop-down
selection box, or image inserter.
MultiEdit tags are a special form of OmniUpdate tag that allows a user to edit multiple content
regions at one time on a page. A page can have standard tags or a MultiEdit tag, or a
combination of both. MultiEdit tags are surrounded by OmniUpdate editable region tags with the
button attribute set to hide. Button attribute controls whether the user is presented the edit
button in the preview screen or not. Setting the button="hide" will make the region only
editable via MultiEdit.
In some cases, the XSL is set to handle the MultiEdit fields individually, and the styling is
actually controlled by the XSL. This is actually preferred as it allows one file to be updated and
affect all files using it. In these cases, the ability to have a combination of editable region areas
and MultiEdit fields on a given page may be hindered.
OU Campus
Page Templating
Page 72 of 84
When the form is saved, the data is transformed to a desired and predefined layout and with the
appropriate styling applied.
To create a MultiEdit PCF, a traditional OU Campus Editor tag is replaced with a MultiEdit tag
for each of the elements that should be included in the form. These tags can be formatted for
OU Campus
Page Templating
Page 73 of 84
different types of data input, including text, text areas, assets, radio button, checkbox, and dropdown selections, as well as an image file chooser. When the user attempts to edit the page,
he/she will use the orange MultiEdit button at the top of the page instead of an edit button
traditionally found near the content to be edited:
. This will open the MultiEdit form
instead of opening the full WYSIWYG Editor in which traditional pages are edited.
For a complete list of the attributes available with a MultiEdit tag, see the Page Tagging
Reference page on the Support site: Development > Page Tagging > Page Tagging Reference.
Example of a Multi-Edit Content Area
<content>
<faculty-image>
<div style="float:right;font-size:10px;padding:5px;margin:5px;">
<div class="portfolio-img">

<img width="320" height="180" title="" alt=""
src="/_resources/images/sample/portfolio1.jpg"/>

<span class="portfolio-overlay"
style="float:right;font-size:10px;padding:5px;margin:5px;height: 180px;left:
325px;top: 4px;"> </span>
<br />
</div>
<br />
</div>
</faculty-image>
<desig>
<h3>Richard Higgins, Ph.D,
<i>Professor of Data IntelligenceArizona State University, Ph.D.,
Computer Science</b><br />
<h4>Biography</h4>
<bio></bio>
</content>
Adding MultiEdit Tags
For the tutorial, a page has been configured with a couple of MultiEdit fields already in place.
This tutorial will guide through the process of converting a current standard editable region to
MultiEdit tags.
Note: The PCF that will be used is using the commented OmniUpdate tags since the XSL to
which it is pointing is still configured for the commented tags rather than the individual nodes.
Start by previewing the new-multiedit.pcf file that is within the /workshop-page-templating
directory. Then click on Edit and observe the two edit buttons: MultiEdit and a standard editable
region.
The image, and title are within the MultiEdit fields, while the rest of the content can be edited in
the WYSIWYG Editor.
OU Campus
Page Templating
Page 75 of 84
Current MultiEdit Fields
Current Editable Region Configuration
Edit the page using the Source Editor. Ensure that the code, especially the highlighted portion,
appears as identified here:
title="Web"?>
<?pcf-stylesheet path="/_resources/xsl/fac_profile.xsl" extension="xml"
title="XML"?>
OU Campus
Page Templating
Page 76 of 84
<document>
<config>
<parameter name="pagetype" type="select" group="Everyone"
prompt="Page Type" alt="Please choose an appropriate page type">
<option value="onecolumn" selected="false">One
Column</option>
</parameter>
<parameter name="image_teaser" type="select" group="Everyone"
prompt="Article Image" alt="Do you want to display the article with an image
teaser ">
</parameter>
<parameter name="article_image" type="filechooser"
group="Everyone" prompt="Article Image" alt="Please choose a suitable image
for the article"
path="/">/img/gallena_images/gossling_hall_horizontal.jpg</parameter>
<parameter name="article_desc" type="text" group="Everyone"
prompt="Article Description" alt="Please enter a suitable article
heading">Gallena University Named to the President’s Higher Education
Community Service Honor Roll </parameter>
<parameter name="author" type="text" group="Everyone"
prompt="Article Author" alt="Please enter an article author name">Michael
Monina</parameter>
alt="Pick select the appropriate keywords for the page">
University</option>
Gallena</option>
</parameter>
</config>
<metadata>
<parameter name="keywords" type="checkbox" group="Everyone"
prompt="Keywords" alt="Select keywords that relate to this page.">
OU Campus
Page Templating
Page 77 of 84
<option value="academics" selected="false">Academics</option>
<option value="admissions" selected="false">Admissions</option>
<option value="matriculation"
selected="false">Matriculation</option>
<option value="athletics" selected="true">Athletics</option>
<option value="sports" selected="true">Sports</option>
<option value="basketball" selected="true">Basketball</option>
<option value="football" selected="true">Football</option>
<option value="volleyball" selected="true">Volleyball</option>
<option value="tennis" selected="true">Tennis</option>
</parameter>
<meta name="Description" content="Gallena University was recently named
to the President’s Higher Education Community Service Honor Roll for 2010 "
/>
<meta name="Keywords" content="" />
<meta name="Author" content="Michael Monina" />
</metadata>
<title>Carol Clements</title><!-/ouc:properties -->
<content>
<faculty-image>


<span class="portfolio-overlay"
style="float:right;font-size:10px;padding:5px;margin:5px;height: 180px;left:
325px;top: 4px;"> </span>
<br />
</div>
<br />
</div>
</faculty-image>
<desig>
<h3>Carol
Clements, <i>Professor of Marketing and Public Relations<!-ouc:editor csspath="/_resources/ou/editor/twocolumn_content.css"
cssmenu="/_resources/ou/editor/styles.txt" width="1042" -->
<strong>Arizona State University, Ph.D., Chemistry</strong><br />
<h4>Biography</h4>
<bio><p>Director for the Gallena Center for Distance Education.
Dr. Harris is also the Director of <strong>Biology Technology</strong>
at Gallena University. Prior to these positions, Dr. Harris taught
chemistry at Arizona State for over 10 years. Before coming to
Gallena, He has been the Associate Manager for the Gallena Link-to
Learn Initiative and has served as the director or co-director of numerous
grant projects related to technology.</p></bio>
<h4>Publications</h4>
<ul>
<li>Harris, Greg C. and John Sampson. "Gian Chloroplast Isolation."
Macrochemical Journal. 41(1-2), 875-350 (2008).</li>
<li>Harris, Greg C., Ben J. Tom and Greg P. Moore. "Determination of the
Photochemical Absorption of the Lichen Using Photoacoustics." Photochemistry
and Photobiology 39(2), 909-7195 (2008).</li>
</ul>
</content>
</document>
It is possible that this may appear differently if at some point this page was updated. To create
the MultiEdit fields and see the expected styling, make sure that, at a minimum, the node
structure matches.
The available attributes for MultiEdit are similar to those of variables and parameters. The three
required or, in the case of alt, strongly suggested fields are displayed below. For a complete list
of attributes see the Support site, and navigate to Development > Page Tagging > Page
Tagging Reference.
Attribute Name
Syntax Example
Description
type
type="text”
Required
Defines the type of field. Can be:
text, textarea, image, radio, checkbox,
select, asset
The attributes may be used in conjunction
with other attributes. For instance, textarea
may be used with editor to allow for a miniWYSIWYG Editor to be used.
prompt
prompt=”Education”
Required
Provides a label for the user, defining the
field.
OU Campus
Page Templating
Page 79 of 84
Attribute Name
Syntax Example
Description
alt
alt=”Enter the name of the
school you attended.”
Provides instructional text to the user.
To update the current editable region and convert the nodes into MultiEdit fields:
1. Remove the current div tag with label="content" and its corresponding editor tag.
2. Wrap the education field in a div tag with the label="education" and a MultiEdit tag
with type="text". (See the code example for all attribute information.) Be sure to put
the div and MultiEdit tags within the <strong> tags.
3. Wrap the biography field in a div tag with the label="biography" and a MultiEdit tag
with type="textarea". Be sure to put the div and MultiEdit tags within the <bio>
tags.
4. Wrap the publications field in a div tag with the label="publications" and a
MultiEdit tag with type="textarea". Be sure to put the div and MultiEdit tags after the
<h4> tags.
The button should be hidden for each of the div tags.
<faculty-image>


<span class="portfolio-overlay" style="float:right;fontsize:10px;padding:5px;margin:5px;height: 180px;left: 325px;top:
4px;"> </span>
<br />
</div>
<br />
</div>
</faculty-image>
<desig>
<h3>


Carol Clements
,
<i>


OU Campus
Page Templating
Page 80 of 84
</i></h3>
</desig>
<strong>


Arizona State University, Ph.D., Chemistry

</strong><br />
<h4>Biography</h4>
<bio>


<p>Director for the Gallena Center for Distance Education. Dr. Harris
is also the Director of <strong>Biology Technology</strong> at Gallena
University. Prior to these positions, Dr. Harris taught chemistry at Arizona
State for over 10 years. Before coming to Gallena, He has been the
Associate Manager for the Gallena Link-to Learn Initiative and has served as
the director or co-director of numerous grant projects related to
technology.</p>

</bio>
<h4>Publications</h4>


<ul>
<li>Harris, Greg C. and John Sampson. "Gian Chloroplast
Isolation." Macrochemical Journal. 41(1-2), 875-350 (2008).</li>
<li>Harris, Greg C., Ben J. Tom and Greg P. Moore. "Determination
of the Photochemical Absorption of the Lichen Using Photoacoustics."
Photochemistry and Photobiology 39(2), 909-7195 (2008).</li>
</ul>

Save the changes, and click Edit. Notice that the editable region button is gone. Click on the
MultiEdit button. The fields have been added there.
OU Campus
Page Templating
Page 81 of 84
The page can now be edited with MultiEdit.
OU Campus
Page Templating
Page 82 of 84
Understanding Template Inheritance
The templates configured in this tutorial were saved to the local /_resources/ou/templates
folder. That folder is specific to the site on which it exists, which means that if there are multiple
sites within an account, they cannot share these page templates.
OU Campus has a hidden, system-level folder called OMNI-INF, which can also house
templates. This OMNI-INF folder then allows the templates to be shared across many sites.
These files can only be accessed via FTP and WebDAV for editing purposes, however.
OU Campus also has a structure that uses skins, accounts, and sites.
•
•
•
Skin: Top of the OU Campus environment. It houses accounts within it. It can contain
multiple accounts. Accounts do not “talk” to each other, meaning that they do not share
files, settings, or other configuration elements.
Account: Within a skin, it is the beginning of the OU Campus interface. It contains the
sites for the account. The users, groups, toolbars, and font size sets created in the
account and shared across sites.
Site: The individual site contains the pages and settings.
Each of these levels includes an OMNI-INF folder. Most commonly, files are shared across sites
within the same account, which means that templates are added to the OMNI-INF/templates
folder at the account level.
When files are housed in the OMNI-INF folder, they will still appear in Setup > Templates and
Setup > Template Groups allowing for access configuration to still take place. The files can
also be overridden. If the OMNI-INF folder at the account level contains new-page.tcf, newpage.tmpl, and new-page.gif, and new-page.tcf, new-page.tmpl, and new-page.gif are added at
the site level, the site templates will take precedence. Since the same names were used, any
Templates settings or template groups will still be honored. Just as with editing, the closer the
file is to the content, the higher its precedence.
It is important to remember when creating templates and using the OMNI-INF folder that all files
needed must be at the same level as each other. This means that whichever folder is used to
house the templates must contain the TCF, its corresponding image, any include files it is using,
and the TMPLs it is calling. If a file is to be overwritten closer to the content, all files must be
included in that level. Additionally, if the files are within the site’s Content > Pages view, the
image must be published to production.
OU Campus
Page Templating
Page 83 of 84
Best Practices
In order to make page templating as easy as possible, keep these best practices in mind:
•
•
•
•
•
•
•
•
•
OU Campus
Repurpose content as often as possible to reduce the number of files that need to be
changed. This can be accomplished using includes in the TCF, as well as calling the
same TMPL as often as possible.
Use clear naming conventions for templates. When trying to determine the purpose of a
template, the filename can go a long way.
Create contextual New Page Wizard images to help users make the proper selections.
Utilize the Styles drop-down to help give users flexibility while keeping them locked into
the institution’s CSS.
Plan out group access, general access settings, and binary management in order to
determine what attributes need to be passed in the TCF and if empty folders need to be
created upon the creation of new directories.
When possibly, share templates across sites to keep the website as a whole consistent.
Remember to carefully review code. All tags must close, and proper quotations must be
used.
Be conscientious of XML rules in order to avoid errors.
Keep things simple. When templates get overly complicated, it is easy to encounter
errors because there are so many moving parts.
Page Templating
Page 84 of 84

Page Templating - OU Campus Support Site

Transcription

Similar documents

Retailigence - Sizmek Ad Feature

The St. Paul Chapter meets the 2nd Thursday of each month at

Project from Sew4Home.com

December 2012 - The Compassionate Friends Australia

Instructions for Revealing Oval Cards

you need not walk alone. we are the compassionate friends.

Jan.2012.web - The Warrior

Scraping the Web for Arts and Humanities

Adaptive Layout for Dynamically Aggregated Documents

Bringing Web Services to IoTivity

111 - Florida Public Service Commission

ANSI/NISO Z39.18-2005 (R2010), Scientific and Technical Reports

Apr - Alternity

The Bsp Stylebook

alt_charlie 2015-08-01 01:46:00 Private message to Ginny