Automaketemplate is dead, long live FLUIDTEMPLATE!

By Tomaž Zaman. Licensed under the Creative Commons License

Here comes another article by guest author Tomaž Zaman. He demonstrates the mapping of TypoScript with Fluid/HTML Templates using the FLUIDTEMPLATE cObject. He also delivers some easy to understand example code, which includes support for backend layouts (grids).

I'm sure at some point of your TYPO3 experience, you've wondered whether it would be better to use the Automaketemplate or Templavoila! for your template needs. I've used both of them and each has it's pros and cons, which I won't discuss in this post.
This post is about introducing the new, latest and greatest way of integrating your oh-so awesome templates in TYPO3! I'm sure you've heard of it by now: FLUIDTEMPLATE!

It uses the Fluid templating language (backport from FLOW3 framework, coming on October 20th) that comes as a system extension from TYPO3 4.3 on but it still seems many developers don't know- or use it. The second part of this approach are Backend layouts (grids) that are a part of TYPO3 core as well.

TypoScript FLUIDTEMPLATE cObject

Without further ado, here's the page object that utilizes FLUIDTEMPLATE:

page = PAGE
page{
   typeNum = 0   
   10 = FLUIDTEMPLATE
   10 {
      partialRootPath = fileadmin/templates/partials/
      layoutRootPath = fileadmin/templates/layouts/
      file.stdWrap.cObject = CASE
      file.stdWrap.cObject {
         key.data = levelfield:-1, backend_layout_next_level, slide
         key.override.field = backend_layout
         default = TEXT
         default.value = fileadmin/templates/home.html
         2 = TEXT
         2.value = fileadmin/templates/sub.html
      }     
      variables {         
         left < styles.content.get
         left.select.where = colPos=1        
         content < styles.content.get        
         right < styles.content.get
         right.select.where = colPos=2        
      }

   }
}

Notice the file selection is based on what the current BE grid is used, so you can define multiple layouts. Of course in order for this to work, you need to define a few backend grids and remember their UIDs because those are used as keys in the CASE cObject above.

Fluid/HTML Template

Next, let's look at the home.html which is used in this example:

<div id="wrap">
  <div id="menu">
    <f:cObject typoscriptObjectPath="lib.navigation" />
  </div>
  <div id="left">
    <f:format.html parseFuncTSPath="lib.parseFunc">{left}</f:format.html>
  </div>
  <div id="content">
    <f:format.html parseFuncTSPath="lib.parseFunc">{content}</f:format.html>
  </div>
  <div id="right">
    <f:format.html parseFuncTSPath="lib.parseFunc">{right}</f:format.html>
  </div>
</div>

As you can see, you can include other TS-defined objects inside your fluidtemplates as well!

This is pretty much all there is to it, the most interesting part of this, compared to TemplaVoila!, is that you can modify your HTML templates without the need to refresh (okay, apart from the 'clear cache' button that you are so used to click) or remap anything.
Also there is no additional tables, wizards or extensions, you use what you already get with the core. Enjoy!

About the author 

 Tomaž Zaman is a Slovenian freelancer with more than 7 years of experience with TYPO3. He has made numerous websites, from small 4-page portfolios, to educational, government and corporate websites and intranets for clients from all across Europe. Since 2011 he is a certified TYPO3 integrator.

OPTISS
@: tomaz@optiss.si
W: http://optiss.si
T: +386 30 651 645

--> Back to the list of articles