TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

Typoscript - Adding sub templates

To keep your code ordered and structured (how IT nerds like it), you'll make a separate typoscript template for each part that needs typoscript (header, menus, extensions, etc). You'll also put all your typoscripts in one place. Since the main typoscript template is in the root page, so will your other typoscripts.

In this example you will create a typoscript template that puts an image (the website logo) in the header_top_left section of the HTML template. You could decide to remove this part from the Templavoila data structure and leave the logo as static part of the HTML template. However, changing some typoscript is easier than updating the HTML template (and with it, the Templavoila object template).

Typoscript templates for parts of your website, like the header_top_left part, will be created the same way as the main typoscript template. Click on "List", click on the root page "TYPO3Buddy" and use the green plus icon next to the existing main template element to create a new content element of the template type instantly:

TYPO3 Typoscript add sub templates - TYPO3 website tutorial

When creating a typoscript sub template, the template title will be in this example "+ Header top". The plus indicates that it's a sub template; an extension of the main template. The "Website title" field will be empty. In the setup part you will put the following lines:

lib.header_top_left = TEXT
lib.header_top_left.value = <a href="/"><img src="/fileadmin/templates/images/logo.png" alt="TYPO3Buddy" style="border:0px;" /></a>

lib.header_top_right = TEXT
lib.header_top_right.value = <!-- your own code -->

You'll end up with this:

TYPO3 Typoscript template setup - TYPO3Buddy website tutorial

Make sure you'll keep the "Setup", "Constants" and "Rootlevel" checkboxes (under the options tab) unchecked. Save the template.

Because this typoscript template will not be loaded automatically for the entire website (unlike the main template), and you'll never really visit the root page because it's a short cut to the home page, you'll have to include the sub template in the main template. To do that, edit your main typoscript template, click on the tab "includes" and include your sub template by clicking on the map icon next to the "Include basis template" box. A window will pop up, you navigate to the root page and click on the "+ Header top" template:

TYPO3 Typoscript include basis template - TYPO3 template tutorial

Save the main template. That's it. Clear all caches with the lightning bolt (if you don't have config.no_cache set) and enjoy the result! You might also need to clear the cache of your browser, or press CTRL+F5.

Please note: when using Fluid templating with recent versions of TYPO3, you need to remove unused references to typoscript objects from your template files otherwise the site won't load! Above, only the header_top_left and header_top_right objects have been configured.

Repeat this process for all other parts of the website, that are referenced by Fluid or Templavoila by the typoscript object path:

To add multiple sub templates, use the black plus sign in the popup window. This way, the popup window won't close. When finished, your root page will look like this (in the backend of TYPO3, in List mode):

TYPO3 element references - TYPO3Buddy website tutorial

Don't forget to include your typoscript sub templates in the main template. When you've done this, you'll see a 1 appear (indicated in the image above) in the [Ref] column, which means that these records have a reference to another record (in this case the main typoscript template).

When you're finished, clear the cache and refresh your browser. The result will look like this:

TYPO3Buddy final result

And the rest is history...

Continue adding the typoscript for the header image ->

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.