T3MP Session Nine: Fluid Template Engine

Intro

There is a principle in programming called DRY(Don't Repeat Yourself). Templating Engines incorporate this concept.

There are numerous templating engines out there. TYPO3 employs Fluid to streamline the task of making sites.

---

Session 09

In this section, we looked at how TYPO3 avoids having to repeat things and the engine it uses to help with layouts and conditional rendering of different page elements.

Imagine if you had a 15 page site with a navigation menu that needed to be on each page. That would mean copying that navigation 15 times. Now, imagine if one thing about that menu changed...

Fluid Templates

Fluid Templates are just that, templates that help in the laying out and abstraction of certain things in regards to how your site will end up looking like.

Like other templating engines, Fluid reads template files, processes them and replaces certain values with dynamic content. Resulting in a functional website with valid HTML.

The Fluid Template Engine is powering modern TYPO3 sites, as a quick way to customize HTML-based output for any PHP-based project.

When you work with the Fluid Template Engine, you will be working in the Private folder of your site package

site_package
└── Resources
    ├── Private
    │   ├── Languages
    │   ├── Layouts
    │   │   └── Page
    │   ├── Partials
    │   │   └── Page
    │   └── Templates
    │       └── Page
    │           └── Default.html
    └── Public
        ├── Css
        │   └── website.css
        ├── Images
        │   └── logo.png
        └── JavaScript
            └── website.js

Syntax

The syntax of fluid templates is easy enough to understand. It is prefixed with an f and whatever condition is supposed to be met for a template to render:

<f:layout name="Default" />
<f:section name="Main">
    <f:render partial="Navigation/MainNavigation.html" arguments="{_all}"/>

    <main role="main">
        <f:render partial="Jumbotron" />
        <div class="container">
            <div class="row">
                <div class="col-12 col-md-6">
                    <h2>Main Content</h2>
                    <p> ... </p>
                </div>
                <div class="col-12 col-md-4">
                    <h2>Sidebar Content</h2>
                    <p> ... </p>
                </div>
            </div>
        </div>
    </main>
</f:section>

Layouts

These are files that make up the overall structure of the website; like navigations, footers. They are stored in the Layouts/ folder. Whilst pages can have different layouts - those layouts do not belong in the layout folder. They would be stored in the Templates/ folder.

The Layouts/ folder holds files with elements that appear across the site. Things that should appear on every page.

Partials

These are small snippets that are similar to templates. They are however used to represent small units intended to accomplish recurring tasks.
For example, if a piece of content is meant to appear under specific conditions - a logged-in user.

Use of partials is optional, whereas files in the Layouts/ and Templates/ directories are mandatory for a typical sitepackage extension.

ViewHelpers

The power of Fluid is the usage of ViewHelpers. There are many of them, for all kinds of tasks. They allow a varied array of elements to be rendered based on certain conditions.

Much like in other programming language, you also have the capability to run conditionals and loops in your fluid template as part of your ViewHelper:

A conditional

<f:if condition="{variableOne}">
    <f:then>Do this</f:then>
    <f:else if="{variableTwo}">
        Do this instead if variable two evals true
    <f:else>
        Or do this if nothing above is true
    </f:else>
</f:if>

A loop:

<f:for each="{items}" as="item" key="itemkey"
       reverse="false" iteration="iterator">
   ...
</f:for>

Debugging

Sometimes you will have instances where have to test if something is working as intended. You would do that by using f:debug within the fluid template.

<f:debug title="Results of customers query">{customers}</f:debug>

---

Homework

There wasn't any homework this time as it was more of a showcase of how the engine works.

Thoughts

While I fully don't get the Fluid Templating Engine, I understand how it can simplify the task of creating really complex sites.

---

Thank you for reading, let's connect!

Thank you for visiting this little corner of mine. Let's connect on Twitter and LinkedIn