What’s a _resource and What Does It Do? Understanding Your Resource Files Robert Kiffe Sr. Customer Support Engineer

Agenda Overview of typical /_resources content How ou/templates work css includes js ou scripts snippets xsl How ou/templates work How to set up a snippet How xsl is organized

/_resources/css Provided to OmniUpdate by your web designer Common Frameworks: Bootstrap/Foundation CSS changes must be published to be visible in OU Campus and on live site

Common CSS Files Most implementations will have main.css Some implementations will have Page type specific css home.css interior.css oustyles.css contains OmniUpdate micro-corrections to main.css

/_resources/images Information Architecture may place your images in a different location Contains global images Contains subfolders for subdirectory images

/_resources/includes Include file type is based upon complexity of site design, knowledge base of editors and timeline for development Include changes will automatically appear in OU Campus but must be published to be visible on live site

Include File Types inc, html shtml, cshtml, php file types edited in classic editor or source code pcf file type edited in JustEdit will undergo xsl transformations can use properties/parameters fields can display full header/footer in preview

/_resources/js Provided to OmniUpdate by your web designer Newer implementations may see a direct-edit.js file

/_resources/ou Contains OmniUpdate code for the WYSIWYG editor and New Page Wizards May also contain snippet folder/code

/_resources/ou/editor styles.txt lists options to appear in the styles dropdown menu calls classes defined in site css wysiwyg.css contains stylizing for wysiwyg regions includes table transformation helper text cssmenu (styles dropdown) and csspath (wysiwyg css) attributes are defined by each region’s <ouc:editor /> tag

/_resources/ou/templates

/_resources/ou/templates image file will automatically be associated with tcf as long as their names match tcf creates the form for New Page Wizard variable-list – lists variables to be requested in form fields directory-list – creates folders with access settings template-list – lists tmpl files that will be created navigation-list – identifies nav file that will be created tmpl ‘stamp’ that creates pcf pages uses <!--%echo var="..." --> statements to pass variables from tcf or OU Campus (like Directory Variables)

/_resources/scripts Contains server side scripting associated with site design and additional modules Often implemented as “/_resources/php” or “/_resources/asp”

/_resources/snippets Contains html/inc code base for snippets must be valid xml to be transformed by xsl Does not need to be published Categories and naming conventions used to distinguish which page type or editable region will support individual snippets To add a new snippet to your implementation upload html/inc file and link to it from Content > Snippets

Table Transformation Snippets Will contain <table> tag with specific “ou-...” class /_resources/snippets/generic/accordion.html class="ou-accordion" /_resources/xsl/_shared/snippets.xsl transforms the table some implementations may see this xsl inside template-matches.xsl /_resources/ou/editor/wysiwyg.css contains helper text and dictates how the snippet will appear in the wysiwyg editor

XML + XSL = HTML XML Page Content Separates ‘Content’ from ‘Design’ Adjustable layouts and optional features ‘Transform’ simplistic content into more complex Create multiple output ‘products’ for each page, including PDF Works with most Server-Side Scripting Languages XSL Global Header Section Nav XML Page Content Global Footer

/_resources/xsl Contains xsl that pulls in content from pcf pages and formats it into webpages Source code of pcf pages specifies pcf-stylesheet(s) Most implementations will call a page type specific xsl, which then calls common.xsl interior.xsl Transforms data for page-specific elements common.xsl Outputs global design elements and import other resources necessary for the page (e.g. css files)

XSL Architecture PCF links directly to template- specific XSL file Common.xsl builds basic page structure Use ‘Import Priority’ to override common content with template- specific content No logic checks required for template type Allows for rapid construction of new ‘one-off’ templates interior.xsl common.xsl variables.xsl functions.xsl Import Priority landing.xsl

/_resources/xsl/_shared breadcrumb.xsl Generates breadcrumbs associated with site design datasets.xsl Defines datasets for LDP forms functions.xsl Defines custom functions ou-forms.xsl Defines advanced attributes for LDP forms

/_resources/xsl/_shared ou-variables.xsl Newer implementations may see variables.xsl Defines global and directory variables specific to implementation snippets.xsl Defines table transformations template-matches.xsl Defines global content apply-templates – will find all instances of an xml node and apply the xsl:template that has the highest priority matching that node call-template – will invoke a particular template by name

One Template to Rule Them All? Group ‘template layouts’ based on their use-cases Don’t overwhelm content editors with too many settings that don’t apply Properties shows all fields MultiEdit shows all fields Shared regions can be built in common.xsl for re-use interior.xsl Or landing.xsl

Thank you. Robert Kiffe Sr. Customer Support Engineer OmniUpdate 805-484-9400 ext 223 rkiffe@omniupdate.com outc18.com/surveys