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

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. If this does not happen, please clear all caches with the lightning bolt (top right) and reload the CMS. 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. Click on Configuration to open the configuration form. Title will 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

Please note: with Templavoila Plus up to version 7.3.3 it seems impossible to update the Typoscript Object path once the element is created. The only way to update the path seems to delete and recreate the entire element.

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!

Kind reminder! This tutorial has been tested with and updated for TYPO3 v10. Please keep in mind that the tutorial has once been set up for TYPO3 v6. It follows some deprecated conventions. If so, this will be mentioned in the tutorial.