Fluid templates
Quick Introduction to Fluid
Like many other templating engines, Fluid reads template files, processes them and replaces certain variables and specific tags with dynamic content. The result is a fully working website with a clean and valid HTML output. Dynamic elements are automatically updated as required. Navigation menus are a typical example for this type of content. A menu exists on all pages across the entire website. Whenever pages are added, deleted or renamed, the menu items change.
Fluid takes modern templating a step further. By using ViewHelpers,
developers can implement complex functionality and therefore extend the
original functionality of Fluid to their heart's content. ViewHelpers are built
in the programming language PHP. Having said that, website integrators or
editors are not required to learn or understand these (this is the
responsibility of a software developer). Integrators only need to apply
them -- and this is as easy as adding an HTML tag such as <image.../>
to an
HTML file.
More than 80 ViewHelpers are shipped with the TYPO3 core already. They enable
integrators and web developers to use translations of variables, generate forms
and dynamic links, resize images, embed other HTML files and even implement
logical functions such as if ... then ... else ...
. An overview of the
available ViewHelpers and how to apply them can be found in the
Fluid ViewHelper reference.
Directory structure
Fluid requires a specific directory structure to store the template files. If
you are working through this tutorial now, this is a perfect time to create the
first set of folders of the site package extension. The initial directory can
be named site_
, which we assume is located on your local
machine. You can also choose a different name such as "site_example" or
"site_clientname", but this tutorial uses "site_package".
The aforementioned folders for Fluid are all located as sub-directories of a
folder called Resources/
. Therefore, create the directory structure as
listed below.
-
-
-
-
Language
-
-
Layouts
-
Pages
-
Partials
-
-
-
-
Css
-
Images
-
JavaScript
-
StaticTemplate
-
-
-
The Public/
directory branch is self-explanatory: it contains folders
such as Css/
, Images/
, Java
and
Static
. All files in these folders will be delivered to the
user (website visitors) as they are. These are static files which are not
modified by TYPO3 at all before they are sent to the user.
The Private/
directory with its two sub-folders Language/
and
Templates/
in contrast, requires some explanation.
Folders under 'Private/'
Templates/Layouts
HTML files, which build the overall layout of the website, are stored in the
Layouts/
folder. Typically this is only one construct for all
pages across the entire website. Pages can have different layouts of course,
but page layouts do not belong into the Layouts/
directory. They are
stored in the Templates/
directory (see below). In other words, the
Layouts/
directory should contain the global layout for the entire website
with elements which appear on all pages (e.g. the company logo, navigation
menu, footer area, etc.). This is the skeleton of your website.
Templates/Pages
The most important fact about HTML files in the Templates/
directory
has been described above already: this folder contains layouts, which are page-
specific. Due to the fact that a website usually consists of a number of pages
and some pages possibly show a different layout than others (e.g. number of
columns), the Templates/
directory may contain one or multiple HTML files.
Templates/Partials
The directory called Partials/
may contain small
snippets of HTML template files. "Partials" are similar to templates, but their
purpose is to represent small units, which are perfect to fulfil recurring
tasks. A good example of a partial is a specially styled box with content that
may appear on several pages. If this box would be part of a page layout, it
would be implemented in one or more HTML files inside the Templates/
directory. If an adjustment of the box is required at one point in the future,
this would mean that several template files need to be updated. However, if we
store the HTML code of the box as a small HTML snippet into the Partials/
directory, we can include this snippet at several places. An adjustment only
requires an update of the partial and therefore in one file only.
The use of partials is optional, whereas files in the Layouts/
and
Templates/
directories are mandatory for a typical sitepackage
extension.
The sitepackage extension described in this tutorial focuses on the implementation of pages, rather than specific content elements.
Language
The directory Language/
may contain .xlf
files that are used for
the localization of labels and text strings (frontend as well as backend) by
TYPO3. This topic is not strictly related to the Fluid template engine and is
documented in section
Internationalization and Localization.
Fluid in depth
ViewHelper reference
- Official reference
- Complete list of available ViewHelpers
- In depth information on ViewHelper
Introduction to Fluid
- Official reference
- Complete list of available ViewHelpers
- In depth information on ViewHelper