Working with design templates

Templates in T3: 1 term - 2 types

A typical web editor is out of its depth installing complex websites with a variety of zones and layouts. But a modern and professional Enterprise Web Content Management System holds all the right cards for the creation and management of multiple Websites. Special TYPO3 templates are available for creating basic layouts. The term "templating" refers to the laying down of working patterns. Template is actually a slightly misleading expression, because the term template can mean two different things in TYPO3.

HTML templates, which alongside the basic website design also incorporate marked areas where dynamically generated content will later be integrated.

The concept of "normal" templates has been standard procedure in the construction of complex websites for years. Such templates supply a pre-finished design pattern for the site layout, encoded into HTML, then defined and loaded into a website or HTML editor of choice. The general advantage of templates is that they fix the parameters of page structure and content, making them reusable, while also defining those areas where dynamic content will later be integrated. This is equally true for the TYPO3 Web Content Management System, which supports templates built on HTML, XHTML 1.0 and CSS 2.0.

But in TYPO3, the term"“template" is also used to refer to

TypoScript Templates: these are TYPO3 configuration patterns, that define the form in which database content is inserted into the pre-marked zones of the design template.

So what does "templating" mean in TYPO3?

Templating refers to the drawing up of a design layout in TYPO3 using TypoScript and occasionally TemplaVoila.

What are the different templating options?

Templating by hand

Templating by hand means setting up an HTML pattern via the normal TYPO3 "Template" Function. As with any other HTML editor, a text box will open into which the user can enter the appropriate code. Dynamic content is then integrated into the HTML page, either using markers or subparts and the appropriate TypoScript code. In addition, Cascading Style Sheets can also be referenced, simply by providing path information. In this method, it is important to correctly establish all the paths to the CSS files, images and other media, and include them in every line, so that TYPO3 can later reassemble the page correctly.

For complex websites with a large number of pages, this method is too cumbersome, particularly if the page layout is designed to be open to customer modifications.

Templating with the "Template Autoparser"

This is where the "Template Autoparser" extension comes in! This extension enables the appropriate paths to be configured in advance. TYPO3 uses this to look for the relevant HTML coded elements of a page or pages, tracing subsidiary paths as well as the main path. Thus specific path directions are no longer necessary. As with hand templating, dynamic elements can be integrated in HTML as and where desired, either with subparts or by setting markers with the right TypoScript code.

Templating with "TempaVoila"

The new extension "TemplaVoila" makes templating even easier. TemplaVoila (TV) lets you map content (text, images, multimedia, and extension output) within an HTML template (HTML + CSS definition of web-pages). This means that one can easily define the exact position on the webpage in which a particular main text, flash header or menu should appear.

How to template with TemplaVoila

First create the complete webpage in a standard HTML editor;
The result is filed under fileadmin in a specially created system directory called templates;
After this defines two new structures in TemplaVoila

A data structure (DS)
A template object (TO)

The TemplaVoila data structure defines which content should be shown on the webpage. The Template object defines where.

Specific tags or content due to be replaced in the current HTML template can be chosen by visual mapping in TV. One can then define, via the TYPO3 structure tree, which template is to be used for which web page, and what type of content is to be written in at each TemplaVoila point.

The advantages of using TemplaVoila

However, the decisive advantage of TemplaViola, when compared with outmoded standard templating and Autoparser, is that it reduces TypoScript page configuration to a minimum. In addition, certain aspects of web design, such as the flexible arrangement of columns and layouts, whether as highly complex graphic elements or even as "on-the-fly" changeable Flash data are only possible in a TYPO3 website by employing TemplaVoila.

Additional external resources:
The TYPO3 Templating Concept An introduction	Templating with TemplaVoilá An introduction
Templating with the Autoparser An introduction	TYPO3 Documentation Library Official documentation