Platinum sponsors
Tutorials
Here follows some more examples of TypoScript:
If you want to start up a website from the ground, you must create a template on the first page of the website. This page may be refered to as "the root of the website" or more commonly the frontpage. The frontpage is not automatically the very first page in the Typo3 pagetree but can be any page in the tree, you want to act as a startingpoint of a website!
The initial template must have the checkboxes "Clear constants and setup" and "Rootlevel" checked. In order to understand this, you must know that templates are read from the root of the pagetree and outwards. This is called the "rootline":
In the picture to the right, the rootline from the page “Experienced we....” (3) goes all the way down to the page “www.typo3.com” (zero). This is because there is a template record on page “www.typo3.com” with the rootlevel flag set (see below). To the left you see how the rootline is represented in a PHP-array internally.
If you meet an expression like “Is page 730 in the rootline?” then the answer is yes in this case, because the page with id 730 (“Introduction”) happens to be the second page in the rootline (at index 1). Please see TSref for more info.
"Rootlevel" defines that the template signifies a start of a new website from the page the template lies on. If you do not set this checkbox, the template acts as an extension to any template in the rootline before it.
"Clear constants" defines that any constants from previous templates in the rootline are cleared before this template is loaded.
"Clear setup" defines that any TypoScript code from previous templates in the rootline are cleared before this template is loaded.
If you try to look at the page at this point, an errormessage appears.
You must write some TypoScript in the fields "Constants" and "Setup". Normally you include some of the static templates to start, but for this example we make a little template from scratch. Write the following in the field "Constants":
bgCol = red
You have now defined a so called constant - "bgCol" - to the value "red". We'll insert this constant in the "setup"-field.
Write the following in the field "Setup":
page = PAGE
page.typeNum = 0
page.bodyTag = <BODY bgColor="{$bgCol}">page.10 = HTML
page.10.value = Hello World
page.10.value.case = upper
This looks like this in the webbrowser:
This example shows a number of things about TypoScript. Lets start with the first two lines. Here "page" is defined to be a PAGE-object. A required property for a PAGE-object is the value typeNum, which is especially used, when a website uses frames (in that case typeNum would identify the various frames). If typeNum is zero then it just corresponds to a page refered to without the type-value, eg. "?id=51". That's the case for websites without frames.
Another property of a PAGE-object is "bodyTag". Here you enter the body-tag of the page. Please note that the background-color is red because we have inserted the constant from the "Constants"-field.
At last a Content-object of the kind "HTML" is defined. The value is set to "Hello World". This is sent off to the website. But you'll see, that it's shown in upper case as the value and any properties is parsed through the "stdWrap"-function. A property for "stdWrap" is "case" which can be either "upper" or "lower". Take a wild guess what "lower" does...
Now we'll add a little menu to the website. This menu must be located above the text "Hello World". Now add this in the bottom of the "Setup"-field:
page.5 = HMENU
page.5.1 = TMENU
page.5.1.wrap = | <BR><BR>
page.5.1.NO {linkWrap = <font color=yellow> | </font>
ATagBeforeWrap = 1
}
Here you define a new content-object at position 5 in "page"'s content-array. The object-type is HMENU. HMENU has a numerical array of menu-objects. Here we use "TMENU" as menu-object on the first level. This gives us a textbased menu. For the TMENU-object we set the property "wrap". As you might remember "a wrap" means that it'll be split up by the character "|" and the first two parts will be placed around "something". In this case (page.5.1.wrap = | <BR><BR>) the whole menu is wrapped so that two new lines appear after the menu.
Then some properties is defined for ".NO" under TMENU. ".NO" denotes the setup of menu-items in "normal"-condition. Other conditions could be "ACT" (Active), which means when a menu-item is somewhere in the "path" you're at on the website. For instance you could change the color of the item to white if you want to indicate it visually on the menu-item that a surfer has entered a certain section on the site.
Under ".NO" you define that every menu-item is wrapped in a font-tag making the link yellow. "ATagBeforeWrap" is an option that tells you that the link-tag (<A>) must be wrapped around the menu-item before the font-tag (or else the yellow color will be overridden by the normal tag-color).
Instead of the textual menu you just defined, you could insert the graphical menu from the Typo3 website. This would be done by this instead of the previous code:
page.5 < temp.topmenu
Now you would like to add content to the website. In the standard TypoScript solution the main content-table is "tt_content". So you add a new content-object of the type CONTENT. You set the property "table" to tt_content.
To configure the sql-select statement you define the property "pidInList" of the "select"-object. When you set it to "this" the pid of the content-records MUST match the id of the current page! "orderBy" is set to "sorting" which is the column in the table tt_content which decides the sorting of the elements.
page.10 = CONTENT
page.10 {table = tt_content
select {pidInList = this
orderBy = sorting
}
}
In order for this to work, you must define how each content-record is layouted. As default this is defined by the root-object "tt_content".
Here is a short example of TypoScript which would generate the content for the CTypes "header" and "text":
tt_content = CASE
tt_content.key.field = CType
tt_content.header {1 = TEXT
1.field = header
1.wrap = {$cHeaderWrap}1.space = 3 | 2
}
tt_content.text < tt_content.header
tt_content.text {3 = TEXT
3.field = bodytext
3.fontTag = {$cBodyTextWrap}3.br = 1
3.space = | 10
3.parseFunc {makelinks = 1
makelinks.http.keep = path
makelinks.http.wrap = <B>|</B>
makelinks.mailto.keep = path
makelinks.mailto.wrap = <FONT color="blue">|</FONT>
makelinks.mailto.ATagBeforeWrap = 1
}
}
There are two constants in this case, cBodyTextWrap and cHeaderWrap. These would be defined in the Constants-field in the template and could be value like this:
cHeaderWrap = <FONT face="Verdana" size="3" color="#333333"><B>|</B></FONT>
cBodyTextWrap = <FONT face="verdana" size="2"> | </FONT><BR>
Now, this would give us a size-3 Verdana header in gray and bold. The bodytext would be formatted also with verdana but size 2 and with a <BR>-tag after a section.
