Now you have seen how TemplaVoila provides a point'n'click interface to templating the overall structure of a TYPO3 based website. And why not take this concept to other levels!
A natural extension is that a new kind of content element is born - a content element of the type “Flexible Content” - or “Flexible Content Element” (FCE).
This kind of element has an arbitrary amount of data fields using FlexForms and Data Structures. On top of it all it is rendered in the frontend using Template Objects.
For our example here there is a template file which contains a set of templates for such “Flexible Content Elements”; template_ce.html. It looks like this inside:
The idea is that a single file contains small templates for numerous Flexible Content Elements - this is to save space and present them in a “natural environment”.
First we will create a Flexible Content Element (FCE) with a Header, Text, Image and a link.
The first step is - like with the page template - to go to the File > Filelist module, click the template file, select “TemplaVoila” and then begin to build the Data Structure that fits our needs. We will do so here as well.
Hint: If you experience that old mapping information is shown to you in the module, then just press “Clear all” and it will be gone.
The ROOT element
When mapping the ROOT element you will have to choose differently than the <body> tag for once. Because in this case the container element is not the <body> tag but the <div> tag which has been wrapped around each FCE for convenience and order:
Child elements
Then you create the fields you need in the DS:
For each of these we have been a bit too lazy to supply good mapping instructions, rules and sample data. This is what happens... :-)
We have a few comments though:
Fieldnames: Notice the “Link Title” field - that has become a field name “field_94bd82” which is random. AVOID THIS! Rather delete such an entry and use carefully designed names. In particular, REUSE those fieldnames across your collections of FCEs since that enhances the internal compatibility.
Editing Types: For each fieldname we have selected an Editing Type. The Editing Types are presets which defines what default configuration the element will get in the DS. An example we already know was how to set editing type to “Content Element” or “TypoScript Object Path”. We want to comment on those we have set here:
Header: The Editing Type is “Header field” - this will be the same as plain input although it might allow for a typolink
Bodytext: The Editing Type is “Text area for bodytext”
Image: The Editing Type is “Image field”. Another option was “Image field, fixed W+H” but selecting “Image field” will allow us to insert an image and if TemplaVoila's logic can figure it out it will detect the current width of the image and use that as fixed width - that is nice!
Link title: Plain input.
Link URL: The Editing Type is “Link field” - this will make a little box with a link selector wizard which lets us select a link as usual. It will also preset the TypoScript needed to make the link.
After mapping is in place it looks like this:
Then click “Save” and press “Create TO and DS” button:
Adding a Flexible Content Element to a page
This is done by Web > Page of course by clicking the “New” icon. At some point this will lead you to a wizard! For now you will just get a plain element created straight away:
Now, edit this element, select the Type “Flexible Content”. This will ask you to save which you do. Now you can select a Data Structure. When that is done you save again and you will see this form:
Now, select the Template Object used for the Data Structure - as you did for page templates! - and fill in the form with content. You can preview immediately with “Save Document and View”:
Result:
Something we forgot
It turns out that we forgot to add possible header parts to the TO record. Lets do that:
This time we avoid the two first stylesheet definitions because they are just a part of the main template which happens to wrap these examples of elements; no need to select them again - even though it wouldn't make any difference since they are automatically detected as included if they are exactly the same.
Then, the last stylesheet is not included either - we happen to know that it contains styles which are only active for the last template.
Adding image parameters
Another problem is that the image tag of the image has not been preserved but re-generated by TYPO3. And in that process we lost a few attributes, in particular ' align="right" style="margin-left: 10px; margin-right: 5px;"'
These can be added again by editing the Data Structure - which will reveal something - to us very appealing - namely, TypoScript:
Here we just modify the code listing with a single line (the one highlighted above):
10.params = align="right" style="margin-left: 10px; margin-right: 5px;"
That does it and the image is now displayed correctly:
The link
Another note to this example is that the header and the image has automatically picked up the data from the link URL field as link source - this is just the default behavior, you can of course remove and customize it all - in the Data Structure of this FCE:
<T3DataStructure>
<ROOT>
<tx_templavoila>
<title>ROOT</title>
<description>Select the HTML element on the page which you want to be the overall container element for the template.</description>
</tx_templavoila>
<type>array</type>
<el>
<field_header>
<tx_templavoila>
<title>Header</title>
<sample_data>
<n0>This is a header...</n0>
</sample_data>
<eType>input_h</eType>
<TypoScript>
10 = TEXT
10.current = 1
10.typolink.parameter.field = field_linkurl
</TypoScript>
</tx_templavoila>
<TCEforms>
<config>
<type>input</type>
<size>48</size>
<eval>trim</eval>
</config>
<label>Header</label>
</TCEforms>
</field_header>
<field_bodytext>
<tx_templavoila>
<title>Bodytext</title>
<sample_data>
<n0>Body text Body text Body text Body text Body text Body text Body text Body text Body text Body text Body text Body text Body text Body text Body text Body text Body text Body text </n0>
</sample_data>
<eType>text</eType>
<proc>
<HSC>1</HSC>
</proc>
</tx_templavoila>
<TCEforms>
<config>
<type>text</type>
<cols>48</cols>
<rows>5</rows>
</config>
<label>Bodytext</label>
</TCEforms>
</field_bodytext>
<field_image>
<tx_templavoila>
<title>Image</title>
<sample_data>
<n0></n0>
</sample_data>
<eType>image</eType>
<TypoScript>
10 = IMAGE
10.file.import = uploads/tx_templavoila/
10.file.import.current = 1
10.file.import.listNum = 0
10.file.maxW = 200
10.params = align="right" style="margin-left: 10px; margin-right: 5px;"
10.stdWrap.typolink.parameter.field = field_linkurl
</TypoScript>
</tx_templavoila>
<TCEforms>
<config>
<type>group</type>
<internal_type>file</internal_type>
<allowed>gif,png,jpg,jpeg</allowed>
<max_size>1000</max_size>
<uploadfolder>uploads/tx_templavoila</uploadfolder>
<show_thumbs>1</show_thumbs>
<size>1</size>
<maxitems>1</maxitems>
<minitems>0</minitems>
</config>
<label>Image</label>
</TCEforms>
</field_image>
<field_94bd82>
<tx_templavoila>
<title>Link Title</title>
<sample_data>
<n0>My Link</n0>
</sample_data>
<eType>input</eType>
<tags>a</tags>
<proc>
<HSC>1</HSC>
</proc>
</tx_templavoila>
<TCEforms>
<config>
<type>input</type>
<size>48</size>
<eval>trim</eval>
</config>
<label>Link Title</label>
</TCEforms>
</field_94bd82>
<field_linkurl>
<type>attr</type>
<tx_templavoila>
<title>Link URL</title>
<sample_data>
<n0></n0>
</sample_data>
<eType>link</eType>
<TypoScript>
10 = TEXT
10.typolink.parameter.current = 1
10.typolink.returnLast = url
</TypoScript>
<proc>
<HSC>1</HSC>
</proc>
</tx_templavoila>
<TCEforms>
<config>
<type>input</type>
<size>15</size>
<max>256</max>
<checkbox></checkbox>
<eval>trim</eval>
<wizards>
<_PADDING>2</_PADDING>
<link>
<type>popup</type>
<title>Link</title>
<icon>link_popup.gif</icon>
<script>browse_links.php?mode=wizard</script>
<JSopenParams>height=300,width=500,status=0,menubar=0,scrollbars=1</JSopenParams>
</link>
</wizards>
</config>
<label>Link URL</label>
</TCEforms>
</field_linkurl>
</el>
</ROOT>
</T3DataStructure>
With TemplaVoila you might not even need to consider a two-column layout of a page for something you add on the page template level - you can just as well integrate it with a content element being the placeholder for two columns. This is the case in the next example:
The mapping process is the same as above, just remember to clear the old mapping first...:
For each field we chose “Content Element” for Editing type.
Then we save:
On the page from before we can now create a new FCE based on the DS “FCE - 2 Columns”:
Of course this will yield a form like this with two form fields ...
... which we will leave over to the Web > Page module to fill in:
(BUT remember to set the “Template Object” field!!!)
Of course we will move the current element into one of the columns as shown above (Click #1, then #2) and the result is:
NOTICE: Forgetting the Template?
One thing on the ToDo list is enhancement of the DS / TO selection. There are some ideas. For now, just be warned - it is very easy to forget to set the TO value after having set the DS value. If you forget it you just get a blank spot - which is rather confusing... will change soon...
You have done this before with the main page template - created an alternative TO. This basically works by creating just a TO and not a DS along. So instead of going to the File > Filelist module and starting TemplaVoila's mapping engine from there you should just go to the sysFolder, create a TO record, set the template filename and map it:
Then to and map the TO:
Don't forget to include the custom style section:
Then, press “Save”.
You might want to add icons for the TO and DS just like you did for the page templates.
Using the Alternative template
Now, edit the “2 Column” content element you have created:
Then you see that there are now two templates for the “FCE - 2 columns” data structure:
We have also added DS and TO icons here. The DS icons still convey the overall concept of the possibilities of the element while we have communicated the difference in the background color of the two templates for the TOs.
The next example is a little more advanced. The most trivial thing is basically the two images and the bodytext. But the header is a graphical header and below the two fixed images you see a list of links repeated, even with optional titles in between:
So we can express the data structure that is needed like this:
1 Header - graphical
1 Bodytext
2 Images
? number of a) Title text or b) text-link with image bullet
Mapping the DS and TO
In the File > Filelist module you select TemplaVoila for the template file “template_ce.html” and for the ROOT element you map to the <div> tag of the block:
Then you create the Header element:
Notice that the header DS element has two significant attributes:
Fieldname: It (re-)uses the field name “field_header” - thus striving for compliance with other Flexible Content Elements (so you can change type of Data Structure without loosing the current header information)
Editing Type: It uses “Header field, Graphical” - and it will try to read image information about the current graphical title for the template and use as much information from that as possible in order to provide some default GIFBUILDER configuration. More details later...
Mapping rules: Maps only to <img> tags.
Do the mapping and you should see:
Now, create the elements for bodytext and the two images (fieldnames could be “image1” and “image2”) by following the way you did with the cases in previous chapters:
Creating the repeatable data objects
For the list of links you have to think a few minutes about what is required to create this; We have two basic kinds; a Title element (#1) and a Link element (#2). We want to be able to create any number of these elements in any order:
In order to realize the involved complexity of templating look at this screenshot:
The two inner data objects: When we are going to do templating for the inner data objects (Title and Link elements) we will map templates from only one of the examples provided for each (#2 and #3 above) - the additional examples below play no role.
Structure of each inner data object: Obviously the Title element will have at least a “Title” field. Likewise the Link element will have at least a “Link title” and “Link URL” field - ergo, we have to define each data object as a collection of fields which go together - this is handled by the DS element type called “container”.
The container element: Finally, we have to remember that the dynamic content has to go into the overall container element of this section (#1). This means we have to create an element for this container element so such a substitution can occur. This is handled by the DS element type called “section” (array + section flag set).
Creating the “section” DS element:
In the mapping process we first create a “section” DS element:
Notice that such a “Section” element (SC) must be created by first creating a “Container” element (CO) and then re-editing and selecting the flag “Make this container a SECTION!”. See above.
Now, do the mapping by clicking the <div> tag which the designer has gently wrapped the link list in:
Select the “INNER” mapping mode. After doing that you will see the Link container section and a field to add DS elements on a new level in the structure!
Create the field “field_do_title” (“do” for “Data Object”). This time, make it a “Container for elements” (but do not re-edit and check the section flag of course).
And the same for “field_do_link”:
The result should be:
Now, for each of the two “data objects” - or “Containers for elements” - you create a Title field (for the “Title element”) and Link title / Link URL fields for the “Link element”. In the case of the Link URL field you should select the DS Element type “Attribute” (since you want to map it to the attribute of an <a>tag; <a href=””>). The result will be:
Mapping the hierarchical structure
Then you begin to map. For the “[CO] Title element” you map it into the <p> tag which apparently is the “container” tag for the text:
Notice: In this case you want to make an “OUTER” mode mapping - since you want to include the <p> tags in the Title element container:
Now, you do the same for the Link element, also clicking the <p> tag which contains the whole data object:
Do the same as for the Title element regarding mapping mode; make sure to select “OUTER” (which includes the <p> tag as a part of the section.
Finally, map the header, titles and links attributes (as you have done before):
For “Link header”, click the <p> tag:
For “Link title”, click the <a> tag:
For “Link URL” click the <a> (like above) and select the “ATTRIBUTE href”:
The mapping is complete and you should see this result:
Now, save the DS and TO you have build. Click the Save button and then enter a new name:
Creating a content element using the new DS / TO
Well, create a Flexible Content Elements with the Data Structure “Header/Text/2xImage/XxLinks” (you might have found a better name by now!):
After saving the element you will see this form:
We have filled in the form with dummy content as you can see. For the Header, Bodytext and the two image fields you see nothing new really - except the amazing fact that this totally improvised data structure is impossible without adding fields to the database but solely with a Data Structure definition saving the content into XML... :-)
But there are two things you should notice especially;
#1: Make sure to select the Template Object - as always!
#2: At the bottom of the form you will see a selector box representing our “Section” element - the overall container for the link section.
Creating multiple data objects in random order and amount
Open the “Link section container” selector. What you see is the two “data objects”; “Title element” and “Link element”:
For each time you add one of these elements you have to save the form. And unfortunately the handling of the order is not that flexible at the moment; you are currently working on beta version of FlexForms.
After creating some elements you will see this:
The interface is still a little confusing visually but we will soon improve it. Anyways, you can clearly see that we have created a link header and two links.
All you need now is to view the element in the frontend. Should look like this:
As you can see the links are there... :-)
This example is basically another example of hierarchical data structures. This is your second chance to practice and understand the principles from the former case with “repetitive data objects”.
In this case we will implement this design as a single content element:
We can express the data structure that is needed like this:
1 Header
1 Description
? number of “movie-element” consisting of
Title
Description
Link URL
Image (fixed dimensions)
Contrary to the former element where we had either a title or a link as data objects we have only one type here; the “movie-element”.
Let's begin the creating of the Data Structure (DS) / first Template Object (TO).
Creating the DS / TO
The ROOT element of the DS is mapped to the DIV tag which has been placed there for that purpose. The header and description fields are mapped to the <h1> and <em> tags respectively.
The DS looks like this now:
(Notice, the all have INNER mode which is the most typical when mapping content into HTML).
Next steps is to create a new Section element in the data structure. Remember the process; First create a “Container” type element, then edit the settings and check the “Section” flag. The Data Structure should look like this now:
Now, map the two elements. The Section element (field_list) must be mapped to the inside of the HTML element which should wrap around the repeated movie elements inside. When we click the Map button we see this:
Normally, mapping to the <table> tag would be a good choice (#1) since that wraps the table rows which are repeatable. However we would loose the header row then! Bummer! So instead you map the Section element to the second <tr> tag (#2 - first content row) and in the Action selector you select the last of the RANGE types:
This actually means that your mapping will span over several HTML elements on the same level effectively cutting out all the table rows except the header row! Cool, eh!
Next, you are going to map the movie element (field_movie_el) and again you will have to use the RANGE action for mapping since each movie element must contain two table rows; the spacer row above the element and the element row itself. That is no problem though, using the technique from before:
After clicking the first row, you select the range to be the next row:
The result of the mapping looks like this:
Finally, you create the four field types inside the movie element:
Editing Types used:
The Title element (field_title) was a “Plain input field”
The Description element (field_description) was a “Text area for bodytext“
The Link URL field (field_linkurl) was a “Link field” (and notice the DS element type is “Attribute”!)
The Icon Image field (field_image) was a “Image field, fixed WxH”
Each element should be mapped according to this (match the numbers with above list!):
Mapping #1 and #2 is the INNER type (content should go INTO the tag), mapping #3 is fixed to OUTER (no other options for an image tag) and mapping #4 is an attribute, should be the “href” of the <a> tag. Result looks like:
Except the fact that I have been too lazy to provide mapping instructions (important information for someone who is going to map a second TO) and sample data this looks good. Now click “Save”, give it a name and that's it.
Testing the new Content Element
Create a new content element of the “Flexible Content” type and select “Movie listing” as Data Structure. Then fill it in with content - and don't forget to select the template object as well!
In the frontend you will see something like this:
Fixing the stylesheet
One final thing - we forgot to include any special parts of the header for this element - apparently the styles does not match the ones in