Mapping Blocks vs. Elements
When I first started working with TemplaVoila I had a tendency to map my templates similar to the examples in Futuristic Template Building. I generally would map TypoScript objects to individual elements whereas now I have moved to mapping page templates in larger blocks.
Let's take a look at this header design..
The Old Way
in the past I would have mapped the masthead, utility menu and global menu as separate Typoscript objects (see below). In this example, the menu (#1), the site-wide promo (#2) and utility menu (#3) would have been seperate objects and the logo, upper right button and search would be in the template HTML.
This meant that if the utility menu (#3) was eliminated or the coding on the search changed, then I would be making those changes in the DS and template files plus having to update the mapping on all the templates for the site.
My Current Practice
Now I create a single TypoScript object (#1) for the entire header. Like this:
The practical advantages of this approach are:
- Less remapping of page templates when designs change. When something like a header structurally changes then only one TypoScript library needs to be rewritten as opposed to several templates being recoded and remapped.
- Page templates can be set up in a QuickSite that can be used over and over for a variety of designs without remapping.
- Sites with totally different designs can have very large differences in their HTML code yet use the same core templates. This allows skins to be switched without remapping.
Editor Experience & Back End Layout >>
In the Beginning,
There was TypoScript
There are three templating approaches used to produce TYPO3 sites.
- Pure TypoScript
- Marker-based templates where the site builder places markers in HTML files which are parsed by TYPO3.
- TemplaVoila which uses a mapping interface to interject dynamic content into HTML templates.
A Hybrid Approach
This framework uses a combination of the TypoScript and TemplaVoila approaches. TemplaVoila is the templating engine, but TypoScript is used to modify the HTML structure of the core templates and produce the output of significant areas of the design particularly the header and footer.
This leverages the benefits of both approaches. You keep the strong points of TemplaVoila (particularly flexible content elements) while keeping mapping and remapping of templates to a minimum by strategically using TypoScript.