from TemplaVoila! to Fluidtemplates

TYPO3 – easy change from TemplaVoila! to Fluidtemplates

A small step for a coder – a big step for the upgrading possibilities of your website!

TemplaVoila! is outdated long time ago, but still around in some TYPO3 installations. A shift to Fluidtemplates, in combination with Backend-Layouts, seems to be a big hassle, but is indeed not so complicated since the principles are pretty much the same. In both cases we map a content form a backend column into a certain area of a predefined html-template.

How to do it

a. first step

First we must find out which elements in our main template are mapped with TemplaVoila!, therefor we need the extension (including Static-Info-Tables) still in action, before we disable it. Important is, whether it is an „inner“ or an „outer“ mapping. With „inner“ we just replace the inside of the html element with a viewhelper and a variable. If it is an „outer“ mapping, we have to replace the the whole html-element as such with the viewhelper. Example of an „inner“ mapping:
<div id="myMapID"><f:format.raw>{variableLaterInTypoScript}</f:format.raw></div>


templa voila to fuid templates
the path to the mapping – click on (in may case) „ik_TemplaVoila“


templa voila to fluid
„Modify DS /TO“
mouse over element mapping
the mapping – mouse over the html-elements shows their ID-number


templa voila to fluid mouse over
mouse over shows the ID of the element („#headline“)

Next you write down a list of the names of the columns („pageHeaderHeadline, banner …“) and the corresponding element names and Ids. The columns names you then use to create a backend layout with the same name, numbering from „0“ left to the accordant last number on the right. Check your old columns, because not all of the mapped IDs are coming from a column in the backend, some are replaced by „lib“ or „temp“ TypoScript variables. So just create the same column structure as it was with TemplaVoila! After assigning the backend layout to the root page, the first step is done.


b. second step – changes on the main page template

As said before, some of the „markers“ (viewhelpers) are getting their information from a TypoScript variable, like the Menu e.g.

main template fluid
main template fluid

The others are coming from the backend columns.

Now you take your list and replace the html elements on your list, with an viewhelper („<f:format.raw>{yourVariable}</f:format.raw>“). If it is a „inner mapping“ put the viewhelper inside the element.

We also have to delete everything above and including the html body tag. Don’t forget the closing tags at the end!

You have to do these steps very careful, because getting into a wrong element will mess up the whole thing. Work on a copy of the template file!.


c. third step – TypoScript in the root of the website

10 {
     template = FILE
     file = fileadmin/zazu/default/templates/zazu_template.html
     partialRootPath = fileadmin/zazu/default/templates/Partials
     layoutRootPath = fileadmin/zazu/default/templates/Layouts
        variables {
           h1TopSlogan < styles.content.get
  = colPos=0
           rubrikH < styles.content.get
  = colPos=1
           unterNav < lib.field_unternav
           hauptNav < lib.field_hauptnav
           footerNav < lib.field_footernav

The TemplaVoila! TypoScript can be deleted:


10 = USER
10.userFunc = tx_templavoila_pi1>main_page


d. fourth step – move the content

This is easy to do if you work on a copy (or „Staging“ as it called by the provider Mittwald). After you deactivate the „static-info-tables“ and the „templaVoila!“ Extension, all content will be in the „main column“ now you have to move the content elements into their old order. It is no problem if you can switch between an old implementation and the new one to check what was where. Otherwise you have to find the order by yourself or memory. Anyway with such a step you should always work on a copy!


There are probably some extensions doing similar work in a automated process. But who wants to deal with a complicated extension for a small website. In case it is a bigger site of course one should consider to go into something more automated.

Comments and additions are welcome!


Autor: Thomas Hezel

News-Latest with the TYPO3 Extension „news“ respectively „tx_news“

Who has used the TYPO3 extension tt_news in the last decade, certainly has built some pages with a news-latest preview. After upgrading to TYPO3 8.6 and the new fluid-based extension „news“ it is getting more difficult to realize this feature, since there is no comprehensive instruction in the online manual.The German speaking reader will find a verbal exchange (including scolding) in the TYPO3-forum, that even the developer of the extension couldn’t settle or calm down and the outcome was not a proper manual. Link:  tx_news: Latest Ansicht- Wie? The argument of the developer is, that there is no sense in having „news-latest“, since it is the same like „news-list“ with less items. But the tricky point is, how to implement a new template that will reduce the listed items to the demands of a preview.Since I usually have my news-preview („news-latest“) in the footer of the webpage, the next question was, how to display news with TypoScript and without the news-plugin-module. And then how to choose a different template for this implementation.My examples are in TYPO3 8.6 and with news version 5.3.2:

a. Structure of the Templates

We have 3 levels: Layouts, Templates and Partials.
Inside the templates  is the function, that renders the partials – the final „news-elements“.

The folder structure from the extension is as follows:


The Partial „Item.html“ consist of: date, headline, teaser, text … basically the news-message or news-element.
The Template „List.html“ is including/referring the partials (our news) and renders them.

So what we need to do is to built a new partial-html-file out of  „Item.html“, that we call „ItemLatest.html“, and where we put our DIVs and classes. And second, inside the Template „List.html“ a decision „if-it-is-latest“ then use the partial-file „ItemLatest.html“.

The word „template“ is often used with different meanings. In a structure sense it is a part of the following:
Layout = the outer part of a webpage, like header and footer, that never changes
Template = the part that is inside the Layout and can change for different webpages
Partial = you can have multiple partials on one single webpage inside a Template

And the word is used also for a file, that includes the setup and code for each of the above structure elements:

b. Copy the Template-Files which comes with the extension

If you want to avoid that your changes of the Template-Files getting overwritten with every update you must copy them into the fileadmin. I use the same folder structure in the fileadmin as TYPO3 regulates for every extension. This makes things easier, since I always know what is where. See also my other blog post: Folder Structure in TYPO3.

The original files are here: typo3conf->ext->news->Resources->Private->Layouts or Partials or Templates

I copy the content to:
fileadmin->Resources->Private->Layouts->NewsLayouts->(here I have what was is in the Layouts-Folder of the extension, not the folder Layouts itself)

To connect to the new template-files you need some TypoScript in your root-TypoScript-setup:
plugin.tx_news {
view {
templateRootPaths >
templateRootPaths {
0 = EXT:news/Resources/Private/Templates/
1 = fileadmin/Resources/Private/Templates/NewsTemplates/
partialRootPaths >
partialRootPaths {
0 = EXT:news/Resources/Private/Partials/
1 = fileadmin/Resources/Private/Partials/NewsPartials/
layoutRootPaths >
layoutRootPaths {
0 = EXT:news/Resources/Private/Layouts/
1 = fileadmin/Resources/Private/Layouts/NewsLayouts/

c. Changes in the copied Layouts, Templates and Partials

First we duplicate the file: fileadmin->Resources->Private->Partials->NewsPartials->Item.html and make the copy „ItemLatest.html„.
This is your new Partials-File that defines the news in the latest-view. Here you make your changes for DIVs and classes or just delete stuff you don’t need.

Second, you have to put a „if-then“ construction into the Template-File that calls the partials so it knows when to use which partial.


You have to do it at two places in the code of List.html:

This part is deleted:

<f:for each="{news}" as="newsItem" iteration="iterator">
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />

And replaced with this:

<f:for each="{news}" as="newsItem" iteration="iterator">
<f:if condition="{settings.templateLayout} == 9">
<f:render partial="List/ItemLatest" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />

This part is deleted:

<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />

And replaced with this:

<f:for each="{paginatedNews}" as="newsItem" iteration="iterator">
<f:if condition="{settings.templateLayout} == 9">
<f:render partial="List/ItemLatest" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />
<f:render partial="List/Item" arguments="{newsItem: newsItem,settings:settings,iterator:iterator}" />

As you can see we created a if-condition in the code, that asks for an argument „settings.templateLayout == 9″ and then goes for the partial: partial=“List/ItemLatest“. Now we have to add a „setting.templateLayout = 9“ to our news element. (The number you can choose, doesn’t have to be „9“.)

d. Creating a news-element with TypoScript

The basic code comes again – with some small changes – from the news extensions documentation: = USER {
  userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
  extensionName = News
  pluginName = Pi1
  vendorName = GeorgRinger
  switchableControllerActions {
        News {
          1 = list
  settings < plugin.tx_news.settings
  settings {
        //categories = 49
        limit = 2
        detailPid = 11
        overrideFlexformSettingsIfEmpty := addToList(detailPid)
        startingpoint = 18
        templateLayout = 9

We put the whole code in a „lib-variable“, so we can use it later in our FLUIDTEMPLATE for the whole webpage.

The last line creates the setting: „templateLayout =9“.

As we can see with „1 = list“, it is a list-template – in List.html we created before the if-condition.

„limit =2“ gives us maximum 2 news, „detailPid“ is the ID of the page with the single-news-view, „startingpoint =18“ is the news storage folder where our news are stored.

The setup of the FLUIDTEMPLATE for the webpage could look something like this:

(You will find many blogs dealing with FLUIDTEMPLATES.)

page.10 {
     template = FILE
     template.file = fileadmin/Resources/Private/Templates/mainTemplate.html
     partialRootPath = fileadmin/Resources/Private/Partials
     layoutRootPath = fileadmin/Resources/Private/Layouts
        variables {
           dceCont < styles.content.get
           txNews <
           rootlineNav < temp.rootlineNav
           socialNet < temp.socialNet
           metaNav < temp.metaNav

And then in your template for the whole webpage – so it is displayed in the footer:

<article class="footerNews"><h2 class="outline">The News from tt_news 2 Items</h2><f:format.raw>{txNews}</f:format.raw></article>


e. What to do if you want to use a regular news-plugin element

If we want to put the latest news somewhere in the normal content, we must tell the news-content-plugin that it has the setting number 9. Therefore we must give number „9“ a name in the root-page of your TYPO3-page-tree: /right-click on the root page/ edit->Resources->Page TSConfig:

tx_news.templateLayouts {
9 = ItemLatest

Now you can select ItemLatest in your news-plugin:

Plugin->Plugin Options->Template->Template Layout

different templates in the news-plugin

Since I have all my TypoScript code in a file, to put TS directly in the root-page is not so flexible, while going from one to the next webpage. If someone has a solution how to do it with simple TS, please leave a note in the comment section.


Additional information, added later on

In my TYPO3 master installation and basic layout for all websites, there is, in combination with Dynamic Content Elements, the need to add for every content element – including news – some wrapper-classes and sourrounding DIVs. This code must be inside the template-template-file, since it should not be repeated with every single news-element. In the footer latest-news though this DIVs and classes are disturbing, so there is an additional if-condition that has to go into the template-template-file.


<f:if condition="{news}">
<f:comment>The wrapper-class only for not-latest</f:comment>
<f:if condition="{settings.templateLayout} != 9">
<div class="news-list-container wrapper clearfix">
<div class="center">
<div class="news-list-all">

A second possiblity would be to call a different list-template (List2.html). Maybe the developer of the news extension can help with this topic, or some easy calling of different templates in combination with different partials.
If you have any improvements, please leave a comment!


Dieser Artikel ist  in Englisch, nicht um Ihnen das Leben schwer zu machen, sondern um den Autoren weltweit etwas zurückzugeben, die mir auch tagtäglich mit ihren Artikeln helfen!

Autor: Thomas Hezel

DCE pass on – how to reuse DCEs in TYPO3

The zazu-TYPO3-concept

Here at zazudesign in Berlin DCEs or Dynamic Content Elements got the main extension, that we use in combination with TYPO3. Since the basic structure of the extension TemplaVoila! was outdated, there was only the not so flexible concept of backend layouts to replace it.

Dynamic Content Elements makes it finally possible to code your own little backend modules, so the later user can easily change content, without interfering with the basic structure of a webpage.

In short: make a template, put variables at the places where the content should be placed and then use TYPO3s internal skills to create backend forms, to fill the variables with content – that’s it. Of course going into detail, there is much more behind it and much more it can do – a key word is here view-helpers.

In times of responsive web development this little modules need their own little intelligence, basically a clear CSS driven behaviour for different screen seizes.  So a developer has to create the input fields, the templates with variables and view-helpers and a bunch of CCS instructions. In other words you have to put a good amount of time and effort in it. In consequence one must find a way to pass on the DCEs from one TYPO3 installation to another. Better not one DCE, but your little collection, that you developed over time and you are ready to reuse in your basic setup, as an easy and proven installation to start from.

Structure makes work faster especially with a content management system

The folders

If you want to find your slider pictures or your TypoScript text files always at the same place, it is essential to use the same folder structure in all your TYPO3 installation. For the zazu-concept I basically took the structure and rules of the TYPO3 extension development and used it in the fileadmin. So experienced developers will already know where to find what:


  • fileadmin
    • Configuration
      • TypoScript
        • root.ts
        • news.ts
        • contact.ts
    • Resources
      • Private
        • Layouts
          • main-layout.html
        • Partials
        • Templates
      • Public
        • Downloads
        • Ext
          • Fotorama-4.6.
        • Fonts
        • Icons
        • Images
        • JavaScript
        • Styles
          • all.css
          • normalize.min.css
There are some rules about nomenclature:

a. folders always have a upper case letter at the beginning
b. files always have a lower case letter at the beginning
c. files that you want to be indexed by google (e.g. pictures) use hyphens (e.g. me-myself-and-i.jpg)

There is a big exception in this rules, „fileadmin“ itself and it’s surrounding folders are lower case.

Inside the folders you can have more folders e.g. inside Partials could be a folder with the „Powermail-Partials“, that you take along, and point to it, instead of the partials, what come with the extension and get overwritten with every update. In the Ext-folder I put everything (JavaScript, CSS, unique icons) that comes with jQuery extensions like Fotorama, just to make updates easier. Not so consistent is TYPO3 with singular and plural that gives me confusion from time to time. Usually it is plural like „Layouts“ but with „JavaScript“ it is singular for some reason. If you want to be stringent in your system go for plural.

Inside the „fileadmin“ folder there are two folders that are created by TYPO3, that is „_processed_“ and „_temp_“, if they are missing the install tool will give a warning and will help you to create them.

The folder „uploads“, that is on the same level as „fileadmin“, is also created by TYPO3 and hosts for example icons that you use inside a TYPO3 extension, so this folder also have to come along to your next website.

Steps to do, from a master project to at a new project

  1. create a master installation that has only placeholder content with all your DCEs
  2. update your master installation and all your extensions
  3. empty all caches, go through „Important Actions“ in install tool
  4. download your „fileadmin“ and „uploads“ folders
  5. make a database dump
  6. install TYPO3 on the new webspace for your new project
  7. install your standard extensions (in my case: dce, realurl, powermail, news, sourceopt, metaseo)
  8. overwrite the „fileadmin“ and „uploads“ folders with your folders from the master project
  9. run install tool „Important Actions“
  10. if you stay on the same TYPO3 level and extensions versions , you can import the complete database dump from your master installation
  11. run install tool „Important Actions“ again
  12. do a „DB check“ (button left side bottom in TYPO3)

A clean installation

TYPO3 was going lately through a lot of changes, so sometimes you don’t want to take along some old stuff (wrong relations m:n, NOT Null problems) in your database and prefer to start with a clean setup. In this case you can just use phpMyAdmin to export only the DCE related tables of the database from your master installation and import it in your new project, instead of importing a complete database dump.

The database tables that contain the DCE-information
Export only the DCE-tables
  • open phpMyAdmin (in most cases in the control center of your webspace provider)
  • go to „Export“, choose the option „custom or options“ („angepasst-zeige alle möglichen Optionen an“)
  • mark the tables „tx_dce_domain_model_dce“ and „tx_dce_domain_model_dcefield“
  • if you want you can save your choise as a pattern („Vorlage“)
  • export the tables to a file xxx.sql
DCE export with phpMyAdmin
Import the file
  • go to your new projects database inside phpMyAdmin
  • delete the tables „tx_dce_domain_model_dce“ and „tx_dce_domain_model_dcefield“
  • click „import“ and import your little database dump with the to tables you want to import
  • go to the TYPO3 backend, now you should see all your DCEs in the DCE-menu
What you miss

Now you miss your complete page-tree, that you have to create again, with all sys-folders for news, powermail, backend templates and so on. You also have to adjust your TypoScript to the new page ids and storage folder ids.

What I allways forget

Don’t forget to add the static templates to the root of your page-tree. If you see funny yellow stripes instead of a DCE-output then you didn’t include some static templates. (DCE doesn’t have a own static template but seems to be affected by the others.)

The new template „content element (fluid_syled_content)“ didn’t cover all backend functions of the DCE but I think the developer of DCE, Armin Vieweg, fixed it with one of the last updates (dce 1.4.2). Worst case you can run it together with ccs_styled_content.

CSS and DCE: how to connect specific CSS-blocks to a specific DCE

As mentioned above it is essential that each DCE gets its responsive CSS. The basic concept is to check the size of your browser screen with media queries.

In the template file of the DCE I put a „div“ outside the whole DCE-template and give it a class=“dxx“ with „xx“ for the DCE number of my collection.  2 columns divs start with „2“, 3 columns divs start with „3“.

Then I make my media queries for each DCE!

This seems to be a lot of checking but I couldn’t find any speed difference against having the media queries only ones in the whole CSS-file. Now each CSS instruction starts with „.dxx“ and therefore gives the DCE it’s unique behaviour.

If a DCE should have some different features on a specific page you should add a page count to the body-element (with TypoScript) of your web page and put it at the beginning: #page3 .d22 {background-color: pink;}

Now the CSS can travel directly (copy and paste) with it’s corresponding DCE and be reused in every setup!

Example CSS-code for the DCE with the class=“d22″:

/*DCE 22 - 2 columns text plus image*/
/*======= 320-NO Query === mobile first ======= border 5  = 310 ===*/
.d22 {
margin-bottom: 2em;
.d22 img {
width: 100%;
height: auto;
.d22 .colLeft {
margin-bottom: 2em;
/*======= 480 ========= MEDIA QUERIES ======= border  6 = 460 ===*/
@media only screen and (min-width: 480px) {
/*======= 760========= MEDIA QUERIES ======== border 16 = 728 ===*/
@media only screen and (min-width: 760px) {
.d22 .colRight {
float: left;
width: 45.74175824175824%; /*333px/728px*/
.d22 .colRight {
margin-left: 8.516483516483516%; /*62px/728px*/
/*======= 960 ======== MEDIA QUERIES ======== border 22 = 916 ===*/
@media only screen and (min-width: 960px) {
/*======= 1254 ======= MEDIA QUERIES ======== border 28 = 1198 ==*/
@media only screen and (min-width: 1254px) {
/*======= 2512 ======= MEDIA QUERIES ==== border 151-45 = 2396 ==*/
@media only screen and (min-width: 2512px) {
/*END-DCE 22*/

Avoiding to many server requests

At the end I clean up the code from all empty media queries and put it through a minimizer programme. After that I put all CSS (jQurey extensions, normalizer, my-css) together in one file. With TypoScript I enable then compression.

That’s it!



Armin Vieweg is the developer of the DCEs. As a lonely hero it’s a lot of work to follow all updates of TYPO3 and keep the extension running with the newest TYPO3 versions. So, please don’t forget to donate!

Additional features I would like to have

One concept for the future could be to have the CSS handled directly by the DCE extension. So like the „template-tab“ you also have a „css-tab“ in the backend. DCE could than put all single CSS-parts together in one file that goes in a folder of your choice – even remove empty media queries and minimize the file.  You could then put it in a all-css-file by hand and include that one in your page setup.

The database export of the DCE tables and the import could be handled inside DCE, instead of using phpMyAdmin. „Export all DCE tables to a sql-file“ and „Import DCE tables from a sql-file“ – option: „add to existing DCEs“ and „overwrite existing DCEs“.

May be even exporting single DCE-database-entries and import them – this could be the beginning of a DCE-share-platform with uploaded screen-shots, sql-files and corresponding CSS.

Will see what Armin will comment on this 🙂


Dieser Artikel ist  in Englisch, nicht um Ihnen das Leben schwer zu machen, sondern um den Autoren weltweit etwas zurückzugeben, die mir auch tagtäglich mit ihren Artikeln helfen!



bild für blogbeitrag fotorama und dce

Bildunterschriften bei Fotorama in TYPO3 mit Dynamic Content Elements DCE

Die Fotorama Diashow ist sehr flexibel und in etliche Content Management Systeme integriert.
Für die Darstellung einer Bildunterschirft, die innerhalb des jeweiligen Bildes erscheint, benützt Fotorama das „data-tag“.

<div class=“fotorama“>
<img src=“1.jpg“ data-caption=“Bildunterschrift eins“  />
<img src=“2.jpg“ data-caption=“Bildunterschrift zwei“  />
 Die genaue Anleitung gibt es bei Fotorama hier:

 Vorgehen bei TYPO3 – 7.x mit Dynamic Content Elements DCE

Innerhalb der Definition des DCE kreiert man ein Feld für Bilder. Als Backend-Element benutzt man:

File Abstraction Layer (recommended)

DCE fal viewhelper

Hier nicht vergessen in der Definition des Backend-Feldes (TCA) die Variable eintragen:
In meinem Fall wird die Vorgabe: „fal“ durch „sliderImg“ ersetzt. Es gibt auch einen Hinweis in brauner Schrift.

Mit dieser Definition erhält man im Backend ein Feld zur Eingabe von Bildern, die ausgewählt werden können und dann automatisch den richtigen HTML-Code bekommen:

Backend DCE für FAL
TYPO3 Backend FAL

Der zugehörige HTML-Code sieht so aus:

<section class=“slider“>

<div class=“fotorama“ id=“fotorama“ data-nav=“thumbs“ data-allowfullscreen=“native“ data-autoplay=“4000″ data-stopautoplayontouch=“false“>

<img src=“fileadmin/Resources/Public/Images/sliderImg/slider01_805_480.jpg“ width=“805″ height=“480″ alt=“kommt von fal“  />

<img src=“fileadmin/Resources/Public/Images/sliderImg/slider02_805_480.jpg“ width=“805″ height=“480″ alt=“kommt vom fal“ />

<img src=“fileadmin/Resources/Public/Images/sliderImg/slider03_805_480.jpg“ width=“805″ height=“480″ alt=“from fal“ />

<img src=“fileadmin/Resources/Public/Images/sliderImg/slider04_805_480.jpg“ width=“805″ height=“480″ alt=“from fal“ />


Das Alt-Attribut kommt vom FAL = File Abstraction Layer, also von der Bildverwaltung des Bilderordners im „fileadmin“. Dort kann man das Alt-Attribut angeben, nachdem man auf den Bildnamen geklickt hat. Genauso kann man dort das Title-Attribut angeben! Die Bilder bekommen diese Attribute also zentral für alle Verwendungen mit.

Wie bekommt man das „data-caption =“Die Bildunterschrift des Bildes“ in den Code?

Die Antwort steckt im „f:image-ViewHelper“ der innerhalb der DCEs verwendet wird:

Die Referenzseite findet man hier:

Nachdem man wie oben beschrieben das Backend-Eingabefeld angelegt hat, muss man für das DCE noch im Template das Ganze zum Leben erwecken und fügt folgende Zeile in das Template ein:

<section class=“slider“>
<div class=“fotorama“ id=“fotorama“ data-nav=“thumbs“ data-allowfullscreen=“native“ data-autoplay=“4000″ data-stopautoplayontouch=“false“>
<f:for each=“{dce:fal(field:’sliderImg‘, contentObject:contentObject)}“ as=“fileReference“>   <f:image  src=“{fileReference.uid}“ treatIdAsReference=“1″  data=“{caption: fileReference.title}“ />

Der entsprechende vom DCE schon vorgegebene ViewHelper heißt:
„dce-fal“ indem wiederum der TYPO3 ViewHelper „f:image“ steckt.

dce fal-viewhelper

Der f:image-ViewHelper muss nun um das Data-Attribut erweitert werden, damit am Ende innerhalb des Data-Attributes die Texte erscheinen, die man im Title angegeben hat:

<f:image  src=“{fileReference.uid}“ treatIdAsReference=“1″  data=“{caption: fileReference.title}“ />

Dies bedeutet, dass im Data-Object „fileReference“, das zuvor mit dem ViewHelper kreiert wurde, der Titel ausgelesen wird und das Data-Attribut den Namen „caption“ nach dem Bindestirch bekommt, also „data-caption“:

Ausgabe am Ende:

<img data-caption=“here you see the title“ src=“fileadmin/Resources/Public/Images/sliderImg/slider01_805_480.jpg“ width=“805″ height=“480″ alt=“kommt von fal“ title=“here you see the title“ />

Etwas unschön ist, dass der ViewHelper gleichzeitig ein „title-tag“ mit demselben Inhalt erstellt.


Weitere Möglichkeiten mit dem „fileReference-object“

zeige ich in einem anderen Blogbeitrag, der sich um reine Bildabfolgen kümmert und wie man unter diese verschiedene Bildunterschriften setzen kann:

TYPO3-DCE – Mit dem FAL-Viewhelper Bildunterschriften (figcaption) erzeugen



Bilderlisten HTML

TYPO3-DCE – Mit dem FAL-Viewhelper Bildunterschriften (figcaption) erzeugen

Die TYPO3-Erweiterung DCE ist für uns ein essentieller Bestandteil unserer Responsive-Design-Webentwicklung geworden. Sie gibt der kompletten Programmierung Struktur und Übersichtlichkeit, zudem können DCEs in verschiedenen Projekten wieder verwendet werden. Von Hause aus bringen die DCEs ein paar Viewhelper mit, mit denen man Inhalte aufarbeitet und aus Eingabefeldern in den Programmcode einer Website transportiert. Wer allerdings eigene Viewhelper programmieren will, muss tief in das System einsteigen und eine gute Portion PHP-Erfahrung mitbringen. Mit den vorgegebenen Viewhelpern kann man jedoch im Regelfall sehr viel abdecken.

Will man eine Bilderliste erstellen, dann schreibt man mit Hilfe des „dce:fal-Viewhelpers“ eine Reihe von Bildern, die man im Backend auswählt, in die li-Elemente einer unsortierten HTML-Liste. Das Problem besteht nun darin, wie man die Bildunterschriften mit Hilfe des HTML5-Tags „figcaption“ direkt unter die Bilder bekommt.

Ein zweites Problem besteht beim Responsive-Design darin, eine Bilderreihe für verschiedene Größen jeweils neu zu ordnen. Mal sind es z.B. drei Bilder pro Reihe, mal 6 Bilder pro Reihe etc. Je nachdem darf dann das Bild, das zum linken Bildrand wandert, keinen linken Abstand bekommen, wie es die Bilder innerhalb der Reihe haben. Ich muss also jedem Bild eine durchnummerierte „id“ oder „class“ mitgeben, so dass ich es über CSS ansprechen kann. (Der CSS3-Selektor „nth:child“ hat leider noch nicht die volle Unterstützung der gängigsten Browser.)

figcaption mit Inhalt füllen

Der dce:fal-Viewhelper sieht folgendermaßen aus:

<f:for each=“{dce:fal(field:’thisVariableName‘, contentObject:contentObject)}“ as=“fileReference“>
<f:image src=“{fileReference.uid}“ alt=““ treatIdAsReference=“1″ />

Für jedes Bild wird ein contentObject erstellt, das in seinen Objekteigenschaften die Eigenschaft „uid“ besitzt, auf die ich dann zugreife. „alt-Tag“ und „title-Tag“ werden vom TYPO3 FAL-System (also über fileadmin, Untermenü des Bildes) geliefert und automatisch eingefügt. Der Trick besteht nun darin, das „alt-Tag“ für die Bildunterschrift zu benutzen (z.B. Jeanette). Will ich das figcaption-Element aufteilen in zwei Abteilungen (z.B. Name und Beruf), dann muss ich das „title-Tag“ dazu nehmen und bekomme innerhalb von ficaption die Klassen „fCapA“ und „fCapB“ (oder immer man sie nennen will), die ich dann über CSS gesondert auszeichnen kann.

Der dce:fal-Viewhelper kennt in seinem Objekt folgende Eigenschaften:

– xxx.uid
– xxx.title
– xxx.alternative (für das „alt-tag“)

Da ich im Beispiel unten das Objekt „fileReference“ kreiere, kann ich auf die Objekteigenschaften zugreifen:

<figcaption><div class=“fCapA“>{fileReference.title}</div><div class=“fCapB“>{fileReference.alternative}</div></figcaption></figure></li>

Laut HTML5-Referenz darf „figcaption“ auch weitere HTML-Tags (z.B. div) enthalten.

Durchzählen der Listenelemente für unterschiedliche „id“ oder „class“

Hier benutzt man die „iterator-Eigenschaft“ des „for-Viewhelpers“, den ich in der ersten Klammer der for-Schleife aufrufe:

<f:for each=“{dce:fal(field:’listPic‘, contentObject:contentObject)}“ as=“fileReference“ iteration=“iterator“>

Damach kann ich dann auf den Array-Index des Iterators zugreifen.

<li class=“liDown{iterator.index} …

<li class=“liDown0″></li><li class=“liDown1″></li><li class=“liDown2″></li><li class=“liDown3″></li> …

Achtung dieser beginnt aber wie bei allen Array-Indizes bei 0! Alternativ kann man auch „iterator.cycle“ benutzen, der dann bei 1 beginnt. Im Beispiel unten zerstört der Iterator „index“ die Logik bei „gerade“ und „ungerade“, da er bei 0 beginnt und dann die „class=1“ die weitere Klasse „class=even“ dazu bekommt. Der Iterator „cycle“ ist nicht mit dem Viewhelper f:cycle zu verwechseln, sondern nur der Rundenzähler des „for-Viewhelpers“.

Will man den einzelnen Elementen „gerade“ und „ungerade“ zuordnen, dann kann man den Viewhelper „f:cycle“ benutzen, der mit Rundendurchgängen, also wann er wieder auf Anfang geht, ausgestattet werden kann. In unserem Fall sagen wir einfach, dass nach der Runde „0=odd“ und „1=even“, es wieder von vorne los geht. Das Ganze wird bei mir in die Variable „odEv“ geschrieben, die ich dann in der „li-class“ abrufen kann:

<f:cycle values=“{0: ‚odd‘, 1: ‚even‘}“ as=“odEv“>

<li class=“liDown{iterator.index} {odEv}“> …

Hier der ganze Code für eine responsive Bilder-Liste mit zwei verschiedenen Bildunterschriften (figcaption) pro Bild, unter der Verwednung von DCE Dynamic Content Elements und TYPO3 Viewhelpern

{namespace dce=ArminVieweg\Dce\ViewHelpers}
<f:layout name=“None“ />
<f:section name=“main“>
<!–DCE42a pictureList–>
<div class=“d42a pictureList wrapper clearfix“>
<f:for each=“{dce:fal(field:’listPic‘, contentObject:contentObject)}“ as=“fileReference“ iteration=“iterator“>
<f:cycle values=“{0: ‚odd‘, 1: ‚even‘}“ as=“odEv“>
<li class=“liDown{iterator.index} {odEv}“><figure><f:image src=“{fileReference.uid}“ treatIdAsReference=“1″ />
<figcaption><div class=“fCapA“>{fileReference.title}</div><div class=“fCapB“>{fileReference.alternative}</div></figcaption></figure></li>
</div><!– END DCE42a –>

Weitere Informationen zu den Viewhelpern gibt es in der TYPO3 Referenz, auch mit guten verständlichen  Beispielen.


Autor: Thomas Hezel

TYPO3 – Dynamic Content Elements (DCE) – kurze Anleitung

Die „TYPO3-Erweiterung“ „Templa Voila!“ gehörte quasi zum Standard des „Content Management Systems“ und wurde fast in jedem Lehrbuch beschrieben. Die Erweiterung hatte zwei wichtige Komponenten: Zum einen eine Abbildungsfunktion („Mapping“) und zum anderen war es möglich eigene Inhaltselemente mit einem selbst gestalteten „Template“ zu erstellen, sogenannte „Flexible Content Elements“ oder „FCEs“. In Zeiten, in denen Abschnitte, Spalten und „Responsive Design“ (eine sich an verschiedene Bildschirme anpassende Gestaltung) immer wichtiger werden sind, optimierte Inhaltselemente, die für den Laiennutzer (oder „Redakteur“) einen der Gestaltung entsprechenden Überblick bieten essenziell. Ein weiterer wichtiger Vorteil von eigenen Elementen ist es, neben einer klaren Gestaltung, den „Redakteur“ davor zu bewahren, dass er durch einen zu freien Umgang mit den originären Inhaltselementen von TYPO3 das sorgsam abgestimmte „responsive Design“ zerstört.

„Templa Voila!“ funktioniert in TYPO3 6.2 nicht mehr.

TYPO3 setzt in der Zukunft verstärkt auf die Template-Funktionen von „FLUID“ und den damit im Zusammenhang stehenden „View-Helpern“, die Inhalte in vorgefertigte „Templates“ einfügen und z.B. auch Schleifen und „if-Funktionen“ zur Verfügung stellen.
Derzeit kann „FLUID“ nur die Mapping-Funktion, aber nicht die frei gestalteten Inhaltselemente ersetzen. Dies funktioniert auch nur sehr eingeschränkt mit der Erweiterung „gridelements“, die sich auf die „TYPO3-Funktion“ „Backendlayouts“ stützt und diese auf die Elemente überträgt.

Einen Ersatz für die „FCEs“ stellt jedoch die Erweiterung „Dynamic Content Elements“ (DCE) dar. Leider hat es der Entwickler noch nicht geschafft eine Anleitung für seine Erweiterung zu schreiben, da er momentan (Mai 2014) dabei ist die Erweiterung komplett in ihrem Kern umzuschreiben. Ein weiterer Nachteil ist, dass der Entwickler anscheinend ziemlich alleine mit der ganzen Sache dasteht und deshalb immer einige Zeit vergeht, bis Änderungen umgesetzt werden können. Ein Einführungsvideo, auf dem man jedoch mehr ahnen als sehen kann, findet sich hier:

Eine kleine Einführung in die Anwendung von Dynamic Content Elements DCE für TYPO3

Voraussetzungen für die Verwendung von DCE

Namensgebung in diesem Blog:
Es werden hier „DCE-Elemente“ beschrieben, die sich auf das ganze „Dynamische Content Element – DCE“ beziehen, die ich dann im Backend auswählen kann. Dann gibt es „Eingabeelemente“, also einzelne Felder, die im jeweiligen „DCE-Element“ enthalten sind und in die der „Redakteur“ später Inhalte eingibt.

Was ist wo?

Nach der Installation findet man unter „Adminwerkzeuge“ ein neues Symbol „DCE“; dies ist der erste Zugang.
Der alternative zweite Zugang befindet sich auf der obersten Ebene des Seitenbaumes (also oberhalb der „Rootseite“). Auf das „TYPO3-Symbol“ klicken, dann „Liste“ und dann neues „DCE-Element“ anlegen.

DCE über Liste
neues „DCE-Element“ über „Liste“ anlegen

Klickt man auf „DCE“, kommt das folgende Fenster, in dem man einen Namen für das neue „DCE-Element“ vergeben muss. Danach muss man noch ein erstes Feld anlegen, ansonsten bekommt man beim Speichern eine Fehlermeldung. Allgemein toleriert die Extension keine leeren Felder, dort wo Ausrufezeichen sind.

Namen für das DCE
Namen für das neue Element vergeben (z.B. „3-Spalten“).

Legt man ein neues Feld an, dann sind erst mal 3 Einträge wichtig:

Element Typ wählen
Element Typ, Namen und Variable wählen
  1. Unter Typ muss man zwischen „Element“, „Tab“ und „Sektion“ wählen.
  2. Das Element bekommt einen Namen, also einen „Titel“ dieser sollte für den „Redakteur“ später sinnvoll sein (z.B. „Überschrift Spalte 1“).
  3. Das Element bekommt eine Variable zugewiesen, damit man nachher sagen kann, wohin der Inhalt „gemappt“ werden soll. Die Variable wird dann später ins jeweilige „DCE-Element-Template“ geschrieben.

zu 1.
„Element“ ist ein Inhaltselement, also ein Textfeld, eine „Check-Box“, ein Bild oder ein ganzes „RTE-Element“ etc. Das Ganze wird dann in der Konfiguration gestaltet.
„Tab“ ist ein Register-Tab-Reiter, der im Backendmodul des zu erstellenden „DCE-Elementes“ erscheint. Man kann damit seine Inhalte strukturieren. Alle Elemente, die unter dem „Tab“ angelegt werden, erscheinen dort dann auch.
„Sektion“ ist eine Zusammenfassung von Elementen zu Gruppen, die zusammengehören und deshalb auch in einem Bereich vom „Redakteur“ erfasst werden sollen. Alles was unter der „Sektion“ angelegt wird, erscheint später innerhalb der Sektion.

zu 2.
Der Name erklärt sich von selbst, er muss einfach für den „Redakteur“ sinnvoll sein.

zu 3.
Die Variablen entsprechen mehr oder weniger den „###MARKERN###“, die man bisher bei Templates benutzt hat. In den HTML-Code wird mithilfe der „View-Helper“ die Variable gesetzt und angesprochen. Ungefähr: „Setze hier den Inhalt der Variablen ein und mache mit ihm dies und das …“ Die Variable sollte sinnvoll gewählt werden, sodass man sie später, bei der weiteren Programmierung, wieder identifizieren kann.

Das Eingabe-Element wählen und es über <config> konfigurieren

Eine Reihe tiefer wählt man im Auswahlfeld „Konfiguration“ das Eingabeelement. Hier kommen die Flexforms ins Spiel. Welche Werte möglich und welche nötig sind, dazu habe ich noch keinen Überblick.
Relativ selbst erklärend sind Felder wie „Simple input field“, mit einer einfachen Konfiguration als „Input-Feld“ mit der Größe „30“, das Leerzeichen vor und nach dem Text abschneidet – „trim“ – und als „required“ behandelt, also ausgefüllt werden muss. Bei der Auswahl eines Feldtyps wird die dazugehörige Standardkonfiguration automatisch in das darunter liegende Feld geschrieben.

Anmerkug des Entwicklers Armin Vieweg zu möglichen Konfigurationen:
Hierbei handelt es sich um das ganz normale TCA von TYPO3, nur halt in Flexform (XML) Gewand.
Hier sieht man die ganzen Feld-Typen, die TYPO3 anbietet:

Die Möglichkeiten beim „Simple input field“ werden hier beschrieben:


Element wählen mit Konfiguration
Element wählen mit Konfiguration

Das Ganze sieht dann in der Entwicklungsansicht so aus:

DCE Entwurfsansicht mit einem Element
DCE Entwicklungsansicht mit einem Element

Man kann die einzelnen Eingabefelder einklappen und ausklappen. Auf dem dunkelgrauen Feld wird der Variablenname des Eingabefeldes, hier: „{field.ueberLi}“ – also „Überschrift links“.

Unter „Vorschau“ kann man sich die Backendvorschau des DCE-Elements anzeigen lassen, im Beispiel hier ergänzt mit einem „Tab-Element“ mit der Aufschrift: „Ich bin ein Reiter“.
So sieht die Backendvorschau aus:

Backendvorschau DCE
Backendvorschau DCE mit einem „Tab“ und einem Eingabefeld

Das DCE-Element gestalten

Zu jedem „DCE-Element“ gehört ein eigenes Template – das Wichtigste und Schönste daran!
Über den Reiter Template kommt man zum jeweiligen, frei gestaltbaren „DCE-Template“.
Das sieht so aus:

DCE-Template Vorgabe
DCE-Template noch ohne eigenen Inhalt

Hier kommen die „FLUID-View-Helper“ ins Spiel, die dafür sorgen, dass der eingegebene Inhalt nach individuellen Wünschen angezeigt und gestaltet wird.

Was bedeutet hier was?

{namespace dce=Tx_Dce_ViewHelpers}
Hier vergibt der Autor einen Namensraum für die „View-Helper“, von denen man auch eigene programmieren kann. (Für uns erst mal nicht wichtig, darf aber nicht gelöscht werden.)

<f:layout name=“Default“ />
Bedeutung: Dieses individuelle „DCE-Template“ wird in das Haupttemplate „Default“ eingebettet.

Das Haupttemplate „Default“ findet man unter:

Mit folgendem Inhalt:
<div class=“tx-dce-pi1″>
<f:render section=“main“ />

Dies sagt Folgendes:
Nehme das individuelle DCE-Template, also die „Section Main“ und packe es in einen „div-Container“ mit der Klasse „tx-dce-pi1“ und rendere darin den Inhalt der „View-Helper-Sektion-main“.

ACHTUNG oft nervige „div-Container“:
Will man den umgebenden „div-Container“ loswerden, dann muss man statt <f:layout name=“Default“ /> das ebenfalls schon vorhandene Layout <f:layout name=“None“ /> ansprechen, also einfach „Default“ durch „None“ ersetzen. Im vorgegebenen Layout „None“ ist das umgebende „div“ nicht vorhanden. Das dann immer noch erscheinende „csc-default-Wrapping“ von TYPO3 kann man unter dem Reiter „Sonstiges“ ebenfalls noch ausschalten.

<f:section name=“Main“ /> … </f:section>
Innerhalb dieser Sektion kommt das individuelle Template, wie wir es gestalten möchten, also mit dem ganzen „HTML-Code“ und unseren „CSS-Klassen“. Innerhalb dieses „HTML-Codes“ kommen dann die Variablen oder weitere „View-Helper“ die den Inhalt platzieren.


Individuelles DCE-Template gestalten

Ein individuelles „DCE-Template“ könnte so aussehen:

mein eigenes DCE-Template
ein einfaches DCE-Template für 3 Spalten

Erklärung „Beispiel-DCE-Template“:
Hier wird mit dem „View-Helper“ „format.html“ – der dafür sorgt, dass „HTML-Code“ nicht einfach nur ausgegeben, sondern auch interpretiert wird – in das „h2-Tag“ der Inhalt mit der Variablen „field.ueberLi“, „field.ueberMi“ und „field.ueberRe“ geschrieben. Dies sind die Inhalte, die mein „Redakteur“ in den von mir angelegten Elementen eingegeben hat und für die ich die Variablennamen individuell festgelegt habe. Verschiedene „View-Helper“, auch eigene „View-Helper“ des Entwicklers von „DCE“, finden sich in der „Template-Inhalt-(Fluid)-Auswahl“.

So sieht dann das entsprechende Eingabefenster des „Redakteurs“ aus, der hier für jede Spalte eine Überschrift vergeben kann:

Eingabefenster des Redakteurs
Eingabefenster des Redakteurs, den Haupttext könnte man dann z.B. neben „Allgemein“ unter einem eigenen „Tab“ „Inhalt“ anlegen

Weiter Eingabefelder können dann noch hinzugefügt werden. Hier gehen auch Datenbankabfragen und komplexe Geschichten wie „for-Schleifen“ und Zugriff auf TYPO3-Daten. Ich hoffe, dass der Entwickler der Erweiterung hier später ein wenig Licht in das Dunkel bringt und die komplexen Funktionen an Beispielen erklärt. Da die „FLUID-View-Helper“ verwendet werden, kann man sich im Umfeld der Erweiterungsentwicklung mit „EXTBASE/FLUID“schon dort informieren.

Ein weiteres Beispiel mit Check-Box, die in unserem Fall dafür sorgt, dass die Überschriften eine ID bekommen

Ein ähnliches Beispiel findet man auch auf dem Video des Entwicklers. Link siehe ganz oben.

Im Bereich „DCE-Element-bearbeiten“ ein neues Inhalts-Element „Check Box“ anlegen. Das funktioniert, indem ich in der Konfigurations-Auswahl einfach „Simple checkbox“ wähle und wie immer einen Titel und einen Variablennamen vergebe.

Check-Box Element im DCE anlegen
Check-Box Element im DCE anlegen

Nun habe ich eine „Check-Box“, die der „Redakteur“ anklicken kann und die den Titel „Alle Überschriften mit ID“ trägt. Diese Information muss nun verarbeitet werden. Ich will also, wenn diese Box angeklickt ist, alle Überschriften zusätzlich mit einer „ID“ ausstatten. Dazu muss ich mein „DCE-Template“ für das „Beispiel-DCE“, also das „3-Spalten-DCE“, erweitern.

Template mit einem if-View-Helper:

DCE-Template mit einem if-view-helper erweitert
„DCE-Template“ mit einem „if-view-helper“ erweitert

Wenn die „{field.idChBox}-Variable“ wahr ist, also „1“ zeigt, dann nehme den ersten Teil meines Templates ansonsten nehme den Teil der unter „<f:else>“ steht.

So sieht das „DCE-Element“ dann für den „Redakteur“ aus:

Check-Box Redakteursansicht
„Check-Box“ Redakteursansicht, ganz unten: „Alle Überschriften mit ID“

Der Reiter „Wizard“ bei der DCE-Element Gestaltung

Unter dem Reiter „Wizard“ kann man anklicken, ob im „TYPO3-Backend“ das Element direkt zur Auswahl angezeigt wird und wie es dort angezeigt wird. (Sollte man aktivieren!) Zusätzlich muss man ein Symbol vergeben oder es kann ein eigenes „DCE-Element-Symbol“ hochgeladen werden. Hier kann man schön „Corporate Identities“ einhalten und aussagekräftige Symbole entwerfen z.B. für 3-Spalten, Bilder, Dia-Show etc.

Der Reiter „Detailseite“ bei der DCE-Element Gestaltung

Unter dem Reiter „Detailseite“ kann man ein zweites Template anlegen, das eine andere Ansicht des eigenen „DCE-Elementes“ zeigt. Die Ansicht wird dann über einen Link aktiviert, der einen zusätzlichen „Get-Parameter“ erhält. (Falls hier jemand gute Beispiele hat, bitte einen Link in den Kommentaren setzen!)

Der Reiter „Sonstiges“ bei der DCE-Element Gestaltung

Unter dem Reiter „Sonstiges“ findet man die oben erwähnte Funktion zum Ausschalten des TYPO3-Standard-Wrapps „csc-default“ und einem umgebenden „div-Container“. Die weiteren Funktionen, sofern nicht selbsterklärend, werden hoffentlich von der zu erwartenden Anleitung des Entwicklers erklärt.

Der Reiter „Vorschau“ bei der DCE-Element Gestaltung

Unter dem Reiter „Vorschau“ wird eine „Backend-Vorschau“ angezeigt, also so, wie unser „DCE-Element“ vom „Redakteur“ gesehen wird.

Zu guter Letzt:
Aufrufen des DCE-Elementes im Backend durch den „Redakteur“

Der lange Weg

Über „spezielle Elemente“ – „Datensätze einfügen“ – im Fenster „Datensatz einfügen“ ganz unten das gewünschte „DCE“ unter „DYNAMISCHE CONTENT-ELEMENTE“ auswählen.

DCE im Backend auswählen
„DCE“ im „Backend“ auswählen

Der kurze Weg

Im zusätzlichen Reiter „Dynamische Content-Elemente“ das gewünschte Element auswählen.

DCE einfach auswählen
gewünschtes DCE im eigenen Reiter einfach auswählen

Hoffe die Anleitung, war verständlich. Ich habe mich bemüht, ziemlich ausführlich zu sein und keine Schritte zu überspringen. Für Anregungen und Ergänzungen bin ich wie immer dankbar!

Autor: Thomas Hezel

Ergänzungen zu den obigen Erklärungen

Ergänzung von Armin Vieweg 6. Mai 2014:
Unterschiede zwischen den View Helpern <f:format.raw> und <f:format.html>
TYPO3 hat eine Funktion eingebaut, die die Ausgabe von HTML steuert. Dort kann man z.B. Klassen verbieten, Tags verbieten, etc. Oder man kann auch alle <b> z.B. automatisch in <strong> umwandeln lassen. Das alles lässt sich über TypoScript konfigurieren.
f:format.html macht genau das, bzw. ruft die entsprechende Funktion dafür auf. f:format.raw gibt den Code 1:1 aus, so wie er eingegeben wurde.
In Fluid wird HTML immer escaped. Daher braucht man einen der beiden Viewhelper, wobei format.html besonders Sinn macht, wenn man z.B. den Text aus einem RTE ausgeben möchte.

Ergänzung zu Templa Voila!  6. Mai 2014:
Templa Voila! wird von Community weiterentwickelt
Link: Templa Voila! und seine Zukunft