Automaketemplate is dead, long live FLUIDTEMPLATE!
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
Comments
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.
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.
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.
My pleasure! :)
Nice post :). What abaut FCE-s like in TemplaVoila?
@Robert
Try extension gridelements or fed
Is it possible to start using FLUIDTEMPLATE on a site already started with Templavoila, can you mix the two?
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!
Thanks, that's what i am looking fore.
Thanks, that's what i am looking for.
Thanks,that's what I am looking for.
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?
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.