Creating TYPO3 Templates
From ThemesWiki
| Official Page |
| Project Documentation |
| Download |
|
You are probably familiar with the concept of templates from other content management systems. The basic principle of TYPO3 templates is, however, somewhat different and more comprehensive. For example, it has its own language TypoScript that is used to generate templates.
Contents |
[edit] The Concept of Templates
The importance of TYPO3 templates is underlined by the fact that it is not possible to display pages from the TYPO3 project without them. The following tasks are performed by templates:
- Integration of design templates
- Definition of the page properties
- Menu generation
- Dynamic generation of images
- Integration of extensions
How the templates address these tasks is explained in the following sections.
[edit] Hello World!
Templates can be created and managed using the Web | Templates module. When this module is called up for the first time in a project, no templates will be displayed on the right-hand side of the screen. In order to create a new template, click on the Create template for a new site button and the template NEW SITE will be created (answer the security question Are you sure you want to do this? by clicking on OK). You can rename this template later to whatever you want.
If you call this page from the front end, HELLO WORLD! will be displayed without you having to do anything else. This value is automatically entered into the template by TYPO3.
[edit] Hello World! Part II
Let's go full speed ahead to gain a better understanding of templates. You are about to create your first template. Once again the classic Hello World! will make an appearance. There are no detailed explanations of the code here; we want you to get a feel of how templates work and what you have to do to create them.
Under fileadmin/_temp_/ create the file hello.htm with the following content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>Hello World!</title> </head> <body> <!-- ###BODY_CONTENT### --> <strong> <!-- ###BOLD### --> Is this text really displayed? <!-- ###BOLD### --> </strong> <!-- ###BODY_CONTENT### --> </body> </html>
Call the Setup field from the template dataset and enter the following code:
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template = FILE
template.file = fileadmin/_temp_/hello.htm
}
page = PAGE
page.typeNum = 0
page.10 < temp.mainTemplate
The previously created hello.htm HTML file is imported by the FILE object. But nothing spectacular happens when the changes are called up in the browser: the sentence Is this text really displayed? is displayed. Even when you look at the source code of the created HTML file you can see that the HTML page is displayed in its original form. Although this is correct in this case, it is not really the gist of the matter. Then why use a CMS at all? It is precisely here that a special feature of the cObject TEMPLATE comes to light not only is the HTML file imported with its help, but individual areas are also replaced by dynamic content. Make the following changes to the content of the Setup field:
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template = FILE
template.file = fileadmin/_temp_/hello.htm
workOnSubpart = BODY_CONTENT
subparts.BOLD = TEXT
subparts.BOLD.value = Hello World!
}
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 < temp.mainTemplate
When this file is called from the browser, you can see that the dynamic content Hello World! is displayed. A glance at the source code displays these changes:
<body> <strong> Hello World! </strong> </body> </html>
The changes can be looked at without paying any attention to the exact syntax: the TEMPLATE cObject received the command to edit the ###BODY_CONTENT### section. In addition, ###BOLD### was replaced by a cObject TEXT.
[edit] Inheriting Templates
You surely know the principle of inheritance from CSS. The style definitions that are specified for an element are also assigned to the subordinate elements. The following example shows how this works without paying too much attention to the CSS syntax:
body {
font-family: Verdana, Sans-Serif;
color: #000;
background-color: #fff;
}
Define font, font color, and background color for the <body> tag. Font and font color belong to the CSS properties that are inherited. Therefore, it is sufficient to define these properties in the <body>, since all other elements inherit it.
h2 {
color: #f00;
background-color: transparent;
}
The script of the heading h2 is displayed in the same font as is defined in the <body> tag. But a new color was defined. This way you can save a lot of keystrokes in bulky stylesheet definitions. But what does CSS have to do with templates in TYPO3? A lot,at least from the point of view of the inheritance principle, because the templates are inherited by subordinate elements in a manner similar to CSS properties. In the case of templates the subordinate pages are relevant for the elements. All instructions given by TypoScript in a page are applicable not only to the current page but also to all subordinate pages.
[edit] Template Elements
In principle, the creation of a template is not complicated. However, when the Template module is called for the first time for the purpose of creating a new template, one can be completely overpowered by the number of the input fields.
You will learn about the significance of the individual fields on the following pages.
Some of the elements have already been covered in detail; we will only mention those here. To ensure that all options are displayed on the page, the checkbox Show secondary options (palettes) in the bottom area of the window must be enabled.
- Template title: This field defines the name of the template. This name is displayed in the back end for an overview. You can choose whatever name you want; there are no syntax restrictions. The name should be meaningful and the template should be identifiable by the name alone.
- Website title: The name assigned here is used in the <title> tag of the website. This always takes place in accordance with the <title>{Web site title}::{Page name}</title> formula. The page name should therefore be selected carefully. The name of the company is usually entered here.
- Constants: In the Constants field, the values for the constants are defined.
- Setup: We have already discussed the Setup field in detail. This field is the most important element since you are writing real TypoScript code here.
- Resources: Here you have the ability to specify resources for the template. These resources can be images, HTML templates, True Type fonts, etc. The advantage is that when copying template datasets, the references to the resources remain preserved. This is also true if a resource is renamed. In TypoScript the resource data type exists to reference these resources.
- Clear: Both Clear Setup and Clear Constants play a decisive role in template inheritance. You can set the checkboxes to prevent the cascading of Constants or Setup.
- Rootlevel: The root of the page tree is defined by the rootlevel. You will recognize the rootlevel by a blue arrow in front of the template symbol. Inheritance also plays an important role with the rootlevel: the root template serves as the starting point for all TypoScript instructions and remains so until another template is defined as the root level.
- Include static: In the Standard Templates section of this tutorial you will learn about the standard templates that can be imported with Include static. To import a template you only have to click on it in the list box on the right. You can also import several templates. You can specify the sequence in which these templates will later be executed using the arrow keys. TYPO3 is configured to first execute the standard templates and then the basis templates by default. If the Include static AFTER basedOn checkbox is enabled, the order is reversed.
- Include static (from extension): This allows you to load extensions that contain standard templates. To use this option the appropriate extension has to be loaded.
- Include basis template: Basis templates are libraries that help organize TypoScript code. To import a basis template, select the directory symbol to browse for records. If you want to create a completely new basic template, click on the pencil symbol. If you want an overview of the sequence of templates, use the Template Analyzer, which you can call up via Web | Template.
- Static template files from T3 Extensions: In this field you specify the sequence for inserting static templates. Three options are available:
Option Description Default (Include before if Root-flag is set) In this option the standard templates of the extensions are inserted before the root template. Always include before this template record The standard templates of the extensions are inserted immediately before the relevant template. Never include before this template record This option ensures that the template of the extension is not inadvertently changed by one's own TypoScript code. The insertion of the standard template before the relevant template is prevented with this for that reason. - Template on next level: This option defines the responsibility of the template dataset for the next lower level. The purpose of this is to avoid having to assign a separate template dataset to each page of the subsequent level. This is useful, for example, if you want the front page for web access to have a different design than the sub-pages.
- Description: Here you can enter a description for the template. You will primarily enter those things that will help you and/or your customers to quickly become familiar with the function of the template.
- Backend Editor Configuration: Don't use this input field. The principle (which has since been revised) is that the CSS editor can be customized with stylesheet statements.
[edit] Objects and Properties of Websites
The use of TypoScript objects has already been covered. The objects that occur in completely normal websites, however, were not discussed in detail. Before moving on to the creation of websites via templates in the next section, we are therefore reviewing the objects that make up a website and how TypoScript handles them.
[edit] Defining Page Properties with TypoScript
If you have mastered HTML, you know that a website consists of several elements. In TypoScript these elements/properties are defined with the PAGE object. PAGE has numerous properties for this, of which only the most important ones are presented here.
[edit] bodyTag
You can engineer a complete <body> tag using this property. A typical statement for this property could look as follows:
page.bodyTag = bodyTag = <body background="fileadmin/img/hintergrund.gif" bgcolor="#000000" text="#FFFFFF" topmargin="0" leftmargin="0">
You can use all known HTML attributes within the <body> tag. Use CSS syntax, especially if modularity and editability are required. We could customize the above example as follows:
page.bodyTag = bodyTag = <body style="background-color:#000000; background-image: url(fileadmin/img/hintergrund.gif); margin-left:0px; margin-top:0px; color:#ffffff" >
[edit] stylesheet
Here you have the option of inserting a stylesheet file. If the stated file exists, it is linked in accordance with the usual HTML syntax <link rel="stylesheet" type="text/css" href="fileadmin/style.css" />.
stylesheet = fileadmin/style.css
There are also other ways of defining CSS properties; more about this later. The most commonly used form is stylesheet.
You can also use the @import syntax. This is made possible by the PAGE property includeCSS.
[edit] meta
Meta tags describe web pages more precisely. The meta property is designed for this purpose. The syntax always follows the same principle after meta, type the name of the desired meta tag separated by a dot.
page.meta.AUTHOR = Daniel Koch page.meta.DESCRIPTION = A descriptive text
A slight discordant note: By default no Dublin Core meta tags can be used here. If you want to do this, you have to integrate the plugin.meta static template.
[edit] Integrating Design Templates
Only two steps are required for using the design template:
- The design template is integrated.
- The markers and subparts are activated.
Incidentally there are other ways of creating templates. You can, for example, create pure TypoScript templates or modify the standard ones provided by TYPO3. The basic principle of both of these options will be presented to you in the course of this tutorial.
[edit] Activating the Design Template
When the design template is ready, a logical link has to be created between it and the template. To do this, generate a new design template with the following content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <html> <head> <title>Hello, World!</title> <link href="css/css.css" rel="stylesheet" type="text/css" /> </head> <body> <!-- ###BODY_CONTENT### --> <h1> <!-- ###BOLD### --> Heading on top <!-- ###BOLD### --> </h1> <div>###NEWS###</div> <!-- ###BODY_CONTENT### --> </body> </html>
You can now save this file under the name hello.htm in the fileadmin/_temp_/ directory. If this directory does not exist yet, create it. If you want to, you can change the directory and file names, provided the same changes are reflected in the template. Then create the file css.css with the following content in the fileadmin/ css directory:
h1 { font-family : Georgia, "Times New Roman", Times, serif; font-size : 16px; line-height : 12px;
font-weight :
bold; color : #660000;
}
div { font-size : 12px; color : #213c4d; font-style : normal; font-family : Verdana, Arial, Helvetica,
sans-serif;
}
This CSS file will format the two elements <h1> and <div>. The file hello.htm can now be called statically from the browser. The design template can be checked one more time with this. Are all the elements in the right place? Is the formatting correct? If everything is in order, the actual creation of the template can begin. To do this, call the template module and enter the following in the Setup field. If you have not yet created a template, first click Create Template for a new Site:
temp.mainTemplate = TEMPLATE
temp.mainTemplate { template = FILE template.file = fileadmin/_temp_/hello.htm
} page = PAGE page.typeNum = 0 page.10 < temp.mainTemplate
The design template is integrated into the template using this syntax. The heart of the matter is the FILE object using which the content of a file can be loaded. Check the file extension to find out the file type. Since the file in this case is a text or HTML file, its content is outputted at the specified location. You have to specify the path to the file in the property; the starting point for the path statement is the typo3/ directory.
If you call the page from the front end, you get the following:
Although the content of the page is shown, note that the stylesheets have been removed. This is on account of the already mentioned problem with the two heading and body areas, which are inserted by default.
[edit] Activating Placeholders
The page that we have called from the front end so far shows little (or nothing) spectacular. Only the design template has been inserted. This is hardly the point after all the markers and subparts have to be replaced. In order for this to work, you have to find a way to activate these placeholders.
[edit] Activating Subparts
We have already pointed out the problem of double headings with design templates. The solution to this was the subpart ###BODY_CONTENT###. TypoScript can now be instructed to reduce the design template to the content of the subpart ###BODY_CONTENT###:
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template = FILE
template.file = fileadmin/_temp_/hello.htm
}
page = PAGE
page.typeNum = 0
page.10 < temp.mainTemplate
page.10.workOnSubpart = BODY_CONTENT
If you call this page from the front end you will see that there is indeed only one <head> area now. This, however, leads to a new problem, because the page is now displayed in the front end without formatting. A look at the source code reveals why this is so: the reference to the stylesheet file that was there in the design template is gone thanks to the condensing of the design template to the subpart ###BODY_CONTENT###.
[edit] Integrating a Stylesheet
To apply the stylesheet, re-integrate it via the stylesheet property of the PAGE object. For this, the path to the CSS file is assigned to stylesheet:
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template = FILE
template.file = fileadmin/_temp_/hello.htm
}
page = PAGE
page.typeNum = 0
page.10 < temp.mainTemplate
page.stylesheet = fileadmin/_temp_/css/css.css
page.10.workOnSubpart = BODY_CONTENT
As soon as this page is called from the front end, the formatting is visible. The well-known syntax <link rel="stylesheet" type="text/css" href="fileadmin/_temp_/css/css.css" /> is now shown in the source text.
[edit] Activating Markers
Up until now, the marker ###NEWS### appears exactly as it was defined in the design template. This is about to change by replacing the marker ###NEWS### with the text There is also some news:
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template = FILE
template.file = fileadmin/_temp_/hello.htm
}
page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/_temp_/css/css.css
page.10 < temp.mainTemplate
page.10.workOnSubpart = BODY_CONTENT
page.10.marks.NEWS= TEXT
page.10.marks.NEWS.value = There is also some news
The marker of the design template is activated using marks. The syntax of marks differs somewhat from the versions discussed so far. Which placeholder is to be activated is first specified in marks. After that, the object that is to be used with this placeholder is specified. In the example shown this is a TEXT object, to which the character string that is to replace the placeholder ###NEWS### is transferred using value.
Of course this procedure doesn't make a lot of sense since hard-coded text in the template is every bit as easy to insert in the design template. The principle of this example, however, is the same as in the replacement of placeholder with dynamic content which we will see later.
[edit] Locating Errors
When working with placeholders, error analysis is particularly time-consuming. The tendency is to search through the entire TypoScript code, even though this is usually not necessary: error sources can normally be pinpointed to a few places.
page.10.marks.NEWS= TEXT page.10.marks.NEWS.vaue = There is also some news
When this code is called from the front end, the marker ###NEWS### cannot be seen, but neither is the new content displayed. If this occurs, it is most likely due to a wrongly typed property. In the example we just illustrated, the property vaue is used, which does not exist; the correct property is value.
Another common error is the use of a wrong marker name. The result of this is that the marker continues to be displayed in the front end:
page.10.marks.NEWTHINGS= TEXT page.10.marks.NEWTHINGS.value = There is also some news
The marker ###NEWS### can still be seen at the front end. The reason for this is that instead of ###NEWS### the marker ###NEWTHINGS### was used. The error is not always this obvious. If the marker, however, continues to be displayed in the front end in its original glory, it is most likely due to a wrongly typed marker name.
[edit] The Auto Parser Template
There are usually a number of people involved in creating an online presence with TYPO3. The designer creates the layout, which is then implemented by an HTML author and then modified for TYPO3 by a programmer. This chain of involved persons often leads to problems. It gets particularly awkward if the HTML author makes changes to the code written by the programmer. Template comments are often deleted or moved which of course destroys the template. The paths to graphics and stylesheet files are also risky: if these are not correct, display problems are created. The list of risks and errors could be continued indefinitely. The fact is, however, that later modification of templates (especially by inexperienced HTML authors) can have serious consequences. The Template Auto Parser extension is designed to help you avoid these problems. It gives you an edge in several areas: first of all, you can create modern layouts with it that use CSS for the positioning of elements instead of tables.
In addition, this extension manages the paths to graphics and other external files (CSS, JavaScript, etc.).
The Auto Parser is unfortunately not perfect; it takes a long time to learn and the markers are more accurate if set manually.
[edit] Installing the Parser
Before you can use the Auto Parser, it has to be installed. The Extension Manager usually helps you do this. If you don't have the extension, install it manually. Download the extension from http://typo3.org/extensions/repository/ search/automaketemplate/0.1.0/. After you have done this, open the extension manager and click on the search button in the Import Extensions area to find and highlight the downloaded t3x file. Click on Upload extension file und then on Install extension and you are finished.
To check whether this worked, call up the relevant template in the Template module. Select TypoScript Object Browser from the drop down-box in the upper part of the window. The following entry should now be displayed in the plugin branch.
[edit] Creating a Sample Application
Theory is always dull. Let us use a typical example to demonstrate how the Auto Parser Template works. Create the field hello.htm in fileadmin/_temp_/ with the following content:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>The Auto Parser</title> <link href="css/stylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="logo"> <img src="img/logo.gif" alt="Company logo" /> </div> <div id="navi"> Navigation </div> <h1 id="content"> Content </h1> <div id="footer"> Footer </div> </body> </html>
It is immediately clear that this is an HTML page that is based on a CSS layout. Pay particular attention to the paths of the integrated CSS file and the logos, which will change in the course of the subsequent statements.
[edit] Editing the Settings
In order for the Auto Parser to control the output, it must first be configured. In this section you will learn the required procedure step by step. First enter the following code in the Setup field:
plugin.tx_automaketemplate_pi1 {
content = FILE
content.file = fileadmin/_temp_/hello.htm elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
DIV.all = 1
H1.all = 1
}
relPathPrefix = fileadmin/_temp_/ }
page = PAGE
page.typeNum = 0
page.config.disableAllHeaderCode=1
page.10 =< plugin.tx_automaketemplate_pi1
There are a number of new elements here: content loads the previously created template file hello.htm. The HTML elements that are to be wrapped with subparts are defined under elements. In this example these are the <body> tag, the <head>, the <div>, and the <h1> tag. The elements <body> and <head> get a marker, subparterMarker, so that they can be activated with the TEMPLATE cObject. The page title, however, is a problem with the hello.htm template; it has already been defined but, as is well known, TYPO3 sets the <title> tag by default. The <title> tag can be automatically deleted from the template with rmTagSections=title.
The problems with the paths to the CSS file and the graphics are solved with relPathPrefix. The relative paths of the templates are edited with it. And finally,the page is created. When it is called from the browser, the following source text can be seen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!--###DOCUMENT_HEADER### begin --> <link href="fileadmin/_temp_/css/stylesheet.css" rel="stylesheet"type="text/css" /> <!--###DOCUMENT_HEADER### end --></head> <body> <!--###DOCUMENT_BODY### begin --> <div id="logo"> <!--###logo### begin --> <img src="fileadmin/_temp_/img/logo.gif" alt="Logo" /> <!--###logo### end --> </div> <div id="navi"> <!--###navi### begin --> Navigation <!--###navi### end --> </div> <h1 id="content"> <!--###content### begin --> Content <!--###content### end --></h1> <div id="footer"> <!--###footer### begin --> Footer <!--###footer### end --></div> <!--###DOCUMENT_BODY### end --> </body> </html>
The new source text looks completely different; to begin with, there are numerous subparts in the source code, the <title> element has been deleted and finally the paths of the <link>-and the <img> tags have been changed. But that is not all: the Auto Parser Template starts getting really interesting when the marked subparts are replaced with content. For this, you have to add some a few more statements into the Setup field:
plugin.tx_automaketemplate_pi1 {
content = FILE content.file = fileadmin/_temp_/hello.htm elements {
BODY.all = 1
BODY.all.subpartMarker = DOCUMENT_BODY
HEAD.all = 1
HEAD.all.subpartMarker = DOCUMENT_HEADER
HEAD.rmTagSections = title
DIV.all = 1
H1.all = 1
} relPathPrefix = fileadmin/_temp_/ }
The first part is identical to the one already defined. In the next step, the mainTemplate object, which is enclosed by the DOCUMENT_BODY placeholder, is created. With the workOnSubpart property you can specify that the object is applicable only to the part of the HTML template that is identified with DOCUMENT_BODY.
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template =< plugin.tx_automaketemplate_pi1
workOnSubpart = DOCUMENT_BODY
The next lines define the subparts and populate them with dummy texts. The syntax here is rather simple: the relationship is specified in each case by the ID that was assigned to the HTML element in the template.
subparts.navi= TEXT subparts.navi.value = The navigation goes here subparts.content = TEXT subparts.content.value = The content goes here subparts.footer= TEXT subparts.footer.value = The content of the footer goes here }
What was done for the <body> element at beginning of the source text is repeated here for the <head> element:
temp.headTemplate = TEMPLATE
temp.headTemplate {
template =< plugin.tx_automaketemplate_pi1
workOnSubpart = DOCUMENT_HEADER
}
Finally the page is generated in the usual way; the content of mainTemplate is copied to the <body><code> area and the content of headTemplate to the <code><head><code> area.
page = PAGE page.typeNum = 0 page.10 < temp.mainTemplate page.headerData.10 < temp.headTemplate
If you now call the template from the front end and look at the source text, you will be surprised:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!DOCTYPE html PUBLIC "-// W3C//DTD HTML 4.0 Transitional//EN"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <link href="fileadmin/_temp_/css/stylesheet.css" rel="stylesheet" type="text/css" /> <title>My Root</title> </head> <body style="background-color:#ffffff"> <div id="logo"> <!--###logo### begin --> <img src="fileadmin/_temp_/img/logo.gif" alt="Logo" /> <!--###logo### end --></div> <div id="navi">The navigation goes here</div> <h1 id="content">The content goes here</h1> <div id="footer">The content of the footer goes here</div> </body> </html>
The source code has been completely modified. For reasons of space, only the most important elements are printed here. In a real-life situation you will see that the standard TYPO3 comments and the JavaScript are also there. Furthermore, the<code> <title>content and the relative paths to the CSS file and the graphics have been automatically modified. The contents of the <div> and <h1> tags have also been replaced.
[edit] Standard Templates
TYPO3 comes with a few standard templates. These can be seen under Web | Template | Click here to edit whole template record by clicking on the Include static field. Standard templates are very useful if you don't want to create your own templates. You can modify the standard templates that come with TYPO3 as you wish, but your options are limited. If you want to create your page with a minimum of effort, use the standard templates. The following example shows how easy these templates are to use:
You will find a brief description of the templates in the following pages. This should make it easier and faster to select the right template.
Not all templates are listed; that would take too long. You can find a complete list of standard templates that can be used with TYPO3 at http://typo3.org/documentation/document-library/doc_statictmpl/.
[edit] template
All templates beginning with template access the standard template content for rendering. These templates are particularly useful for new users of TypoScript who want to get quick results. Templates can be customized quite easily with to the Constant Editor. The following table describes these templates:
| Template | Description |
|---|---|
| template; TU | This is a frameless template. The template has a menu on the left. The individual menu items can have a background graphic. A graphic on top, possible definitions of page divisions, and page width are additional features. |
| template; RE | A template with three frames. The navigation is in two parts. The first menu level is shown in the upper frame. Various background pictures for active, normal, and rollover can be assigned to the left menu. |
| template; NEWSLETTER | This template, as the name implies, is designed for sending newsletters (this is done in combination with the Direct Mail Module extension). |
| template; HYPER | A template with frames. The upper frame contains a DHTML menu and the logo. |
| template; GREEN | A very green HTML template. The advantage of this template is that it can easily be edited using an HTML editor. The upper frame contains a DHTML menu, a logo, and a graphic. |
| template; GLUECK | This is optically one of the most daring templates. The default colors blue, purple, green, and yellow compete for the viewer's attention. The template consists of a three-column table. The individual columns can each have a different background graphic. |
| template; FIRST | This is a frame-based template that has a two-level menu. The background color and size can be specified separately for each of the three frames. |
| template; CrCPH | This one-page template is based on a single HTML page. The template contains two text menus and two columns for the content. |
| template; CANDIDATE | This is also based on a single HTML page. The right column can be hidden if needed. A title graphic is displayed in the upper area of the page. The header graphic can be displayed across two columns and the content of the right column can be displayed in the left column. |
| template; BUSINESS | This template is based on frames. A graphic is displayed in the left frame. Below this, there is a two-level text menu. You can select a different background graphic for each of the two frames. |
| template; MM | A very simple one-page template with navigation in the upper area. A right column can be added if desired. |
| template; BLUG | This template consists of three frames. A graphic is displayed in the upper frame; there is a graphical menu in the left frame, which can be fine-tuned through a variety of options. In addition, the size and background color of all frames can be changed. The right frame can be used for any and all content. |
[edit] temp.*
A number of help templates have been created in TYPO3. For example, temp. tt_board(shared) [DEPRECIATED], which belongs to the plug-in forum, is included by default. This template, as well as plugin.tt_board_list and plugin.tt_board_tree, which are based on it, should not be used any more. Their tasks are now handled by the Message board, twin mode (tt_boar) extension.
[edit] styles
All templates beginning with styles contain code snippets that perform all kinds of tasks. What these tasks are can be determined from their names. Thus, for example, styles.hmenu.tu is used to define a menu. The styles templates thus offer the possibility of integrating specific elements such as menu, site maps, etc. into the page without too much effort.
[edit] records (example)
This template illustrates very simply how content from the tt_* extension tables can be rendered. The developers of this template expressly point out that it is only meant for demonstration purposes and is not suitable for practical use.
[edit] content (default)
The most frequently used template is content (default). Not only are websites and other templates based on it, but it also contains general information about how data is outputted to the front end.
[edit] frameset
In frameset you can find all of the templates using which frame-based layouts are realized. Which template handles which layout can be gleaned from the name. For instance frameset; top-page entails a two-part frameset, with one frame above and one below.
[edit] plugin
This merges mainly dynamic content that is based on your own PHP functions. A look at the plugin list will show you that a number of templates are marked with [DEPRECIATED]. Ideally none of these templates should be used anymore since their functionality can now be found in the respective extensions.
[edit] Pure TypoScript Templates
So far we have been speaking constantly of HTML design templates when discussing templates. Of course this is not the only approach. You can also create templates that are based totally on TypoScript. There are no disadvantages to this approach. If you are a TypoScript expert, it probably will not take you any longer to create a TypoScript template than to build an HTML design template.
With TypoScript templates you create the content step by step with TypoScript and then publish them. TypoScript templates are created using the Template module; you can create a new dataset of the Template type with the Pages or Lists module. Here is a simple example:
page = PAGE
page.typoeNum = 0
page.bodyTag = <body>
page {
10 = HTML
10.value = <table><tr><td>
20 = TEXT
20.value = Welcome
20.wrap = <h2> |</h2>
30 = HTML
30.value = </td></tr><tr><td>
40 = TEXT
40.value = Menu
50 = HTML
50.value = </td></tr>
60 = HTML
60.value = </table>
}
page = PAGE
page.typoeNum = 0
page.bodyTag = <body>
page {
10 = HTML
10.value = <table><tr><td>
20 = TEXT
20.value = Welcome
20.wrap = <h2> |</h2>
30 = HTML
30.value = </td></tr><tr><td>
40 = TEXT
40.value = Menu
50 = HTML
50.value = </td></tr>
60 = HTML
60.value = </table>
}
A very simple HTML layout can be generated by using various content objects. Use the content object TEXT to output normal text. This example accesses the content element HTML for defining the table. The table could, however, also be realized via Ctable as in the next example.
The TypoScript template generates the following HTML syntax in the front end:
<table> <tr> <td><h2>Welcome</h2></td> </tr> <tr> <td>Menu</td> </tr> </table>
Although this present example made use of a table construction, CSS-based page layouts are actually better. To create such layouts you normally need a stylesheet file, which is integrated in the following way:
page.stylesheet = fileadmin/_temp_/styles.css
So far the example has consisted of only text and various HTML elements. Graphics can also be integrated easily:
50 = IMAGE
50 {
file = fileadmin/_temp_/img/logo.jpg
altText = My Logo
}
As you can see, anything that can be done via HTML templates can also be realized directly with TypoScript. The method you choose when all is said and done is a matter of taste.
[edit] TemplaVoil
The latest method for creating templates is using TemplaVoil . This is a new extension that makes it possible for TypoScript developers to integrate templates using a graphical user interface. The purpose of the templates can also be specified here. The biggest advantage of TemplaVoil is that various layouts can be implemented without any PHP knowledge.
Thanks to TemplaVoil , an HTML master can be formatted as a template with just a few mouse clicks. And the best part new content types can be created that are no longer limited by the structure of the database tables. In addition, elements can be nested within each other at will, putting an end to the rigid three-column limitation.
TemplaVoil also introduces another important new feature: once content is created, it can be reused in multiple locations. This is not a copy and paste procedure, but is handled via a link to the content. All this is realized with XML.
Flexforms are another new feature in TYPO3. They provide another option for entering and saving data. Flexforms are covered at the end of this tutorial.
TemplaVoil and Flexforms are very interesting topics. For more information about
both of these topics, go to http://typo3.org/documentation/document-library/ templavoila/.
[edit] System Prerequisites
Let's demonstrate the functionality of TemplaVoil with a simple example. So that you can use the same example as this book, go to http://de.selfhtml.org/ layouts/nr10/index.htm and download the template. This template was created by Jeena Paradies with SelfHTML. It serves our purposes very well and it may be used freely.
Before you can use TemplaVoil , you have to install the following additional extensions:
- css_styled_content
- static_info_tables
- templavoila (The Enable the classic page module checkbox in the lower part of the window has to be enabled; if you don't do this now, it will not be possible to start TemplaVoil up later on.)
Before you start working on or with TemplaVoil , you should first empty the cache. You will find the settings for this in the lower left area of the window under Admin functions. Click on Clear cache in typo3conf/.
[edit] Preparing TemplaVoil
After the installation of the extensions and the refreshing of the back end, the Web array has been expanded by the addition of TemplaVoil .
Now you have to tell TYPO3 that TemplaVoil is now responsible for the
administration of templates and contents. Enter the following setup into the template of the root page:
page = PAGE page.10 = TEXT page.10 = Hello, World! page.10 = USER page.10.userFunc = tx_templavoila_pi1->main_page
With TYPO3 versions earlier than 3.8 you have to also use page.typeNum = 0.
You also have to pick the CSS_Styled_Content extension in Include static (from extensions).
Next, create a new SysFolder (e.g. TemplaVoilaData). This type of page is not meant to display pages in the front end; its purpose is to administer datasets in the back-end. SysFolders are best compared to directories in the file system.
In the next step, let the root page know where the template files can be found. To do this, go to the root page context menu and click on Edit page properties.
The previously created SysFolder TemplaVoilaData should be selected under General Record Storage page.
[edit] Setting up the Data Structure
Copy the downloaded layout into the _temp_ directory. In order to call up the editor provided by TemplaVoil , you have to call up the layout page (in the current _temp_/layout/index.htm example) using the Filelist module.
Specify the document structure in the window that opens and select TemplaVoil from the context menu of index.htm. Create the template with these two steps:
- Define the placeholders that will later be replaced by the content.
- Link the placeholders to the HTML elements using the graphical interface.
How you do this is up to you. You could define all of the placeholders first and then link them together or you could define and link them one after the other.
The most clearly laid out way and the way we did it in the example is to follow the logical construction of the page and work through the elements from top to bottom.
The primary element is ROOT and it is usually linked to the HTML element <body>. Click on Map and select the <body> tag. The selected element is transferred and you can now choose from the following two options in the drop-down list:
- . INNER: The selected tag remains where it is and is linked inside the <body> tag.
- . OUTER: The selected tag does not remain and is not transferred to the element.
Always select INNER if the content is later to be placed inside the element.
You always have to select INNER for the <body> tag. The changes are then applied with Set.
You can now create the next element. How this works is illustrated with the help of a simple content element (Page title). Enter field_header for the field name. Call up the next dialogue window by clicking on Add and you will see the following options:
| Field | Description |
|---|---|
| Mapping Type | Defines the mapping type. Specify here whether this is an element, container, or attribute. |
| Title | Specifies the title of the element. |
| Mapping instructions | Determines how the field is mapped. |
| Sample Data | After the element has been mapped, the content defined is displayed. |
| Editing Type | Determines the type. If this is a normal content element,Content Elements is selected. Options available are:
|
| [Advanced] Mapping Rules | Advanced mapping rules are defined via this field. |
The settings for the activated heading element look like this:
Set up the document structure for all of the other elements of the page the same way. In our current example, Content Element is set for each of Header, Content, and Footer. TypoScript Object Path is selected for Menu and News. That way the News and the Menu can be dynamically loaded from the back end. The document structure should now look like this:
Now the document structure has to be linked to the HTML element. Call up Preview and set the Exploded Visual mode in Mapping Window. The mapping is accomplished by clicking on the appropriate icons. The selected element is transferred and you can now choose between the two familiar options of INNER and OUTER.
First link the ROOT element with the <body> tag and then all of the other elements can be linked. The finished mapping for the example template looks like this:
After all of the elements have been mapped, you can check what it looks like with Preview and make whatever changes or improvements you see fit. In parallel with this, a respective template object is generated automatically.
You can create the data structures and the template objects by clicking on Save as. The notice that Data Structure (uid 2) and Template Record (uid 2) was saved in PID "58" will then be displayed in the upper area of the overview page.
If you want to see what data has been set up, click on List under Web and select the SysFolder that you created.
When discussing data structure (DS) one cannot avoid template objects (TO).
Although the two have different definitions, they are nonetheless based on each other.
The already mentioned template objects refer to the DS and determine how the DS elements are outputted. In other words, the TO has the instructions as to what HTML file is to be used for rendering. The difference between DS and TO can be summarized as follows:
- A DS defines which fields can be linked with the HTML template.
- A TO determines which HTML elements are linked to which fields.
Data structures consist of a definition of arrays, fields, and field types. The following listing illustrates (in extracts) a typical DS:
<?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?> <T3DataStructure> <meta type="array">
The start of a section containing meta-information:
<langChildren type="integer">1</langChildren> <langDisable type="integer">1</langDisable> </meta>
The first object of a data structure always has to be the element ROOT of data type array. The rest of the objects of the document structure are contained in this object.
<ROOT type="array"> <tx_templavoila type="array"> <title>ROOT</title> <description>Select the HTML element on the page which you want to be the overall container element for the template. </description> </tx_templavoila> <type>array</type> <el type="array">
That is how DS objects are defined. The header element for this case:
field_header type="array"> <tx_templavoila type="array"> <title>Header</title> <description>Page Title</description> <sample_data type="array"> <numIndex index="0">This is where the page title is entered.</numIndex> </sample_data> <eType>input_h</eType> </tx_templavoila>
An input field is created:
<TCEforms type="array"> <config type="array"> <type>input</type> <size>48</size> <eval>trim</eval> </config> <label>Header</label> </TCEforms> </field_header>
The Content element is defined by the Content Element type. Here is how this works in XML syntax:
<field_content type="array"> <tx_templavoila type="array"> <title>Content</title> <description>Content of the main window</ description> <sample_data type="array"> <numIndex index="0">There is a lot of text here. Mind you it is there strictly as a placeholder. What you enter as text is not very important. </numIndex> </sample_data> <eType>ce</eType> <TypoScript> 10= RECORDS 10.source.current=1 10.tables = tt_content </TypoScript> <oldStyleColumnNumber type="integer"> 0</oldStyleColumnNumber> </tx_templavoila> <TCEforms type="array"> <config type="array"> <type>group</type> <internal_type>db</internal_type> <allowed>tt_content</allowed> <size>5</size> <maxitems>200</maxitems> <minitems>0</minitems> <multiple>1</multiple> <show_thumbs>1</show_thumbs> </config> <label>Content</label> </TCEforms> </field_content> <field_menu type="array"> <tx_templavoila type="array"> <title>Menu</title> <description>The Menu</description> <sample_data type="array"> <numIndex index="0"> This is where the menu is</numIndex> </sample_data> <eType>TypoScriptObject</eType> <TypoScriptObjPath>lib.myObject</ TypoScriptObjPath> </tx_templavoila> </field_menu> <field_aktuelles type="array"> <tx_templavoila type="array"> <title>News</title> <description>This is where the news are </description> <sample_data type="array"> <numIndex index="0"> All of the news are entered here. </numIndex> </sample_data> <eType>TypoScriptObject</eType> <TypoScriptObjPath>lib.myObject</ TypoScriptObjPath> </tx_templavoila> </field_aktuelles> <field_footer type="array"> <tx_templavoila type="array"> <title>Footer</title> <description>The footer data</description> <sample_data type="array"> <numIndex index="0">This is where the Copyright and other important data is. </numIndex> </sample_data> <eType>ce</eType> <TypoScript> 10= RECORDS 10.source.current=1 10.tables = tt_content </TypoScript> <oldStyleColumnNumber type="integer">1 </oldStyleColumnNumber> </tx_templavoila> <TCEforms type="array"> <config type="array"> <type>group</type> <internal_type>db</internal_type> <allowed>tt_content</allowed> <size>5</size> <maxitems>200</maxitems> <minitems>0</minitems> <multiple>1</multiple> <show_thumbs>1</show_thumbs> </config> <label>Footer</label> </TCEforms> </field_footer> </el> </ROOT> </T3DataStructure>
[edit] Creating Content
After the data structure has been set up, the content can be created. To accomplish this, you have to link the template object with a given page. Call up the context menu of the respective page and select Edit page properties.
In General Record Storage page select the SysFolder you have created. Now you can select the template object.
After saving, you will see new fields for the defined content Header, Content, and Footer in the lower part of the window.
Now you can create new content and configure your page the way you want.
[edit] Conclusion
TemplaVoil is one the most powerful TYPO3 extensions and much too comprehensive to cover in more detail here. We wanted to give you an example to show you the revolutionary nature of this new approach to templates.
The official documentation for this topic can be found at http://typo3.org/documentation/document-library/extension-manuals/templavoila/current/view/.
[edit] Flexforms
Although Flexforms are often mentioned in the context of TemplaVoil , they can also be used independently and can in particular be used for developing extensions. With the help of an XML interface, extensions can break open the field assignments of the database tables. TemplaVoil surely the best-known extension to use Flexforms shows how well this functions. With a few mouse clicks you can create templates that do not have to conform to the normal three-column grid.
[edit] Additional References
For instructions on Installing TYPO3, click here
[edit] Summary
TYPO3 has its own language, TypoScript, that is used to generate templates. The tasks performed by these templates are the integration of design templates, definition of page properties using TypoScript, menu generation, dynamic generation of images, and the integration of extensions. Templavoil is a new extension that makes it possible for TypoScript developers to integrate templates using a graphical user interface. The biggest advantage of TemplaVoil is that various layouts can be implemented without any PHP knowledge.
[edit] Source
The source of this content is Chapter 5: Templates of Mastering TypoScript by Daniel Koch (Packt Publishing, 2008).
