WEC Template Developers Manual
2.6a TemplaVoila (TV) Templates Standardization
Since the plan is to be able to switch templates within the TYPO3 CMS, the Data Structure should use the same fieldnames for each template. See Appendix II for a listing of the different fields used in the WEC configuration.
To be implemented in the TemplaVoila Template format your HTML template should outline each of your dynamic areas with a <div> or <span> tag associated with a class. See Appendix II for the WEC Standard.
Thumbnails of what the template looks like as well as a thumbnail of what the data structure looks like should be developed and included with the Template Object and Data Structure records for each template. The images should be named to match the template’s name, for instance “template1.gif” and “template1-ds.gif.”
2.6b Creating the TYPO3 Template with TemplaVoila (TV)
After your template files, images, and CSS have been uploaded to the fileadmin folder, you must create the TemplaVoila Template Object and Data Structure. If you wish to use an existing WEC Data Structure, you can skip this section and move ahead to section 2.6c.
Click on Filelist under File in the left pane [1]. Under the “fileadmin/tv-templates” folder, click on the icon of the HTML template file that you want to use as the basis for your Template [2].
Select “TemplaVoila” [3].
You will now see the Data Structure and Mapping information for the TemplaVoila extension. Start by adding your first dynamic content area. To do this, you must create a “fieldname.” The standard format for a fieldname is “field_xxx” where “xxx” is the text you insert. It is recommended that this field name be descriptive and unique. Do not leave it at the default. Once you enter your fieldname [4] click the “Add” button [5].
Once you have created the new fieldname, enter the necessary information [6]. When complete, click the “Add” button [7].You may need to enter some additional information. Click the “Update” button [8] and then the “Cancel/Close” button [9] to close the Element editor (For more specific information about Data Structures in TemplaVoila, see the Futuristic Template Building document at www.typo3.org).
Continue adding new fields for each of the dynamic areas of your site. When you are done, click the “Map” button [10] for each Data Element to map the areas to your HTML template.Make sure to map the ROOT element to your body tag, and your other elements to their respective areas by selecting the <div> or <span> tag that will contain it [11] (see Appendix II).
Click on the “Set” button [12].
When you are through creating the Data Structure, click the “Save” button [13].
When prompted to create new, or update existing, enter the new DS/TO name in the Title field [14]. The name entered should reflect the template’s original name although it needn’t be in the same format (example: “template1-sub2blue” could read “Template1 2column Blue”).
Under Template Type, select “Page Template” [15] and select the system folder to store the records in [16]. Click the “Create TO and DS” button [17].
Be sure to go back and add parts from the HTML header such as the link to the stylesheet. To do this, click on TemplaVoila in the left pane, then click the “Update Mapping” button [18] for the template you created.
Make sure the “Select HTML header parts” checkbox is checked [19] , then under the “Adding parts from HTML header:” select the elements in the header that you wish to include in your template [20]. The <body> tag is required, but you may also include links to style sheets, meta-data, etc.Click the “Save and Return” button [21] to return to the TemplaVoila Control Center.
2.6c Creating a Template Object based on an existing Data Structure
To create a template based on an existing Data Structure, click on the link to “TemplaVoila” [1] under “Web” in the left pane.
If you see as the heading “STEP 1: SELECT …” scroll down to the bottom of the right pane and click on the “Cancel wizard” button [2]. Under the TemplaVoila Control Center at the top of the right pane, you should see a link for “Storage Folder.” Click on this link.
In the right pane, scroll down (past the “Overview”) until you see the Data Structure you wish to use. Underneath the Data Structure entry, click on the “Create New Template Object” link [3].
Rename the template with your name [4].
Select the correct “File Reference” to your template HTML file [5] (you may use the “Link” icon to select the file [6] ).
Click the “Save” button [7] (but don’t close).
Now, under the “Attach Preview Icon” select the thumbnail image of the template [8]. The thumbnail will display at the size you saved it, so make sure it is no more than 100px wide and 70px high.
Click the “Save and Close” button [9].
Return to the TemplaVoila Control Center and scroll to where your new Template Object is listed. You should see
which means there is an error in the template. To correct the error, you must map the Datastructure to your Template Object. In the Mapping status area, click on the “Map” link [10].
Click the “Modify DS / TO” button [11] under Template Object Details. You will see a warning message – just click “OK” to continue.
You must [12] next to Root.
[13]. Whichever view is easier for you is fine – just make sure that you select the “body” tag [14].
Now, make sure to map each of the subsequent fields to your template [16]. When you are through, click the “Save” button [17].
On the next screen, under UPDATE existing Data Structure / Template Object, select from the drop-down which template you are updating [18]. Click on the “UPDATE TO/DS” button. You will see a warning message – just click “OK” to continue.
2.7 Creating a WEC Template Package
WEC Template Packages are made up of two primary components: a TemplaVoila package and a static file package. The TemplaVoila package contains the database records required by TYPO3 for a template (the TemplaVoila Data Structure and Template Object). The static file package, on the other hand, contains the HTML, CSS, images, and other static resources that TYPO3 uses when applying a template to a page. The end result of the packaging process are two files; one containing the TemplaVoila package and the other containing the static file package.
2.7a Packaging the TemplaVoila Records
To package the TemplaVoila records, you'll first need to log into the backend and select the Page view or List view. Any view that displays the pagetree should work. [1]
From the pagetree, click on the icon of a page that contains the TemplaVoila records you'd like to package [2]. This page must be of the type SysFolder to contain TemplaVoila records and if you are using the WEC Common Configuration it will be named “Storage Folder.”
After clicking the icon, you'll be presented with a context menu giving several different actions that can be performed on that page. Select “More options” [3] and “Export to .t3d” [4] to begin the Import/Export Wizard.
Once the Import/Export wizard has begun, you'll be presented with some initial options for your template export. From the “Levels” dropdown, choose “Tables on this page” [5]. This will cause TYPO3 to only export the data on the current page and not the page itself.
From the “Include Tables” listbox, select the specific database tables that you'd like to include in the export. Since we're only dealing with templates here, selecting “tx_templavoila_tmplobj” and “tx_templavoila_datastructure” [6] should be sufficient (hold down the Ctrl/Command key and select both).
You can now click the update button [7] to see a new preview of the exported data in the “Structure to be exported” section. [8]You'll notice that the number of records to be exported has been decreased but you probably still have unwanted Template Objects and Data Structures listed. Next to each record is a checkbox to exclude an individual item from the export. Click this checkbox for each record that should not be a part of your template package [9] and update [7] the preview again.
We can now advance to the “File & Presets” tab [10]. Within the “Output options” section we can specify metadata related to our TemplaVoila package. You will want to enter the title for your template [11]. Be sure to adhere to the naming structure outlined in section 2.4. Additionally, this section also has fields for a description [12] and a thumbnail [13] to represent the template export. This file can be uploaded from your local computer or read from the fileadmin directory.Below the metadata is the “File format” section. This section allows us to select an export format and filename for our TemplaVoila package. Select XML format [14] and enter a name for the file [15] (make sure it is the same name as you have given your zipped static files folder.
Clicking the “Download export” button [16] will download a copy of the exported data to your local computer while clicking the “Save to filename” [17] button will save it within the fileadmin directory of your TYPO3 install. Once this export has been saved, the TemplaVoila packaging is complete.
2.7b Packaging the Static Files
Once the TemplaVoila records have been packaged, we only need to package the static files and our template package will be complete. There are a variety of ways we can accomplish this packaging, but the ultimate goal is to create a ZIP file containing all the files and folders necessary for your template, including the top level folder that your files reside in. Use a Zip utility of your choice to zip the HTML, CSS, and images files. Regardless of the method you choose to ZIP your files, one critical requirement is that the TemplaVoila package and the Static File package share a common filename, with different extensions. If my TemplaVoila package was named template5.t3d then my Static File package should be named template5.zip. If this naming convention is not followed, uploads to the Template Repository will not display properly.
Appendix I: Typoscript Setup & Constants
Common Typoscript Setup
######### General Setup ##############
# RealURL
config.simulateStaticDocuments = 0
config.baseURL = 1
config.tx_realurl_enable = 1
# Indexed Search
page.config.index_enable = 1
# Admin Panel
page.config.admPanel = 1
admPanel = EDITPANEL
admPanel {
enable.edit = 1
module.edit.forceDisplayFieldIcons = 1
hide = 0
}
# Spam Protection for Email
config.spamProtectEmailAddresses = 3
config.spamProtectEmailAddresses_atSubst = (at)
# External CSS Files
config.inlineStyle2TempFile = 1
########## WEC Template Setup #########
### Pulls WEC Constants into TemplaVoila-mapped fields ###
#Site Name
lib.sitename = TEXT
lib.sitename.value = {$constants.wec.siteName}
lib.sitename.wrap = <h1>|</h1>
#Site Slogan
lib.siteslogan = TEXT
lib.siteslogan.value = {$constants.wec.slogan}
lib.siteslogan.wrap = <h2>|</h2>
#Site Contact Info
lib.contact = HTML
lib.contact.value = {$constants.wec.contact}
#Page Title
lib.pagetitle = TEXT
lib.pagetitle.data = page:title
#Copyright
lib.copyright = TEXT
lib.copyright.value = {$constants.wec.footer}
# Search box
lib.search < plugin.tx_macinasearchbox_pi1
lib.search {
pidSearchpage = 33
templateFile = fileadmin/ext-templates/searchbox_template.htm
_LOCAL_LANG.default.headline =
}
#Login Box
lib.login < plugin.tx_newloginbox_pi1
(Continued on next page)
(Common Typoscript Setup Continued from previous page)
# Main Horizontal dropdown menu
lib.mainmenu = HMENU
lib.mainmenu {
wrap = <div id="menu"> | </div>
entryLevel = 0
1 = TMENU
1 {
expAll=1
wrap = <ul id="menuList" class="adxm"> | </style></ul>
NO {
wrapItemAndSub = <li> | </li>
}
}
2 = TMENU
2 {
expAll=1
wrap = <ul id="subList"> | </ul>
NO {
wrapItemAndSub = <li class="submenu"> | </li>
}
}
3 = TMENU
3 {
expAll=1
wrap = <ul id="subList"> | </ul>
NO {
wrapItemAndSub = <li class="submenu"> | </li>
}
}
4 = TMENU
4 {
expAll=1
wrap = <ul id="subList"> | </ul>
NO {
wrapItemAndSub = <li class="submenu"> | </li>
}
}
}
#Submenu
lib.altmenu = HMENU
lib.altmenu {
entryLevel = 1
1 = TMENU
1 {
expAll=1
wrap = <ul> | </ul>
NO {
wrapItemAndSub = <li> | </li>
}
}
2 = TMENU
2 {
expAll=1
wrap = <ul> | </ul>
NO {
wrapItemAndSub = <li> | </li>
}
}
3 = TMENU
3 {
expAll=1
wrap = <ul> | </ul>
NO {
wrapItemAndSub = <li> | </li>
}
}
4 = TMENU
4 {
expAll=1
wrap = <ul> | </ul>
NO {
wrapItemAndSub = <li> | </li>
}
}
}
#Breadcrumb Object
lib.breadcrumb = HMENU
lib.breadcrumb.special = rootline
lib.breadcrumb.special.range = 1 |
lib.breadcrumb.special.targets.3 = page
lib.breadcrumb.1 = TMENU
lib.breadcrumb.1.target = _top
lib.breadcrumb.1.wrap = |
lib.breadcrumb.1.NO {
linkWrap = | >
}
# Bottom Navigation
lib.bottomnav = HMENU
lib.bottomnav.entryLevel = 0
lib.bottomnav.1 = TMENU
lib.bottomnav.1 {
NO.allWrap = |*| <span class="topnav"> |</span> |*|
ACT = 1
ACT.allWrap = |*| <span class="topnav"> | </span> |*|
}
### Defines the page object and uses TemplaVoila to render the page ###
page = PAGE
page.typeNum = 0
# Provide a link to the RSS feed for news. This should be discoverable by browsers such as Firefox and Safari
page.headerData.500 = TEXT
page.headerData.500.value = <link rel="alternate" type="application/rss+xml" title="RSS Feed" href="news/index.xml">
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
########## Extension Specific Setup #########
# Remove default CSS styling for tx_srfeuser_register
plugin.tx_srfeuserregister_pi1._CSS_DEFAULT_STYLE >
# Convert the date format of calendar to WEC constant defined value
plugin.tx_calendar_pi1 {
displayMonth.month.subparts.WEEKS.week.subparts.DAYS.day.subparts.EVENTS.event.marks.EVENT_TITLE.crop = 6 | ...
displayMonth.event.marks.EVENT_TIME.10.strftime = {$constants.wec.dateFormat}
displayMonth.event.marks.EVENT_TIME.20.strftime = {$constants.wec.timeFormat}
displayMonth.event.marks.EVENT_TIME.30.strftime = {$constants.wec.dateFormat}
displayMonth.event.marks.EVENT_TIME.40.strftime = {$constants.wec.timeFormat}
displayEvent.event.marks.EVENT_TIME.10.strftime = {$constants.wec.dateFormat}
displayEvent.event.marks.EVENT_TIME.20.strftime = {$constants.wec.timeFormat}
displayEvent.event.marks.EVENT_TIME.30.strftime = {$constants.wec.dateFormat}
displayEvent.event.marks.EVENT_TIME.40.strftime = {$constants.wec.timeFormat}
displayEvent.event.marks.EVENT_REPEAT.20.10.strftime = {$constants.wec.dateFormat}
displayUpcoming.event.marks.EVENT_TIME.10.strftime = {$constants.wec.dateFormat}
displayUpcoming.event.marks.EVENT_TIME.20.strftime = {$constants.wec.timeFormat}
displayUpcoming.event.marks.EVENT_TIME.30.strftime = {$constants.wec.dateFormat}
displayUpcoming.event.marks.EVENT_TIME.40.strftime = {$constants.wec.timeFormat}
}
#Convert the date format of news to WEC constant defined value
plugin.tt_news {
displaySingle.date_stdWrap.strftime = {$constants.wec.dateFormat}
displayLatest.date_stdWrap.strftime = {$constants.wec.dateFormat}
displayList.date_stdWrap.strftime = {$constants.wec.dateFormat}
displayList.time_stdWrap.strftime = {$constants.wec.dateTimeFormat}
}
<T3DataStructure>
<ROOT type="array">
<el type="array">
<field_mainmenu type="array">
<tx_templavoila type="array">
<TypoScriptObjPath></TypoScriptObjPath>
<TypoScript>
<![CDATA[
10 = HMENU
10 {
wrap = <div id="menu"> | </div>
entryLevel = 0
1 = TMENU
1 {
expAll=1
wrap = <ul id="menuList" class="adxm"> | </style></ul> NO {
wrapItemAndSub = <li> | </li>
}
}
2 = TMENU
2 {
expAll=1
wrap = <ul id="subList"> | </ul>
NO {
wrapItemAndSub = <li class="submenu"> | </li>
}
}
3 = TMENU
3 {
expAll=1
wrap = <ul id="subList"> | </ul>
NO {
wrapItemAndSub = <li class="submenu"> | </li>
}
}
4 = TMENU
4 {
expAll=1
wrap = <ul id="subList"> | </ul>
NO {
wrapItemAndSub = <li class="submenu"> | </li>
}
}
]]>
</TypoScript>
</tx_templavoila>
</field_mainmenu>
</el>
</ROOT>
</T3DataStructure>
   |
11 / 15 |
