TYPO3 Content Elements based on Fluid

Extension key: fluid_styled_content
Package name: typo3/cms-fluid-styled-content
Version: 12.4
Language: en
Author: TYPO3 contributors
License: This document is published under the Open Content License.
Rendered: Tue, 08 Jul 2025 09:21:39 +0000

This extension provides Fluid templating for TYPO3 content elements.

Table of Contents:

Introduction

What does it do?

fluid_styled_content handles the rendering of TYPO3's default content elements and comes bundled as part of the Core. These content elements are rendered using the Fluid templating engine.

These content elements can be used as-is and can also be modified depending on your requirements. You are not bound to using only these content elements. It is possible to add new content elements to the existing set. This document details how to use, adapt, enhance and create new content elements.

Optionally fluid_styled_content offers basic CSS that takes care of positioning content according to fields chosen in the backend.

For example, if you create a content element of type Text with Images with a centered headline, a subheader, some text and an image with the position in text, right:

The output of the HTML is rendered by the Fluid template typo3/sysext/fluid_styled_content/Resources/Private/Templates/Textpic.html which in turn includes several partials.

See the following, shortened code example:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default" />
<f:section name="Header">
    <f:render partial="Header/All" arguments="{_all}" />
</f:section>
<f:section name="Main">

    <div class="ce-textpic ce-{gallery.position.horizontal} ce-{gallery.position.vertical}">
        <f:render partial="Media/Gallery" arguments="{_all}" />

        <f:if condition="{data.bodytext}">
            <div class="ce-bodytext">
                <f:format.html>{data.bodytext}</f:format.html>
            </div>
        </f:if>
    </div>

</f:section>
</html>

The HTML output then looks like this:

<div id="c1" class="frame frame-default frame-type-textpic frame-layout-0">
  <header>
    <h2 class="ce-headline-center">
      A centered headline
    </h2>
    <h3 class="ce-headline-center">
      A subheader
    </h3>
  </header>
  <div class="ce-textpic ce-right ce-intext">
    <div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
      <div class="ce-row">
        <div class="ce-column">
          <figure class="image">
          <img class="image-embed-item"
            src="/fileadmin/user_upload/TYPO3.png" width="280" height="280" loading="lazy" alt="">
          </figure>
        </div>
      </div>
    </div>
    <div class="ce-bodytext">
      <p>Lorem ipsum dolor sit...</p>
    </div>
  </div>
</div>

If the default CSS provided by this extension was also included, the output could look like the following in the browser:

A little bit of history

In early years, TYPO3's content elements were rendered by the Typoscript set called content (default). This was mainly based on font-tags for styling and tables for positioning which was needed to achieve the visual constructions in old versions of web browsers.

Some time later the extension css_styled_content was introduced, which focused on reducing the amount of TypoScript and providing XHTML/HTML5 markup which could be styled by Cascading Style Sheets (CSS), a style sheet language used for describing the look and formatting of a document written in a markup language. Still this extension was heavily based on TypoScript and did allow custom modifications up to some point.

Since the introduction of the Fluid templating engine, more websites are using this for page templating. Newer TYPO3 CMS packages (extensions) are also using Fluid as their base templating engine. The content elements which were provided with TYPO3 CMS by default were still using TypoScript and some PHP code.

Since TYPO3 7.5 the default content elements are provided by the extension fluid_styled_content and thus use Fluid as template engine. The main benefit being that hardly any knowledge of TypoScript is now needed to make changes. Integrators can easily exchange the base content element Fluid templates with their own. With Fluid, more complex functionality that exceed the simple output of values has to be implemented with ViewHelpers. Every ViewHelper has its own PHP class. Several basic ViewHelpers are provided by Fluid. When using your own Fluid templates, developers can add extra functionality with their own ViewHelpers.

Installation

This extension is part of the TYPO3 Core.

Table of contents

Installation with Composer

Check whether you are already using the extension with:

composer show | grep fluid-styled-content

This should either give you no result or something similar to:

typo3/cms-fluid-styled-content       v12.4.11

If it is not installed yet, use the composer require command to install the extension:

composer require typo3/cms-fluid-styled-content

The given version depends on the version of the TYPO3 Core you are using.

Installation without Composer

In an installation without Composer, the extension is already shipped but might not be activated yet. Activate it as follows:

In the backend, navigate to the Admin Tools > Extensions module.
Click the Activate icon for the Fluid Styled Content extension.

Extension manager showing Fluid Styled Content extension

Next step

Include the default TypoScript file.

First steps

Include the default TypoScript set

To use the default rendering definitions provided by fluid_styled_content, you have to add the extension's TypoScript set to your root TypoScript record.

When you are using a site package you can add the following lines to your site packages constants.typoscript and setup.typoscript:

my_sitepackage/Configuration/TypoScript/constants.typoscript

# Import the default constants of EXT:fluid_styled_content
@import 'EXT:fluid_styled_content/Configuration/TypoScript/constants.typoscript'

my_sitepackage/Configuration/TypoScript/setup.typoscript

# Import the default setup of EXT:fluid_styled_content
@import 'EXT:fluid_styled_content/Configuration/TypoScript/setup.typoscript'

# Import the default CSS of EXT:fluid_styled_content
@import 'EXT:fluid_styled_content/Configuration/TypoScript/Styling/setup.typoscript'

This is the recommended way as the import of TypoScript can be kept under version control this way.

Alternative: Include the TypoScript set in the root TypoScript record

It is also still possible to include the TypoScript set directly into a TypoScript record. However there are draw backs: The import is then stored in the database and not the file system and cannot be kept under version control.

Go to the module Web > TypoScript.
In the page tree, select the page which contains the root TypoScript record of your website.
Select Edit TypoScript Record in the dropdown at the top of the Web > TypoScript module.
Click the Edit the whole TypoScript record. This will open all the settings of the root TypoScript record:

Include the Fluid Content Elements TypoScript file

Go to the tab Includes and select Fluid Content Elements in the Available items under Include TypoScript sets. The selection will move to the Selected items.

TYPO3 is now using the rendering definitions of fluid_styled_content for the default set of content elements. This is essentially unstyled HTML5 markup.

You can additionally select Fluid Content Elements CSS (optional). This TypoScript set adds some CSS styling to make sure all the parts of a content elements have some styling, this will include alignment and positioning. This set of styles will not add any colors, make any changes to typography or anything else related to your website's visual style. This TypoScript set is optional, as it is common for integrators to override the basic styling.

Save the TypoScript record by using the save button at the top of the module.

Next step

Display the content elements in your site package template.

Inserting content in your page template

To get the different columns from the backend displayed in the frontend you can use predefined CONTENT objects or the DatabaseQueryProcessor.

It is advised to make all your changes in a custom extension, visit the site package documentation to find out more.

Based on the FLUIDTEMPLATE content object (cObj)

lib.dynamicContent = COA
lib.dynamicContent {
   10 = LOAD_REGISTER
   10.colPos.cObject = TEXT
   10.colPos.cObject {
      field = colPos
      ifEmpty.cObject = TEXT
      ifEmpty.cObject {
         value.current = 1
         ifEmpty = 0
      }
   }
   20 = CONTENT
   20 {
      table = tt_content
      select {
         orderBy = sorting
         where = {#colPos}={register:colPos}
         where.insertData = 1
      }
   }
   90 = RESTORE_REGISTER
}

page = PAGE
page {
   10 = FLUIDTEMPLATE
   10 {
      templateName = Default
      templateRootPaths {
         0 = EXT:example_package/Resources/Private/Templates/Page/
      }
      partialRootPaths {
         0 = EXT:example_package/Resources/Private/Partials/Page/
      }
      layoutRootPaths {
         0 = EXT:example_package/Resources/Private/Layouts/Page/
      }
   }
}

<f:layout name="Default" />
<f:section name="Main">
   <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '0'}" />
</f:section>

Next step

You can start adding content elements or make further configurations.

Configuration

Configuring content elements can be done for the frontend and the backend.

The easiest way to change the appearance of content elements in the frontend is by using the Constant Editor*`. These settings are global, which means they are not configurable in a single content element. Constants are predefined.

TYPO3 uses TypoScript as a configuration language and is used by the frontend rendering. By overriding TypoScript you can modify the rendering for most of the frontend.

For the backend, fields can be shown or hidden, depending on the fields you are using or the fields an editor is allowed to use. Configuration like this is done using Page TSconfig or User TSconfig.

Constant Editor

The Constant Editor can be found in the Site Management > TypoScript module.
Select the page in the page tree which contains the root Typoscript record of your website.
Select Constant Editor in the dropdown at the top of the Site Management > TypoScript module.
In the dropdown list select the category CONTENT.
This will give you a list with all the constants of this extension. All constants are described and can be edited by clicking the pencil in front of the current value or by editing the available field.
Do not forget to save the new values. The new values will be stored in the "Constants" field of the root template of your website.

Note

If you use the Constant Editor the configuration gets written to the database and cannot be kept under version control. You can cut all values from the constants field of the root TypoScript record and move them to a file in your site package extension. This way you can keep the values under version control.

TypoScript

At the section Include the default TypoScript set you've already added the TypoScript sets. TypoScript sets are a collection of TypoScript files. These files are located in the directory EXT:fluid_styled_content/Configuration/TypoScript/.

In this folder there are two files:

constants.typoscript - The file with the default constants. The Constant Editor, as described above, is using this file for its default settings.
setup.typoscript - This file will first include some other files which are located in the Setup/ folder in the same directory. More about these files later.

In the folder ContentElement/ there are files which are included by the file setup.typoscript as mentioned above. These files contain the rendering definitions of all content elements that are provided by the TYPO3 Core. These are:

Bullets.typoscript - Configuration for content element "Bullet List"
Div.typoscript - Configuration for content element "Divider"
Header.typoscript - Configuration for content element "Header Only"
Html.typoscript - Configuration for content element "Plain HTML"
Image.typoscript - Configuration for content element "Image"
List.typoscript - Configuration for content element "General Plugin"
MenuAbstract.typoscript - Configuration for content element "Menu of subpages of selected pages including abstracts"
MenuCategorizedContent.typoscript - Configuration for content element "Content elements for selected categories"
MenuCategorizedPages.typoscript - Configuration for content element "Pages for selected categories"
MenuPages.typoscript - Configuration for content element "Menu of selected pages"
MenuRecentlyUpdated.typoscript - Configuration for content element "Recently updated pages"
MenuRelatedPages.typoscript - Configuration for content element "Related pages (based on keywords)"
MenuSection.typoscript - Configuration for content element "Section index (page content marked for section menus)"
MenuSectionPages.typoscript - Configuration for content element "Menu of subpages of selected pages including sections"
MenuSitemap.typoscript - Configuration for content element "Sitemap"
MenuSitemapPages.typoscript - Configuration for content element "Sitemaps of selected pages"
MenuSubpages.typoscript - Configuration for content element "Menu of subpages of selected pages"
Shortcut.typoscript - Configuration for content element "Insert records"
Table.typoscript - Configuration for content element "Table"
Text.typoscript - Configuration for content element "Regular Text Element"
Textmedia.typoscript - Configuration for content element "Text and Media"
Textpic.typoscript - Configuration for content element "Text and Images"
Uploads.typoscript - Configuration for content element "File Links"

Since we move away from TypoScript as much as possible, these rendering definitions only declare the following:

Can FLUIDTEMPLATE be used immediately or do we need data processing first?

A processor is sometimes used to do some data manipulation before all the data is sent to the Fluid template.
Assigning the Fluid template file for each type of content element separately.

In the folder Helper/ there are files which are included by the file setup.typoscript as mentioned above. These are:

ContentElement.typoscript - Default configuration for content elements using FLUIDTEMPLATE
ParseFunc.typoscript - Creates persistent ParseFunc setup for non-HTML content

Overriding the Fluid templates

At TypoScript we have described the way content elements are rendered.

By default these settings are done in the setup.typoscript file which can be found in the EXT:fluid_styled_content/Configuration/TypoScript/ folder.

Using lib.contentElement

This option gives you the ability to add another templateRootPath and can be defined the same as partialRootPaths and layoutRootPaths:

lib.contentElement {
   templateRootPaths {
      200 = EXT:your_extension_key/Resources/Private/Templates/
   }
   partialRootPaths {
      200 = EXT:your_extension_key/Resources/Private/Partials/
   }
   layoutRootPaths {
      200 = EXT:your_extension_key/Resources/Private/Layouts/
   }
}

A content element is using a templateName, which is defined in setup.typoscript. You can override this value, but the template from the extension fluid_styled_content will not be loaded as its name is still the default value.

tt_content {
   bullets {
      templateName = ChangedName
   }
}

The content elements

This chapter describes the default set of content elements provided by TYPO3's Core. It will show you a description and screenshots of the backend fields.

General fields

These are fields which are used by (almost) every content element.

Header

Almost every content element can contain a header, which consists of the following parts:

Header: The text of the header
Type: The type of heading (heading 1, heading 2, heading 3 ... or if the header is hidden). When not choosing an option, the default heading will be used, which can be configured at Constant Editor.
Date: Have the possibility to group the header with a date
Link: Link wrapping the header text. This can be a TYPO3 CMS page, an external page, an email address or a link to a file.

The header fields can be found in the General tab of a content element.

The content element "Header" in the backend

Show in Section Menus

Using this option will only be visible when using menu's based on sections. This will be described in the chapter Menus.

This field can be found in the Appearance tab.

A Section Menu, which is in turn a content element itself produces an output including the headlines of all content elements with the flag Show in Section Menus set.

Append with Link to Top of Page

When checked, this will render a link below the content element to bring the visitor the top of the page. This will be very convenient for your visitors when having long pages.

Access

These fields define if and when a visitor has access to this content element. The access fields all reside in the Access tab:

Visibility of content element: By checking this option the content element will not be visible to any visitor.
Publish Date: The date on which the content has to be published, which means making visible at a certain date.
Expiration Date: The date on which the content will be expired, which means the content will be hidden on a certain date
Usergroup Access Rights: Here you can select whether the content element only is available to a certain frontend user group, if it has to be visible only when the visitor is logged in or if it has to be hidden at a login.

Header

The content element "Header" will render a header, which can be linked. There is the possibility to add a subheader and a date. The fields used for this content elements are the same as Header, but with a field for the subheader.

Text & Images

This content element allows you to combine text and images. Additionally there is also a content element for Text & Media where you can use videos or Audio. There are also separate content elements for Text or Images individually. These offer no advantage over the content element Text & Images except that some fields are missing and the backend form is less cluttered.

The text can be entered in the rich text editor of the General tab.

The content element rich text editor in the content element Text

The media elements can be added in the Images tab. In this tab there is also the option to turn the enlarge on click behaviour on for images.

TextImages in the content element Text & Images

Multiple images and movies are combined as a gallery, which can be configured using the Gallery Settings. In some installations there are specific settings for width or height for each element, if a border should be shown around each element, the position of the gallery in relation to the text and the amount of columns which should be used for the gallery.

The maximum width of the gallery can be different when the gallery is on top or bottom of the text, or inside the text. This can be set using the Constant Editor.

Bullet list

With this content element you can provide unordered and ordered bullet lists, but also a definition list, in the frontend.

The most important fields of the content element

The type of list can be defined with the field Type of bullets.

The content is added in the field Bullet List, where each new line is a new bullet.

Bullet 1
Bullet 2
Bullet 3

For definition lists you use one line for a single definition which starts with the term, followed by the description, separated by a vertical bar "|".

Term 1|Description 1
Term 2|Description 2
Term 3|Description 3

Table

The Table content element can be used to display tabular data.

Hint

In the database the data is saved as comma separated values (CSV), a plain text format for storing table data (numbers and text). This format can be used to import data from external sources.

The content element Table in the backend

By default the Field delimiter is a vertical bar "|", the Text enclosure set to none.

A Table caption can be provided as a heading for the table.

The content element Table in the backend, tab Appearance

Also some appearance options are available for the table. These can be found in the Appearance tab:

Columns: The maximum amount of columns. Even when more columns are defined in the Table content field, the table will only show the maximum amount of columns.
Table class: Some predefined classes to style the table output.
Table header position: The first row or the first column can be used as a table header.
Use table footer: The last row will be used to group the table's footer area (which may be a summary, an addition of column values, or some call to action based on the preceding content).

File links

This content element gives you the opportunity to offer downloadable files to the visitors of your website.

The content element Uploads in the backend

You can add or select single files but also use a file collection. A file collection can be one of the following:

A static selection of files
A folder within a storage, holding the files
A file selection by category

When combining both methods, single files and file collections, all files from these methods will be presented to the website visitor.

At the bottom of the tab General you will find several options how the files will be presented:

Display file/icon/thumbnail: In this dropdown you can select if you only want to show the file name, the file name and a corresponding icon, based on the file extension, or the file name with a thumbnail, if it is possible for TYPO3 CMS to generate a thumbnail from the file.
Display file size information: Will show the file size calculated from the amount of bytes and presented as a human readable string with the proper unit (B, KB, MB ...).
Display description: Will display the description of each file, if available.

Menus

In websites, menus are often created outside the content element scope, because they have to reappear within every page. These could be the main menu, a sub menu, a bread crumb or a language menu. However, there are situations where you would like to create a menu specifically on one page. The following content elements will give you some options to render a menu. These available content elements are:

Menu of selected pages: The menu consists of links to the selected pages in the TYPO3 CMS backend.
Menu of subpages of selected pages: The menu consists of links to the subpages of the selected pages in the TYPO3 CMS backend.
Menu of subpages of selected pages including abstracts: The same as above, but showing the abstract of these pages as well, when not empty.
Menu of subpages of selected pages including sections: This will render a menu of the subpages of the selected pages. Below each subpage an extra menu will be showing the titles of content elements which belong to that certain subpage, which have the option "Show in Section Menus" in the Appearance tab enabled. This makes it possible for the website visitor to jump to the selected content element, within that page, immediately.
Sitemap: Render a full sitemap of the website, starting at the root page.
Sitemaps of selected pages: Render one or more sitemaps at once. The starting point of each site map will be a single selected page.
Section index (page content marked for section menus): Menu of content elements within the selected page, which have the option "Show in Section Menus" in the Appearance tab enabled. This makes it possible for the website visitor to jump to the selected content element, within that page, immediately.
Recently updated pages: Shows a list of pages which are updated in the last 7 days. Updated only means a change in the page properties, not the content on the page.
Related pages (based on keywords): Shows a list of the selected page and all other pages, which have one or more keywords, entered in the page properties, in common.
Pages for selected categories: Displays a menu of all pages which have been assigned one or more of the selected categories.
Content elements for selected categories: Displays a menu of all content elements which have been assigned one or more of the selected categories.

The availability of links in each type of menu will depend on access rights. If a website visitor has no access to a certain part (with a frontend login), the link will not be shown.

In case no pages are selected, the menu will be rendered from the current page where the menu is put on.

Styling of the current page in a menu

New in version 12.0

All menu content elements related to page navigation reflect the "current" state of a page now.

If the current page is displayed within a menu the aria attribute aria-current="page" is added to the a-tag of a menu-item.

For styling with CSS the attribute of the link can be used:

EXT:site_package/Public/Css/menu.css

[aria-current="page"] {
   /* Special style for the current page link */
}
[aria-current="page"]:hover {
   /* Special style for the current page link when hovered */
}
[aria-current="page"]::before {
   /* Special virtual element for additions like chevrons, etc. */
}

The default styling of contains no style for the current page.

Insert Records

Ever have content on one page that you want to reference on another page? But you don't want to have to maintain both and keep them both in sync? And you don't want to show the whole content from one page on another. Using insert records you can add one content element from a page or all the content elements from a page. You can also add content elements from several pages.

Just select the content elements you want to display and if necessary, put them in the right order.

In the frontend the referenced content elements will show up the same as the original one (if the styling is not different for that page)

Note

This is the only content element still using a small amount of TypoScript in the rendering process. This is done because you can add different rendering for records from different tables. Take a look at tt_content.shortcut.20.

Insert plugin

Extensions often provide plugins to render frontend output. They are essentially the same as content elements. When an extension depends on a plugin, select the plugin in this content element. The fields might change depending on the plugin.

For example, the system extension indexed_search provides the Indexed Search plugin which does not offer any additional fields:

Divider

Nothing more than a horizontal rule.

HTML

Insert HTML directly using this content element.

Adding Your Own Content Elements

Attention

This page has been merged into TYPO3 Explained since Core version 8.7.

TYPO3 Content Elements based on Fluid

Introduction

What does it do?

A little bit of history

Installation

Installation with Composer

Installation without Composer

Next step

First steps

Include the default TypoScript set

Alternative: Include the TypoScript set in the root TypoScript record

Next step

Inserting content in your page template

Based on the FLUIDTEMPLATE content object (cObj)

Next step

Configuration

Constant Editor

TypoScript

Overriding the Fluid templates

Using lib.contentElement

The content elements

General fields

Header

Show in Section Menus

Append with Link to Top of Page

Access

Header

Text & Images

Bullet list

Table

File links

Menus

Styling of the current page in a menu

Insert Records

Insert plugin

Divider

HTML

Adding Your Own Content Elements

Sitemap