Template Creation Tutorial

Transcription

1 Template Creation Tutorial Overview: The Files Template Control File: The Template Control File (.tcf) will generate a form of text your user will want inserted directly into the new page, such as title and keywords. You may have as many or as few form fields as you like. New Page Template: The New Page Template contains the HTML for your new blank template. It must be saved with the extension.tmpl, but it can be named anything you like. This page also contains the codes that will tell the Template Control File (.tcf) what and where to insert the text the user defines. New Page Thumbnail: The New Page Thumbnail image is a small picture that represents your new template; it will appear on the "Create New Page" page, where it and all other thumbnails will be listed alphabetically. It can look like anything you want it to, but it must be saved as a.gif file, and it must have the same file name as the Template Control File (.tcf). Step One: Creating a "Template Control File" 1. Open your choice of text editor. 2. Copy and paste the following code to use as an example (the parts in red are editable -- or, you could remove an entire line): <title>new Page Creation</title> <variable-list> <variable name="title" prompt="page Title" alt="give your new web page a title."></variable> <variable name="subtitle" prompt="subtitle" alt="give your new web page a subtitle."></variable> <variable name="metakey" prompt="keywords" alt="words that categorize your new page for search engines."></variable> <variable name="metadesc" prompt="description" alt="describe your new page in about 40 words."></variable> </variable-list> <template-list> <template prompt-prefix="new File" preferred-redirect="yes">templatename.tmpl</template> </template-list> 3. Edit the code you just pasted to reflect what you want users to enter into their new page. For example, if you have no use for a subtitle, you might remove the following line completely: <variable name="subtitle" prompt="subtitle" alt="give your new web page a subtitle."></variable> 1

2 In addition, you can add your own variables to the Template Control File. Say you want the user to be able to insert their name at the bottom of the page. You would create a variable line that looks something like this: <variable name="name" prompt="your Name" alt="enter your name to be displayed on the page."></variable> Where each of these variable values shows up on the actual page is something we'll look at when creating the New Page Template. 4. Save the file as whatever file name you like, with the extension.tcf. It is suggested you use something descriptive of the page it goes with. For example, if your new page is for the "Admissions" section of your site, you may want to name it admissions.tcf. Were you to use the coding exactly as is seen in the example in #2, this is what it would look like when parsed by your browser: Step Two: Creating the New Page Template (HTML) 1. Open the text editor of your choice, and open the HTML file you want to base your New Page Template on. 2. Remove all text you don't want to be pre-existing when the user creates their new page. 3. Add the appropriate tagging to server-side includes and regions you want the user to be able to edit in OmniUpdate. Please note that include files must exist on both the staging and live servers. The tagging for includes looks like this: 2

3 <!-- com.omniupdate.div label="includename" path="includeurl.html" --> <!--#INCLUDE VIRTUAL="includeurl.html" --> <!-- /com.omniupdate.div --> And your editable regions should have this code: <!-- com.omniupdate.div label="area Name" group="z-areaname" button="editing Button Number" --> <!-- com.omniupdate.editor csspath="cssurl.css" cssmenu="cssmenuurl.txt" --> Editable text in here. <!-- /com.omniupdate.div --> 4. Because the Template Control File allows users to include some pre-defined text on their new page, you'll need to insert an echo tag wherever that text will go. For example, if you have a field in the.tcf for the user to enter the title that looks like this: <variable name="title" prompt="page Title" alt="give your new web page a title."></variable>...then in your New Page Template HTML, wherever you want that title to go, you will need to put an echo tag that looks like this: <!--%echo var="title" --> This echo tag can go inside tables, DIVs, etc. -- wherever the plain old text would go. 5. You'll need to save your New Page Template with the same "New File" name you used for the Template Control File (.tcf). In your.tcf file should be this block of coding: <template-list> <template prompt-prefix="new File" preferredredirect="yes">templatename.tmpl</template> </template-list> You can name this New Page Template (.tmpl) file whatever you like, as long as it's the same as the file name between the template tags. For simplicity's sake, you might consider giving all three files - Template Control File, New Page Template, and New Page Thumbnail -- the same name. Step Three: Creating New Page Thumbnails 1. Open the image editing program of your choice. 3

4 2. Create an image that represents your new page. There are no restrictions on size or appearance. Two popular options are to have it look like a small screen capture of the page, or to simply have text pertaining to the new page, as in the following examples: 3. Save the file as a.gif file. Be sure that the file name of your.gif matches the file name of your Template Control File (.tcf). Upload & Implementation 1. Once created, the three files --.tcf,.tmpl, and.gif-- need to be uploaded to the template directory. Where you store the templates will be up to you. In most cases, you will upload the template to the production server, typically in a folder called "wsatemplates". If you have SuperAdmin access, you have the option of uploading the template files to the OMNI-INF/templates INF/templates folder, found in your root folder on the staging server. 2. You'll need to direct OmniUpdate to the folder in which you've decided to store your templates. To do this, you must visit Setup > Web Sites > Edit: Then you'll need to change the folder under "Templates" to reflect where your template files are stored: 4

5 5

6 3. Users, when visiting the "Create New Page" page, can now pick from any of the templates you've uploaded. If you want to assign certain templates to certain folders on the site, you'll need to create template groups. Within OmniUpdate, visit the "Setup" tab, and then click on the "Templates" button. Click on "New Template Group" to start. You can have from one to as many templates as you'd like within a single group. It's generally helpful to start by putting each template into a group of its own. 4. To assign a template to a certain folder, visit the "Page Editor" tab, browse to that folder, and click on the "Access" button to the right of it. 6

7 Select the radio button "This folder and all existing items within"; then, at the bottom, check the "Update" option next to "Templates", and then select the template you want to apply to that folder and its items/subfolders from the drop-down list. When you've made your selection, click "Save". 7

8 Finish Your templates are now ready to use! To create a new page with your new template: 1. Click on the "File Manager" tab, browse to a folder to which you have assigned a template, and click on the "New Page" button at the top. 2. Click on the image representing the template you want to use. Remember, which templates are available is determined by you when creating template groups, as described above. 3. You will now be given a short form for you to enter pre-defined variables concerning the page (like title and keywords); after pressing the "Create" button at the bottom of the form, you'll be taken to your new page to begin editing. 8