In this article I want to explain some principles and want to give some recommendations  for a clear and maintainable TYPO3 Site, especially regarding a well structured TYPO3-Template design.

This article is based on the traditional templating in TYPO3. But it includes some extra hints for TemplaVoila at the end, and most  of the suggestion will also take effect for TemplaVoila...

Common principles:

Templatedesign is like programming: a good style results in reusability and cheaper maintenance. The most important principles are:

• always start with a analysis of the requirements and the needed sitestructur, and plan your work.
• Never use Code double. (Instead store it in a generic way and reuse it)
• Logical structur
• Make enough comments so one can understand the code easily also after a longer time.

An fictitious example:

Say we want a Site in TYPO3. The Site should have a mainmenu in the top and the submenu in the right. Also there is a footmenu and a breadcrummenu in the site. The site should be available in a printversion and in a special barrier-free version.

As a particularity the Design in the Subtree from Site B should be a bit different to the rest.

Also the Subsite AB and Subsite B should have a newslist in the right.
 
Image 1: Design (Layout)
 
Image 2: Sitestructur



 
The TYPO3 Templates are structured and ordered like this:

• One Maintemplate in the root of the site
  This Template hasn’t much Code in it, only some setting which are common and generic for the site like: config.xhtmlcleaning
• All other TS-Code is structured in separate Templates (which are stored in the common Sysfolder “Templates”) like this example templates:
  1. + MainMenu/Submenu
     (TS-Code for the Menues:
     lib.mainmenu=HMENU …
     lib.submenu=HMENU...)
  2. + Breadcrum/Footmenu
     (TS-Code for the Footmenu (make printlink, link to barrierefree version, and sitelinks from the page “[Footmenu]”
     lib.footmenu=COA …
     lib.breadcrum=HMENU…  )
  3. + Plugin Settings
     (Because we use News extension. Here the TS Code for the Setup of the newsextension like Templates etc..)
     [If there are many extension, you can split the settings in more templates.]
  4. + Language
     (This template contain languagerelated typoscript code, like config.language= and all the Conditions regarding the languageswitch, also you can maintain some langnguage labes here)
  5. + PAGE
     (The important Configuration of the Layout:
     page=PAGE
     page.typeNum=0
     ….
           MAINMENU<temp.mainmenu
           CONTENT<style.content.get
           FOOTMENU<temp.footmenu
           BREADCRUM<temp.breadcrum
     …..)
  6.  + PRINTVERSION
     (Setup for the printversion:
     printversion=PAGE
     printversion.typeNum=99
     ….
     BREADCRUM<temp.breadcrum
     ….)
• For the Design in Site B we want a diffrent design, so we add a “extension template” to “Site B”. Only add TS-Code which is changed! If you need the different design twice, than store the TS-Code also in the sysfolder and include it! (Never write code twice!):

This results in a few suggestions for a TYPO3 Site:

• Only use one maintemplate in the sitetree!
• Split the TS Code in many Templates, store this Templates as “extension template” in an Sysfolder. Include these templates in the maintemplate therefor use the field “Include basis templates”.
• Use temporary TS-objects (like lib.mainmenu, lib.loginform…) for MENUS and other “objects”, which are needed in the page.
• Use clear comments in the Templates.
• For Menus like Footmenu or other “static menus” use a site from type  “not in menu” (so you can add or change menuitems later just by editing the subsites of this site)
• Subtemplates (extension templates in the sitetree) should only contain changed properties. If you need the same effect multiple times, store the TS-Code in a common TS-Template and include the definitions.. (Never use code double :-) )
• for example TS-Code see TS-R

Suggestion for Templateing:

I prefer not to use automaketemplates, because the time needed for templating is nearly the same. Instead I prefer to use the direct way with markers. It has  the advantage that non chached pages could be rendered faster and I have a better control over the output.

Suggestion for the fileadmin folders:

As you can see in the image, I prefer to structure and categorize all the files needed for a TYPO3 site and give them a self-explaining name. Also it could enhances maintainability to split CSS in more than one file.

Suggestions for TemplaVoila

• Most of the suggestions above are also relevant for templating with TV, regarding splitting of TS in Templates  etc... This are the differences:
  • in the PAGE template you give all the control to TemplaVoila instead of defining your site there.
  • PRINTVERSION is not neccessary because TemplaVoila has its own concepts for this.
  • Diffrent sitelayouts are handled with TS-TO -> this is a much more powerful and flexible way.
• As an addition you have an additional sysfolder "TV-Templates" with all your TV-TemplateObjects and TV-Datastructures, most of the fields in your Datastructure uses typoscript objects. (Its nearly the same as in the classic method... you have to define your lib.* TS-objects ...)
• Because also the FCE (flexible content elements) could require  some TS objects it is good to have an extra Template +FCE Fields with the definitions...
• always try to use few TS-Datastructures:
  • because mostly most of the fields are the same in diffrent TV-TemplateObjects
  • If you just don't need all defined fields in a TV-DS for a certain TV-TO you can just ignore this field in your mapping (dont map it) and so you still can use the same TV-DS
• I prefer to add my headerDatas (especially the CSS Files) in the TS page definition (+PAGE) so the step "selecting headerparts" is not needed after an update of the mappings.

coming next...

I plan to write more articles with this topic, especially:

• Concepts for the right column
• Multilanguage and TemplaVoila
• Extension Design Guide