page templating tutorial

Page Templating Tutorial OU Campus

OmniUpdate, Inc. 1320 Flynn Road, Suite 100

Camarillo, CA 93012

http://www.facebook.com/omniupdate

https://plus.google.com/u/1/110785395452354106347

http://www.linkedin.com/companies/105547

http://omniupdate.com/syndication/aggregate.xml

https://twitter.com/omniupdate

http://www.youtube.com/user/OmniUpdateCMS

OU Campus Page Templating of 84

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.

http://www.omniupdate.com/

http://support.omniupdate.com/

http://ocn.omniupdate.com/


Contents

Contents ................................................... 3 Introduction .............................................. 5

Components ........................................... 5 Terminology ............................................ 5

Creating the Initial PCF ............................ 6

Example HTML .............................................. 6

Parsing the File to Create XSL and

PCF .................................................................. 11

Creating Initial HTML File ................. 11

Converting the HTML File to a PCF

...................................................................... 13

Example PCF ........................................... 15

Example Using Multiple PCF-

Stylesheet Declarations ...................... 16

Creating Editable Regions and WYSIWYG Styling .................................. 19

Making the File Editable in the WYSIWYG19 Creating Multiple Regions ..................... 20 Adding In-Context Styling to the WYSIWYG Editor ................................. 21

Creating In-Context Editing Files ....... 22

Adding the Editor Tag to the Editable

Regions .......................................................... 23

Creating the Styles Drop-Down File 26

Configuring Page Parameters and Properties ............................................... 29

Configuring the Page Parameters ......... 29

Adding the Meta Data ........................... 31

Creating Page Properties ...................... 31

Turning the PCF to a TMPL ................... 35

Examples of Other TMPLs .................... 39

LEFTNAV.TMPL ........................................... 39

PROPERTIES.TMPL..................................... 39

Creating the TCFs ..................................40 Creating a New Page TCF .................... 40

Title.................................................................. 40

Variable List ................................................. 40

Template List............................................... 42

Navigation List ........................................... 43

Complete TCF Code ................................ 43

Notes on Filenaming ............................... 45

Creating a New Section TCF ................ 47

Complete Section TCF Code ................ 48

Converting Common Variables to Includes ................................................ 50

Creating the Common Variables and

Navigation Includes ................................. 51

Creating the Section Templates

Include ........................................................... 52

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

Setting Overrides ...................................... 56

Passing Directory Variables ..................60 Using Directory Variables ..................... 60 Passing a Directory Variable to the TMPL61

Creating an RSS Feed Template ...........62


Basic RSS Variables ............................ 62 Setting Up the Template ....................... 62

Test the New Template .......................... 63

Passing Media Items ............................ 64 Selecting a Feed................................... 65

Creating the Filechooser Variable ..... 66

Adding Category Selections ................. 67 Converting to OUC Nodes ..................... 68

Updating the PCF ................................. 68

WYSIWYG-CLASS ............................... 69 Creating the Variable CSS .................... 69

Creating a MultiEdit Template ...............72

Example of a Multi-Edit Content Area

.......................................................................... 74

Adding MultiEdit Tags ........................... 75 Understanding Template Inheritance ....83 Best Practices ........................................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.

• 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.


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=

"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" /> <link rel="stylesheet" type="text/css" media="screen" href= "/_resources/css/nivo-slider.css" /> <link rel="stylesheet" type="text/css" media="screen" href= "/_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"> //<![CDATA[//comment1//]]> </script> <script type="text/javascript" src="/_resources/js/jquery.infieldlabel.min.js"> //<![CDATA[//comment1//]]> </script> <script type="text/javascript" src="/_resources/js/jquery.ScrollTo.js"> //<![CDATA[//comment1//]]> </script> <script type="text/javascript" src="/_resources/js/jquery.prettyPhoto.js"> //<![CDATA[//comment1//]]> </script> <script type="text/javascript" src="/_resources/js/scripts.js"> //<![CDATA[//comment1//]]> </script> <script type="text/javascript"> //<![CDATA[var page_id="http://training.oudemo.com/about/create-new-page.html"; //]]> </script><!--[if IE 6]> <script type="text/javascript" src="js/IE6-hover-fix.js"></script> <script type="text/javascript" src="js/DD_belatedPNG_0.0.8a-min.js"></script> <script> $.ie6hover(); </script> <script> DD_belatedPNG.fix('#logo img, .ribbon, #header-btn a, #service-listing li img, #social li img, #bookmark-list li img, #homepage-slider-shadow, #featured-work li, .featured-overlay, .standard-list li, .blog-post, .meta li.star, .blog-img-teaser, .blog-img-overlay, #recent-post-list li a, #recent-comments-list li, .avatar, .testim-thumb, .thumb-overlay, #contact-


bg-top, #contact-bg-middle, #contact-bg-bottom, .portfolio-img, .portfolio-overlay, #project-slider-shadow, .nivo-directionNav a, #portfolio-box ul li, .portfolio-box-overlay, #services-box ul li p img, .portfolio-wide-overlay, #portfolio-wide li'); </script> <![endif]--> <script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.0.6/modernizr.min.js" type="text/javascript"> //<![CDATA[//comment1//]]> </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">

<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-new-page.html">Creating a New Page</a></li> </ul> <div class="ribbon"> <h5>Search</h5> </div> <form id="search-form" method="post" action="http://ousearch-2.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>

<blockquote> <span id="student_quotes"> </span><script type="text/javascript"> //<![CDATA[ $.get("/_resources/php/quotes.php",function(data){$("#student_quotes").replaceWith(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>


</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/Gallena-University/43156474752" title=""><img src="/_resources/images/facebook-ico.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"> //<![CDATA[//comment1//]]> </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:

<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>

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


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/default.xsl"

Required Defines the path to the XSL file that will be used to transform the page.

extension extension="html" Required



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 PCF-Stylesheet 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 top-level 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


After

Example PCF

<?xml version="1.0" encoding="utf-8" ?> <?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web" ?> <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd"> <document> <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> </content> </document>


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

<?xml version="1.0" encoding="utf-8" ?> <?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web" ?> <?pcf-stylesheet path="/_resources/xsl/page2pdf.xsl" extension="pdf" title="PDF" alternate="yes" ?> <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">


<document> <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> </content> </document>

Example of Web Output


Example of PDF Output

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.

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>


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.


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.

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 pt-onecolumn.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.


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-onecolumn-title.css, and the background image pt-onecolumn-title.jpg, and make sure to publish the CSS file.

Image

Editable Region CSS

@import url("/_resources/css/main.css"); body { background-image: url("/_resources/ou/editor/pt-onecolumn-title.jpg"); background-repeat: no-repeat; 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; background-color: #EEEEEE; color:#4B4B4B; text-align: left !important; 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.


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 Yellow

.green Green

.quote 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.


Test the application of the styles by selecting text and applying the styles.


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 page-by-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>


<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.


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.


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:

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.


To see how the page type parameter changes the layout of the page:

1. From the Page Type dropdown select “Content.” 2. Save the changes. 3. View how the preview changed. 4. 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="article" selected="false">Article</option> <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.

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"?> <?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web"?>

<?pcf-stylesheet path="/_resources/xsl/page2pdf.xsl" extension="pdf" alternate="yes" title="PDF"?> <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd"> <document>  <config> <parameter name="pagetype" type="select" group="admin" prompt="Page Type" alt="Please choose a appropriate page type"> <option value="article" selected="false">Article</option> <option value="content" selected="true">Content</option> <option value="onecolumn" selected="false">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="Pick select the appropriate keywords for the page"> <option value="Gallena" selected="true">Gallena</option> <option value="GU" selected="true">GU</option> <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> <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

</h2>   <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

<?xml version="1.0" encoding="utf-8"?> <?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web"?> <?pcf-stylesheet path="/_resources/xsl/page2pdf.xsl" extension="pdf" alternate="yes" title="PDF"?> <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">

<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">  </parameter> </config> <metadata> <meta name="Description" content="" /> <meta name="Author" 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.

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.

<!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd"> <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>


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.

<title>New Page</title>

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.


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" selected="true">Gallena</option> <option value="GU" selected="true">GU</option> <option value="Gallena University" selected="true">Gallena University</option> <option value="Why Choose Gallena" selected="false">Why Choose Gallena</option> <option value="Undergraduate" selected="false">Undergraduate</option> <option value="Graduate" selected="false">Graduate</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"> <option value="article" selected="false">Article</option> <option value="content" selected="true">Content</option>


<option value="onecolumn" selected="false">One Column</option> </variable> <variable name="quotes" type="select" prompt="Student Quotes:" alt="Do

you want to display the student quotes?" output="xml"> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option>

</variable> <variable name="autonavigation" type="select" prompt="Add Navigation

Item:" alt="Add the page to the left navigation file automatically?"> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option>

</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:

• 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.


• 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" preferred-redirect="yes" publish="no" autonav="{autonavigation}">pt-new-page.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.


Complete Code

<title>New Page</title> <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" selected="true">Gallena</option> <option value="GU" selected="true">GU</option> <option value="Gallena University" selected="true">Gallena University</option> <option value="Why Choose Gallena" selected="false">Why Choose Gallena</option> <option value="Undergraduate" selected="false">Undergraduate</option> <option value="Graduate" selected="false">Graduate</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"> <option value="article" selected="false">Article</option> <option value="content" selected="true">Content</option> <option value="onecolumn" selected="false">One Column</option> </variable> <variable name="quotes" type="select" prompt="Student Quotes:" alt="Do you want to display the student quotes?" output="xml"> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option> </variable> <variable name="autonavigation" type="select" prompt="Add Navigation Item:" alt="Add the page to the left navigation file automatically?"> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option> </variable> </variable-list> <template-list>

<template prompt-prefix="New Page" filename="untitled" extension="pcf" filename-alt="Use only lowercase letters, numbers, and hyphens." display-group="no" display-destination="no" display-overwrite="no" preferred-redirect="yes" publish="no" autonav="{autonavigation}">pt-new-page.tmpl</template> </template-list> <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>

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


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

<title>New Page</title> <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" selected="true">Gallena</option> <option value="GU" selected="true">GU</option> <option value="Gallena University" selected="true">Gallena University</option> <option value="Why Choose Gallena" selected="false">Why Choose Gallena</option> <option value="Undergraduate" selected="false">Undergraduate</option> <option value="Graduate" selected="false">Graduate</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"> <option value="article" selected="false">Article</option> <option value="content" selected="true">Content</option> <option value="onecolumn" selected="false">One Column</option> </variable> <variable name="quotes" type="select" prompt="Student Quotes:" alt="Do you want to display the student quotes?" output="xml"> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option> </variable> <variable name="autonavigation" type="select" prompt="Add Navigation Item:" alt="Add the page to the left navigation file automatically?"> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option> </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>


<template prompt-prefix="New Page" filename="{filename}" extension="pcf" display-filename="no" display-group="no" display-destination="no" display-overwrite="no" preferred-redirect="yes" publish="no" autonav="{autonavigation}">pt-new-page.tmpl</template> </template-list> <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>

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>


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" display-filename="no" destination="{new-dir}" force-destination="yes" display-group="no" display-destination="no" display-overwrite="no" preferred-redirect="yes" publish="no" autonav="{autonavigation}">pt-new-page.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" preferred-redirect="no" publish="no">leftnav.tmpl</template> <template prompt-prefix="Properties" filename="_properties" extension="inc" display-filename="no" destination="{new-dir}" force-destination="yes" display-group="no" display-destination="no" display-overwrite="no" preferred-redirect="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>

<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>

<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" selected="true">Gallena</option> <option value="GU" selected="true">GU</option> <option value="Gallena University" selected="true">Gallena University</option> <option value="Why Choose Gallena" selected="false">Why Choose Gallena</option> <option value="Undergraduate" selected="false">Undergraduate</option> <option value="Graduate" selected="false">Graduate</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"> <option value="article" selected="false">Article</option> <option value="content" selected="true">Content</option> <option value="onecolumn" selected="false">One Column</option>

</variable> <variable name="quotes" type="select" prompt="Student Quotes:" alt="Do

you want to display the student quotes?" output="xml"> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option>

</variable> <variable name="autonavigation" type="select" prompt="Add Navigation

Item:" alt="Add the page to the left navigation file automatically?"> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option>

</variable> </variable-list> <directory-list>

<parent path="{directory/}"> <directory name="new-dir">{dirname}</directory> <directory name="new-images">{dirname}/pdfs</directory> </parent>

<directory-list> <template-list>

<template prompt-prefix="New Page" filename="index" extension="pcf" display-filename="no" destination="{new-dir}" force-destination="yes" display-group="no" display-destination="no" display-overwrite="no" preferred-redirect="yes" publish="no" autonav="{autonavigation}">pt-new-page.tmpl</template>

<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" preferred-redirect="no" publish="no">leftnav.tmpl</template>


<template prompt-prefix="Properties" filename="_properties" extension="inc" display-filename="no" destination="{new-dir}" force-destination="yes" display-group="no" display-destination="no" display-overwrite="no" preferred-redirect="no" publish="no">properties.tmpl</template> </template-list> <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>

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


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.

<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" selected="true">Gallena</option> <option value="GU" selected="true">GU</option> <option value="Gallena University" selected="true">Gallena University</option> <option value="Why Choose Gallena" selected="false">Why Choose Gallena</option> <option value="Undergraduate" selected="false">Undergraduate</option> <option value="Graduate" selected="false">Graduate</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"> <option value="article" selected="false">Article</option> <option value="content" selected="true">Content</option> <option value="onecolumn" selected="false">One Column</option>


</variable> <variable name="quotes" type="select" prompt="Student Quotes:" alt="Do you want to display the student quotes?" output="xml"> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option> </variable> <variable name="autonavigation" type="select" prompt="Add Navigation Item:" alt="Add the page to the left navigation file automatically?"> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option> </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> <navigation name="false" path="leftnav.inc" group="everyone" publish="no"></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> <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>

<include>pt-commonvars.inc</include> </variable-list>

<navigation-list> <include>pt-navigation.inc</include>

</navigation-list>


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.

<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" preferred-redirect="no" publish="no">leftnav.tmpl</template> <template prompt-prefix="Properties" filename="_properties" extension="inc" display-filename="no" destination="{new-dir}" force-destination="yes" display-group="no" display-destination="no" display-overwrite="no" preferred-redirect="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"

display-filename="no" destination="{new-dir}" force-destination="yes" display-group="no" display-destination="no" display-overwrite="no" preferred-redirect="yes" publish="no" autonav="{autonavigation}">pt-new-page.tmpl</template>

<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.

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.



6. Save the changes.


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:

• Will users have approvers assigned? • How long is it generally between page creation and publish?


• 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 auto-publish. 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 auto-publish 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 non-existent 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: template-

group="Folder Only"

<directory-list> <parent path="{directory/}"> <directory name="new-dir">{dirname}</directory>


<directory name="new-images" template-group="Folder Only">{dirname}/pdfs</directory> </parent> <directory-list>

4. Save the changes. 5. Navigate to the pt-sectiontemplates.inc file and edit with the source editor. 6. In the first <template> node for the navigation, add: exclude-sitemap="yes" 7. In the second <template> node for the properties, add: exclude-sitemap="yes" and

group="None"

<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" preferred-redirect="no" publish="no" exclude-sitemap="yes">leftnav.tmpl</template> <template prompt-prefix="Properties" filename="_properties" extension="inc" display-filename="no" destination="{new-dir}" force-destination="yes" display-group="no" display-destination="no" display-overwrite="no" preferred-redirect="no" publish="no" exclude-sitemap="yes" group="None">properties.tmpl</template>

8. Save the changes. 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.


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.


PDFs Access Settings

The access settings were all inherited from parent directory, except the Template Group.


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.

Directory variables can be used in:

1. In the XSL 2. In the echo var of the TMPL 3. In the <directory-list>’s child nodes 4. In the <template-list>’s child nodes 5. 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. Navigate to /_resources/ou/templates. 2. Copy article.tmpl to the same directory, and rename it to pt-article.tmpl. 3. Open and edit pt-article.tmpl. 4. 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.


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.


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.

<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="author" type="text" prompt="Author:" alt="The author name for this page."></variable>

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".

<variable name="pagetype" type="select" prompt="Page Type:" alt="What type of page would you like to create?" output="xml" display="no"> <option value="article" selected="true">Article</option> <option value="content" selected="false">Content</option> <option value="onecolumn" selected="false">One Column</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" display-overwrite="no" preferred-redirect="yes" publish="no" autonav="{autonavigation}" rss-title="{title}" rss-description="{description}" rss-author="{author}">pt-article.tmpl</template>

7. Save the changes. 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.


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">

<option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option> </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}"

4. Save the changes. 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.

8. Save the changes.

Test the changes:

1. Click on the breadcrumb to get to the root of the site. 2. Enter into the news directory, and click New. 3. Select the new template. 4. Complete the fields, taking note of the newly added ones, and click Create. 5. Verify that the Title, Description, and Author are populated in the RSS Items icon. 6. 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.


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: rss-feed="{feed}"

Save the changes.

Test the changes:

1. Click on the breadcrumb to get to the root of the site. 2. Enter into the news directory, and click New. 3. Select the new template. 4. Complete the fields, taking note of the newly created filechooser, and click Create. 5. Click on the access settings for the new file, and observe the RSS Feed selected.


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}{rss-home}{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.

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-page-div.pcf. Open this new document.

Start by changing the pcf-stylesheet declaration to point to default-oucdiv.xsl.

<?xml version="1.0" encoding="utf-8"?> <?pcf-stylesheet path="/_resources/xsl/default-oucdiv.xsl" extension="html" title="Web"?> <?pcf-stylesheet path="/_resources/xsl/page2pdf.xsl" extension="pdf" alternate="yes" title="PDF"?> <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd">

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>.

•  becomes <ouc:properties> •  becomes </ouc:properties> •  becomes <ouc:div> •  becomes </ouc:div> •  becomes <ouc:editor>

•  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 pt-oucdiv.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. A default one column layout 2. A content layout 3. A title layout for one column pages 4. A title layout for content pages

The CSS file will be configured as follows:

@import url("/_resources/css/main.css"); body {


background-image: url("/_resources/ou/editor/pt-onecolumn.jpg"); background-repeat: no-repeat; margin: 214px 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; } body.content { background-image: url("/_resources/ou/editor/pt-twocolumn.jpg"); background-repeat: no-repeat; margin: 214px 17px 0px 352px; min-width:0px; font-family: Arial,"Helvetica Neue",Helvetica,Geneva,sans-serif; background-color: #EEEEEE; color:#4B4A4A; text-align: left !important; line-height: 20px; } body.title.onecolumn { background-image: url("/_resources/ou/editor/pt-onecolumn-title.jpg"); background-repeat: no-repeat; margin: 168px 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; background-color: #EEEEEE; color:#4B4B4B; text-align: left !important; line-height: 20px; } body.title.content { background-image: url("/_resources/ou/editor/pt-twocolumn-title.jpg"); background-repeat: no-repeat; margin: 214px 17px 0px 352px; 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 { margin: 0 0 20px;


} p, li, blockquote { line-height: 1.4em; } h1, h2, h3, h4, h5, h6 { border-bottom: 1px solid #C9C9C9; margin: 0 0 10px; padding: 12px 0 10px; } h1, h2, h3, h4, h5, h6 { color: #4B4B4B; font-family: Georgia,"Times New Roman",Times,serif; text-rendering: optimizelegibility; } 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.


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.


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

different types of data input, including text, text areas, assets, radio button, checkbox, and drop-down 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 Intelligence</i></h3> </desig> <b>Arizona State University, Ph.D., Computer Science</b><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> </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.


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:

<?xml version="1.0" encoding="utf-8"?> <?pcf-stylesheet path="/_resources/xsl/default.xsl" extension="html" title="Web"?> <?pcf-stylesheet path="/_resources/xsl/fac_profile.xsl" extension="xml" title="XML"?>

<?pcf-stylesheet path="/_resources/xsl/page2pdf.xsl" extension="pdf" alternate="yes" title="PDF"?> <!DOCTYPE document SYSTEM "http://commons.omniupdate.com/dtd/standard.dtd"> <document> <config> <parameter name="pagetype" type="select" group="Everyone" prompt="Page Type" alt="Please choose an appropriate page type"> <option value="article" selected="false">Article</option> <option value="content" selected="true">Content</option> <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 "> <option value="true" selected="true">Yes</option> <option value="false" selected="false">No</option> </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> <parameter name="keywords" prompt="Keywords" type="checkbox" alt="Pick select the appropriate keywords for the page"> <option value="Gallena" selected="true">Gallena</option> <option value="GU" selected="true">GU</option> <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> <metadata>  <parameter name="keywords" type="checkbox" group="Everyone" prompt="Keywords" alt="Select keywords that relate to this page.">

<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> <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>Carol Clements, <i>Professor of Marketing and Public Relations</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> </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.


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 mini-WYSIWYG Editor to be used.

prompt prompt=”Education” Required

Provides a label for the user, defining the field.

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> <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>

  Carol Clements , <i>

</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.


The page can now be edited with MultiEdit.


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, new-page.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.


Best Practices In order to make page templating as easy as possible, keep these best practices in mind:

• 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 tutorial

Documents