TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

Templavoila: template object and data structure

First, you'll connect your HTML template to the Templavoila template object. Templavoila offers a wizard to create a new data structure (DS) and template object (TO). You will not use the wizard, as it will create stuff you don't need, such as a huge page tree and a partial data structure that you need to edit anyway. Furthermore Templavoila might indicate that it misses the fileadmin/templates directory, despite the fact that it does exist. This is a bug and keeps you from starting the wizard. But again; you don't need the wizard, so let's continue!

You go to the filelist, search for your HTML template. In our example it is in the fileadmin/templates folder. Right click on the icon of the HTML template and choose Templavoila, like this:

Start Templavoila through filelist - TYPO3 website tutorial

Please note: If the "Templavoila" option doesn't appear in the right-click menu, try downgrading Templavoila if possible. Fastest way to do that is to download another version of the extension and upload it again. Be sure to allow to overwrite the existing extension. Clear cache afterwards and restart your browser. If that doesn't work, because you use TYPO3 6.x and the only Templavoila version available is 1.8.0, you can try to update the following Templavoila files manually:

  • typo3conf/ext/templavoila/class.tx_templavoila_cm1.php, line 62: change tx_templavoila_file::is_xmlFile to tx_templavoila_file::is_xmlFile_finfo
  • typo3conf/ext/templavoila/classes/class.tx_templavoila_file.php line 114, change protected static function is_xmlFile_finfo($filename) to public static function is_xmlFile_finfo($filename)

If you are able to select the Templavoila option from the right-click menu, the "Building data structure" screen fires up, so it's time to get serious. The aim here is to configure all parts of the website that will be provided with content by TYPO3 and Templavoila. The content for those parts can be text, an image, a menu or content generated by extensions. TYPO3Buddy has 9 of those parts, although not all these parts will be used in this tutorial. In Templavoila, each part is called "data element".

In Templavoila you'll start with the part in your HTML template with the id "header_top_left". So the field name of the first Templavoila data element will be "field_header_top_left". You can give the field any name you want, but we'll use the "field_<id_of_html_element>" convention. After having entered the field name, click on the "Add" button:

TYPO3 Templavoila add data elements - TYPO3Buddy website tutorial

Next, you'll configure the data element. Title will also correspond with the id of the HTML element, in this case "Header top left". Element preset will be "Typoscript object path"; this data element will be provided with content by typoscript. More on this later. Mapping instructions, sample data and mapping rules are not important nor necessary for this example. You could however add "div" to mapping rules, this will exclude other elements from being mapped. The only elements that will be mapped in our example are div elements. Then again; nearly all elements in the HTML template are div elements, so there's no need to exclude other elements explicitly with mapping rules. Then click on the "Add" button:

TYPO3 Templavoila add data elements - TYPO3Buddy website tutorial

After clicking the "Add" button, the form changes slightly. You click on "Typoscript", below "configuration", to set the "Object path" for the "Header top left" data element, which will be the same as the field name, except the "field_" part will be replaced with "lib.". In this case the object path will be "lib.header_top_left". You can give the object path any name you want, but we'll stick to the "lib.<id_of_html_element>" convention. Then click on "update" and after that on "cancel/close":

TYPO3 Templavoila add data elements - TYPO3Buddy website tutorial

Repeat the same steps for all other Data Elements (of course with different Data Element names, field names and object paths, which correspond with the ids of the divs they link to), until you end up with the following:

TYPO3 Templavoila data elements - TYPO3Buddy website tutorial

Right now, every element has the "typoscript object path" element preset. However, the main content part (field_content_main) will not be provided with content by typoscript only. It needs to show the content that you will put in TYPO3 later.

Edit the Content main (field_content_main) data element by clicking on the pencil next to it and change the element preset to "Page-Content Elements [Pos:0]", click on "Update" and after that on "Cancel/close":

TYPO3 Templavoila Page-Content elements pos 0 - TYPO3Buddy website tutorial

Finally, an overview of the used field names, element presets and typoscript object paths:

TitleField nameElement presetTyposcript Object path
Header top leftfield_header_top_leftTypoScript Object Pathlib.header_top_left
Header top rightfield_header_top_rightTypoScript Object Pathlib.header_top_right
Header menufield_header_menuTypoScript Object Pathlib.header_menu
Header imagefield_header_imageTypoScript Object Pathlib.header_image
Breadcrumbfield_breadcrumbTypoScript Object Pathlib.breadcrumb
Content menufield_content_menuTypoScript Object Pathlib.content_menu
Content mainfield_content_mainPage-Content Elements-
Footer leftfield_footer_leftTypoScript Object Pathlib.footer_left
Footer rightfield_footer_rightTypoScript Object Pathlib.footer_right

Next step: link those data elements to corresponding parts in your HTML template...!

The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!