stmllr.net

Automaketemplate is dead, long live FLUIDTEMPLATE!

by on stmllr.net

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

Tags

Comments

  1. vbhjckfd

    I have to say - nice work. There is one more not reimplemented by typo3-core feature left in templavoila - i'm talking about FCE's: custom content elements are very useful feature.

  2. Steffen

    Yes, vbhjckfd, you are right and drag&drop in the page module is also missing.

    But there are good news! Joey is just about to fill this gap. Have a look at Grid Elements extension in TER: http://typo3.org/extensions/repository/view/gridelements/current/

    I think chances are good to get this one pushed to TYPO3 core.

  3. Michael Cannon

    Thanks Tomaž for sharing this information. I only recently learned about FLUIDTEMPLATE and am looking forward to their use in upcoming projects. Your tidbits help me out further.

  4. Tomaž

    My pleasure! :)

  5. Robert

    Nice post :). What abaut FCE-s like in TemplaVoila?

  6. Steffen

    @Robert
    Try extension gridelements or fed

  7. Nick

    Is it possible to start using FLUIDTEMPLATE on a site already started with Templavoila, can you mix the two?

  8. Nick

    Figured it out in the end!
    Had to Enable the classic Page module in Templavoila configuration, in Extension Manager.
    Then clear cache etc.

    In "classic Page" you are then able to select backend_layouts in page properties!

  9. mihir bhatt

    Thanks, that's what i am looking fore.

  10. mihir bhatt

    Thanks, that's what i am looking for.

  11. Sandeep Ranjan

    Thanks,that's what I am looking for.

  12. terrorfrog

    Actually im very dissapointed about fluid.
    Not thats bad but its just a little rework not a desperate needed revolution.

    actually (i know no typo3guy likes to hear that) but the templatemanagement is horrible in typo3 and could have been done way better

    it would be also time that everything - html templates and css code - is storeable in the database and generated as static documents - with a little ligoc behind only needed css classes could be used for a certain page

    jsut an example

    also this would make it possible to store basic layout to further use in 4rd party modules like ttnews (ok thats not really 3rd party)

    i dont get why i always have to define the same box again and again for every module.

    there are other ways - even online editing css classes - some shopsystems for exmaple have this for a long long time

    why do we need todo the work all over again mixed in the backend and textfiles - reloading the same page over and over again


    dont get me wrong im not talking about click and pray for newbies - also not about killing typoscript

    but

    manythings should be able todo by GUI (which should be reworked either), and database

    so yea typo3 is my favourit because of its flexibility but its also a PIA because of unnessesary working steps and cruel backend

    really look at joomla - its a crappy cms - but big success because of its easy to use backend

    why cant we have such a backend for regular users while the nasty one is for us developers?

  13. Michiel Roos

    Take care to use f:format.raw to output TypoScript defined or rendered objects. This ensures that elements like the HTML content element are left alone and are not parsed with the default parseFunc.
    I had trouble getting a canvas element to render properly when using f:format.html. Using f:format.raw solved the issue.

Add a comment

Comments are moderated and need to approved. Please be patient.