TYPO3Buddy
TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter
menu

Templavoila: Flexible content elements (FCE)

Flexible content is content with a layout formatted by a template. Consider the following example. You want the content to be presented in two equally wide columns. Of course, you can do that with a regular content element and put an HTML table in it. However, you want to reuse this setup and you want total control on how it's styled, wherever it's used.

To create a flexible content element (FCE), you also need an HTML template. In our example the HTML template for the flexible content element is integrated in the "content_main" part of our main HTML template. So have a look at the HTML template and search for the "content_2column_container" div. Eventually, it will look like this:

Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non nibh at nulla porta semper at ut lacus. Nunc venenatis eu elit nec laoreet. Vivamus scelerisque porta ante sed vehicula. Integer posuere lacus non augue mollis cursus. Morbi sed sodales nisl. Maecenas tellus leo, vulputate ac libero at, rutrum ullamcorper sapien. Curabitur laoreet enim eget sagittis bibendum. Sed imperdiet dapibus euismod.

Right

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non nibh at nulla porta semper at ut lacus. Nunc venenatis eu elit nec laoreet. Vivamus scelerisque porta ante sed vehicula. Integer posuere lacus non augue mollis cursus. Morbi sed sodales nisl. Maecenas tellus leo, vulputate ac libero at, rutrum ullamcorper sapien. Curabitur laoreet enim eget sagittis bibendum. Sed imperdiet dapibus euismod.

When you have a look at the HTML source of this page, you will notice that the content above is in a table. That's because this website is based on Fluid templating and Fluid does not support flexible content elements the way it's setup with Templavoila.

So we'll start creating a template, the same way as we did for the website. Click on Filelist, click on the templates folder, right click on the file icon of the HTML template and choose Templavoila:

Start Templavoila through filelist - TYPO3 website tutorial

It is possible that the next screen shows the data elements of the main template. Click on "Clear all" to clear all data elements. Make sure you're not editing the main template! To see if you're creating a new template object and data structure, check if there's "[NEW]" next to "Template Object" and "Data Structure Record".

Next, you'll create 2 data elements: Column left (field_content_column_left) and Column right (field_content_column_right). The latter is shown in the image below. Both will have "Page-Content Elements [Pos.: 0]" as Element Preset.

TYPO3 Templavoila add data elements - TYPO3 template tutorial

Click on Add or Update and Cancel/Close.

Next we'll map the root element.

TYPO3 Templavoila map data elements - TYPO3Buddy website tutorial

Change the mode to HTML source. Scroll down to the "content_main" div. Look for the "content_2column_container" div and click on the corresponding icon.

TYPO3 Templavoila Mode HTML Source - TYPO3 website tutorial

Set the HTML path to "OUTER" and click on "Set". This element is set to OUTER because it has no parent container that includes this div tag. Templavoila needs to include it.

TYPO3 Templavoila map set outer - TYPO3 website tutorial

Map buttons will appear for the column left and column right data elements. Click'em.

TYPO3 Templavoila map data elements - TYPO3 website tutorial

Map the data elements to their corresponding divs (content_column_left and content_column_right):

TYPO3 Templavoila map data elements - TYPO3Buddy website tutorial

Set the HTML path of both elements to "INNER" and click the "Set" button.

TYPO3 Templavoila Map Set inner - TYPO3 website tutorial

With all elements mapped, click the "Save as" button.

TYPO3 Templavoila save data structure - TYPO3 website tutorial

Enter a title of the template, which will be "2 Column template". The template type will be "Content Element". Click on "Create DS/TO" to create and save the template:

TYPO3 Templavoila create DS/TO - TYPO3 website tutorial

We're ready to add some flexible content to a page! Next step >

The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!