flexslider dce typo3

How to provide code for the FlexSlider 2 with the TYPO3-DCE-Extension and Viewhelpers

The jQuery FlexSlider demands some very special arrangements for HTML code, so it can transform it into a slide show.  If you want to create your own TYPO3 user interface for it, with the help of the DCE extension you have to change the viewhelpers Armin Vieweg, the developer of the DCE extension is providing. Here are some code snippets:

FlexSlider is asking for the following arrangement for a slide show with thumbnails and caption:

<!-- Place somewhere in the <body> of your page -->
<div class="flexslider">
  <ul class="slides">
    <li data-thumb="slide1-thumb.jpg">
      <img src="slide1.jpg" />
      <p class="flex-caption">Adventurer Cheesecake Brownie</p>
    <li data-thumb="slide2-thumb.jpg">
      <img src="slide2.jpg" />
      <p class="flex-caption">Adventurer Cheesecake Brownie</p>
    <li data-thumb="slide3-thumb.jpg">
      <img src="slide3.jpg" />
      <p class="flex-caption">Adventurer Cheesecake Brownie</p>
    <li data-thumb="slide4-thumb.jpg">
      <img src="slide4.jpg" />
      <p class="flex-caption">Adventurer Cheesecake Brownie</p>

TYPO3 and the DCE extension are providing the following viewhelper inside the DCE template for a pile of images. At which „pic“ is the name of the variable that was assigned for the input field. The alt tag is filled through TYPO3 from the picture files alt-tag assignment in the backend file abstract layer (fal):

<f:for each="{dce:fal(field:'pic', contentObject:contentObject)}" as="fileReference">
<f:image src="{fileReference.uid}" alt="" treatIdAsReference="1" />

„alt“ tag, „description“ and „title“ can also be overwritten directly in the DCE:

DCE images at the TYPO3 backend

The solution is to either use the „title“ tag or the „description“ tag to provide for the images captions and simply double the uri of the images (with the help of the uri viewhelper) for the FlexSlider „data-thumb“ inside the opening <li>. Here is my code for the DCE template file:

<div class="flexslider">
<ul class="slides">
<f:for each="{dce:fal(field:'sliderImg', contentObject:contentObject)}" as="fileReference">	
<li data-thumb="<f:uri.image image="{fileReference}" />">
 <f:image  src="{fileReference.uid}" treatIdAsReference = "1" />
        <div class="flex-caption">

I also changed the „flex-caption“ from <p>  into a <div> so I can use headline tags (<h2>, <h3> …) in it, since it is surrouned by a format-raw so the html tags will by parsed and not shown as such.

„fileReference“ is the assigned object name of the image object, so „fileReference.title“ gives you the title of the image and „fileReference.description“ the description and „fileReference.alternative“ the content of the „alt“ field.

Autor: Thomas Hezel

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
           h1TopSlogan.select.where = colPos=0
           rubrikH < styles.content.get
           rubrikH.select.where = 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

DSGVO opt-in for Cookies

DSGVO = Datenschutzgrundverordnung or GDPR = General Data Protection Regulation – TYPO3 and opt-in in Cookies

According to the German hoster Mittwald there is only one TYPO3 extensions that provides a real opt-in for cookies.
Since it looks like an opt-in for cookies will be the final demand by 25th of May 2018, I checked the TYPO3 extension „cookies“ and looked how it behaved under different conditions. You can get the extension here: https://extensions.typo3.org/extension/cookies/

First of all you have to upload it into TYPO3, then add the static template and after that make your settings at the constants panel.

Don’t forget to put your starting page ID in the field „JavaScript Fallback page“ of the constants in the root template. Otherwise you get problems with cHash and the submit is not going through, so you get allways a popup, asking wether you want to sent the formular again. If you have cHash-Problems you can also try to put „$GLOBALS[‚TYPO3_CONF_VARS‘][‚FE‘][‚pageNotFoundOnCHashError‘]“ in the Install Tool Settings on „false“.

After opening your domain in the browser for the first time, there is a dialog window opening at the top of your window (cookie hint).
But checking the cookies in the browser revealed, that Google and others had already set their cookies. So, the setting of cookies via a third party JavaScript is not stopped by the extension. Only the TYPO3-cookie is not set yet.

So this is not a real opt-in!

You can, as described in the extension manual, then use a TYPO3 conditions to unload for example your Google Analytics tracking code. But the cookie that was set at the first load of the page will remain. Of course by setting the browser to block third party cookies and making browser settings to stop tracking will help. But this is then not a real opt-in for a single webpage.

My solution for a real cookie opt-in

The extension sets 2 additional cookies

a. tx_cookies_hidden
b. tx_cookies_disabled

a. This is used to track whether you have already made a choice about cookies, so the dialog will not appear again on the next subpage.
b. If you have chosen to deactivate cookies, this cookie is set to carry  along your choice, while you surf through the website.

TypoScript at the root of the website

page.5 < tt_content.list.20.cookies_main

[globalVar = _COOKIE|tx_cookies_hidden = 1]
page.headerData.1 =TEXT page.headerData.1.value (
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x"></script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxxx-x', {'anonymize_ip': true });
[globalVar = _COOKIE|tx_cookies_disabled = 1] && [globalVar = _COOKIE|tx_cookies_hidden = 1]
page.headerData.1 >


If the cookie „tx_cookies_hidden“ exists (value „1“), then write the Google tracking code in the header. Meaning the user has clicked on „I agree“, so the cookie „tx_cookies_hidden“ was created.

If the cookie „tx_cookies_hidden“ exists and the cookie „tx_cookies_disabled“ exists, meaning the user has opted for „disable cookies“ (this could happen on the first possibility or later on), then erase what is stored in the page.headerData.1 object.

Now we have one more problem

Clicking on the „I agree“ button doesn’t provoke a reload of the page. As a result no Google tracking code is written in the header since the information only comes to action after a reload. The button „activate cookies“ or „deactivate cookies“ results in a page reload, so we only have the problem with the „I agree“ button. But if the user goes for „I agree“ no tracking code is written and no Google cookie is set before the next reload.

This can be solved with jQuery code for all pages:

$('#tx_cookies_hide input').click(
function() {
function() {

The delay is needed, so the browser has time to write first the cookies from the extension and to set the „globalVar“ before the reload is activated.

Example where you can see it in action: https://www.implantologie-hopf.de


To make the jQuery reload work in the iPhone and iPad world you need to put the cursor to „pointer“ for the „I agree“ button. Seems to be some „Apple-mind-bug“:


#tx_cookies_hide input {
cursor: pointer;


May 16th 2018 – Version 5.0 of the extension is available and has some changes!

a. name change from cookie „tx_cookies_hide“ to „tx_cookies_accepted“ please mind the „ed“ of „accepted“

b. id name change for the „I agree“ button to #tx_cookies_accept“, please be carefull here wie have no „ed“ but just an „…_accept“!

c. css for iPhone cursor: pointer changes id-selector

d. some action response text is added and can be set on „display: none“, or used


a. TS  changes to:

page.5 < tt_content.list.20.cookies_main

[globalVar = _COOKIE|tx_cookies_accepted = 1]
page.headerData.1 =TEXT page.headerData.1.value (
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x"></script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxxxx-x', {'anonymize_ip': true });
[globalVar = _COOKIE|tx_cookies_disabled = 1]
page.headerData.1 >


b. jQuery selector for the reload with the „I agree“ button changes to:

$('#tx_cookies_accept input').click(
function() {
function() {


c. CSS for the iWorld jQuery window reload bug:

#tx_cookies_accept input {
cursor: pointer;

d. CSS:

#tx_cookies .typo3-messages {
  display: none;


Update 20th May 2018 – Extension Cookies Verson 5.0.1 is available

The author of the extension (Sven Burkert) has reacted, sent me an email and made some changes:

If the domain is „www.abc.de“ the cookies from Google are having the domain name „.abc.de“. Before the PHP-script didn’t delete in this case the Google cookies. With version 5.0.1  this cookies will also be deleted.

Sven Burkert also noted, that if you are not loading the JavaScript of the extension, clicking on the „I agree“ button will not trigger a reload of the web-page. In some cases – if you are not looking for an opt-in – it is desirable to avoid a reload.


For all other cases my little JavaScript will do the reload.




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:

lib.news = USER
lib.news {
  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 < lib.news
           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!



HP-Netzwerk-Switch und Drucker Probleme

Bei den meisten Netzwerkdruckern wird bei der Einrichtung empfohlen das „Line Printer Daemon Protocol – LPD“ zu verwenden. Das Protokoll wurde ursprünglich für UNIX entwickelt und wird deshalb vor allem für den MAC empfohlen, da dieser auf einer UNIX-Plattform aufbaut. Bei der Einrichtung meines Canon Netzwerkdruckers wurden allerdings die Spooling-Dienste, also die Ausgabe der Druckdateien blockiert. Das reine Einrichten des Druckertreibers hat allerdings funktioniert. Nach langem Suchen und auch einigen Versuchen beim HP-Support, haben wir herausgefunden, dass es am Switch lag, der das „LPD-Protokoll“ blockiert hat. (Das IPP Internet Printing Protocol hat funktioniert.)

Das Problem liegt in den DoS-Attack-Einstellungen, die ziemlich mißverständlich sind.


Die Storm Control ist zwar aus, aber die Auto DoS Features sind immer noch an, obwohl es nicht den Anschein hat!

Invalid TCP Flags Attack ist der Bösewicht, der das Ganze blockiert!

Bild oben: So funktioniert das LPD-Protocol nicht!


So funktioniert das LPD-Printing-Protocol auch beim HP-Switch:


So funktioniert das LPD-Line-Printer-Daemon-Protocol auch mit dem HP-Switch



duplicate content by thomas Hezel

SEO – „Duplicate Content“ oder „Doppelte Inhalte“

Google hat in den letzten Jahren mit dem Begriff „Duplicate Content“ oder zu deutsch „Doppelte Inhalte“, für sehr viel Aufregung gesorgt. Plötzlich machten sich alle Gedanken über Serverkonfigurationen und .htaccess-Dateien um zum Beispiel zu verhindern, dass eine Website einmal mit dem vorangestellten „www“ und ohne das „www“ zu erreichen war. Das Grundproblem war am Anfang, dass manche Agenturen versuchten durch mehrere Domainnamen, unter denen der gleiche Inhalt zu erreichen war, eine besser Positionierung zu bekommen, da damit vorgegaukelt wurde, dass es sich um wichtige Dinge handle, die im Internet sehr oft vorhanden waren (z. B. eben die Inhalte der eigenen Website).

Doch wie sieht es mit SEO und „Duplicate Content“ im Jahr 2016 aus?

Verkürzt kann man wahrscheinlich antworten, dass Google seine Algorithmen angepasst hat oder wie es Andrey Lipattsev, der bei Google Irland für die Suchqualität zuständig ist, ausgedrückt hat: „Dann bauen wir halt eine weiteres Datenzentrum.“

Johannes Müller (aka JohnMu oder John Mueller), der bei Google Zürich für Webmaster Trends zuständig ist, hat das Ganze so umschrieben:
Wenn man in einem Shop zum Beispiel für ein Produkt die Herstellerbeschreibung verwendet und Google nun in mehreren Online-Shops oder Ladengeschäften genau dieselbe Beschreibung findet, wird die Suchmaschine einen dieser Shops aussuchen, der weitere Merkmale aufweist, von denen Google annimmt, dass sie zu dem Suchenden oder zu der jeweiligen Suchanfrage passen. Google wird also nicht die Herstellerseite nehmen, mit dem originalen ursprünglichen Inhalt, sondern, falls es sich zum Beispiel um ein Ladengeschäft handelt, das Geschäft, das in der geringsten Entfernung zum Suchenden liegt.

Andrey Lipattsev weist darauf hin, dass auch ein Online-Shop, der durch verschiedene Auflistungen von Produkten (z. B. alle Schuhe nach Farbe, alle Schuhe nach Größe, alle Schuhe nach Männer/Frauen etc.) die Produkte in seinen URLs natürlich mehrfach auflistet kein Problem für Google bedeuten würde. Er meint sogar, dass selbst wenn es 30.000 verschiedene Seiten geben würde, die alle bestimmte Produktauflistungen wären, Google in der Lage wäre daraus dann eine Seite zu finden, von der Google annimmt, dass sie am besten zur Suchanfrage passen würde. Er ergänzt allerdings, dass es für Suchmaschinen dann sehr schwer sein könnte, wenn man eine Seite mit ganz neuen tollen Schuhen hätte, diese Seite innerhalb der Unzahl der anderen Seite auch zu finden und hervorzuheben. Aber auch dafür gibt es eine Lösung und zwar Google über eine aktuelle Sitemap mitzuteilen, dass es etwas neues gibt und wo es genau liegt.

Da viele Seiten mittlerweile sowohl als „http“, als auch als „https“ zu finden sind tritt das Problem mit „www“ und ohne „www“ wieder in einem neuen Kontext auf.  Auch dazu sagt Andrey Lipattsev, dass dies der Natur des Internet entsprechen würde und seinem technischen Aufbau und dass Google damit gut klar käme.

„Duplicate Content“ bzw. „Doppelte Inhalte“ und „Canonical Tag“

Was ist ein „Canonical Tag“?
Ein „Canonical Tag“ ist eine Angabe in den Metadaten einer Webseite, welches diejenige Webseite ist, die bei mehrfach verfügbaren Inhalten als die Hauptseite anzusehen ist und von den Suchmaschinen angezeigt werden soll.

In Bezug auf den „Canonical Tag“ sagt Johannes Müller von Google Zürich, dass die Suchmaschine dieses als „Hint“, also „Hinweis“ nehmen würde um es in die Berechnung seiner Suchergebnisse einfließen zu lassen und sehr wahrscheinlich auch diejenige Seite anzeigen wird, die im „Canonical Tag“ angegeben wird.
Versuche hab gezeigt, dass das Wort „Hint“ etwas zu vorsichtig ausgedrückt ist und Google zu fast einhundert Prozent diesem „Hinweis“ im „Canonical Tag“ auch folgt.

„Duplicate Content“ und „Structured Data“ („Strukturierte Daten“ wie z. B. Schema.org)

Mit strukturierten Daten kann man innerhalb der normalen Webseitenprogrammierung zusätzlich Informationen unterbringen, die vom normalen Nutzer nicht gesehen werden, die aber den Suchmaschinen helfen die Angaben innerhalb einer Webseite richtig einzuordnen.
Man kann z. B. sagen „dies ist die Hauptadresse“ oder „dies ist eine Person und sie hat diese Funktion innerhalb der Firma“. Dies hilft einer Suchmaschine natürlich enorm, da der Webmaster schon einen Teil der komplexen Einordnung von Gegebenheiten für Google vornimmt. Der Webmaster kreiert quasi schon eine Struktur die sich an ein vorgegebenes Muster hält (z. B. Schema.org) und die Suchmaschine kann genau diese Struktur direkt übernehmen.

Auch innerhalb von strukturieren Daten kann man „Duplicate Content“ Hinweise hinterlegen, welches die Hauptinhalte sind oder wo sich das Original eines Inhaltes befindet.  „mainEntityOfPage“ ist bei Schema.org eine solche Bezeichnung.

Johannes Müller von Google Schweiz warnt aber natürlich sofort, da Google schon immer sehr darauf bedacht war, dass Suchmaschinen nicht ausgetrickst werden und die sogenannten „Crawler“, mit denen das Netz durchsucht wird, auch genau das sehen, was der normale User sieht.
(Z. B. ist Text, der die gleiche Farbe wie der Hintergrund hat, für den normalen User nicht sichtbar, für die Suchmaschinen aber schon. Achtung, dies ist ein sehr einfaches Beispiel, das Google längst erkennt.)
Bei strukturierten Daten betont Johannes Müller deshalb, dass man die Inhalte so gut es geht aber auch auf der Webseite direkt, also dem User sichtbar macht und nicht mit strukturierten Daten „versteckt“.

„Duplicate Content“ und robots.txt

Was ist „robots.txt“?
Dies ist eine Datei mit der man Suchmaschinen darauf hinweist, welche Inhalte einer Webseite durchsucht werden sollen und welche nicht. Dies kann sich auf einzelne Seiten, Daten (z.B. Bilder) oder auf ganze Ordner beziehen.

Man kann mit Hilfe der Datei robots.txt verhindern, dass doppelte Inhalt, also „Duplicate Content“ von den Programmen, die das Internet für die Suchmaschinen durchsuchen, überhaupt durchsucht werden. Hier ist jedoch darauf zu achten, dass wenn Links von außen auf eine mit Hilfe von robots.txt ausgeschlossene Seite weisen dann verloren gehen, da Google diese Seite schlichtweg nicht findet und man „Link-Power“ verschenkt.

Zusammenfassung „Duplicate Content“ 2016:

Zusammenfassend lässt sich feststellen, dass Google wahrscheinlich viele neue Datenzentren gebaut hat und deshalb besser mit doppelten Inhalten („Duplicate Content“) klar kommt als zuvor. Am Ende bleibt das Credo das immer und immer wieder von Google betont wird, das lautet: einzigartiger guter Inhalt, der sich von anderen Inhalten eindeutig unterschiedet, ist der Schlüssel zum Erfolg.
Ob man nun die Herstellerangabe für ein Produkt in einem Shop verwendet oder die Beschreibung einer Person eines Unternehmens mehrfach auf der Internetseite auftritt ist Google im Grunde egal, da es sich dann einfach auf die anderen Bereiche konzentriert um herauszufinden, ob es dort etwas relevantes gibt, das diese Seite von den anderen Seiten hervorhebt und es deshalb wahrscheinlicher wird, dass die Seite in den Suchergebnissen auch angezeigt wrid.



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: http://fotorama.io/customize/captions/

 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: https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/Image.html

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



DCE update

DCE Dynamic Content Element für TYPO3 – Achtung beim Upgrade von 1.1.3 zu 1.2.3

Achtung beim Upgrade der TYPO3 Extension DCE von Version 1.1.3 oder darunter auf die aktuelle Version (Februar 2016) 1.2.3, sind nach der normalen Installation noch zusätzliche Skripte auszuführen, die sich im Install-Tool unter „Upgrade-Wizards“ verstecken.

Ohne diese Skripte verliert das DCE den Kontakt zu fast allen Inhaltselementen und die Website bleibt weiß. CSS-Einstellungen, Bilder aus dem FAL und Inhalte anderer Extensions (z.B. tt_news) bleiben natürlich erhalten.

Es geht um Namensräume bei Fluid-Templates, Datenbankrelationen von n:m zu 1:n und Flexform Sheets Indentifizierer.

Näheres dazu findet man im Wiki des Entwicklers:



Autor: Thomas Hezel

bye bye IE

IE gibt auf – der letzte Abgesang des Internet Explorers

Microsoft stellt nun auch den Support für die Internet Explorer Versionen 8, 9 und 10 ein. Damit werden Millionen von Computern zu Sicherheitsrisiken.

Sie sollten, falls Sie immer noch einen Internet Explorer in einer Version unter 11 benutzen, sich sofort davon verabschieden und am besten zum freien und offen entwickelten Firefox Browser wechseln, von dem man als einzigem großen Browser weiß, was er wirklich auf dem eigenen Computer macht:

Der neue Firefox Browser – Open Source für mehr Datensicherheit!

(Google Chrome schickt z.B. Ihre ganzen Lesezeichen zu Google um sie dort auszuwerten und zu speichern. Google will wissen, was Ihnen wichtig ist und für was Sie sich interessieren.)

Eine Ära geht zu Ende, eine Ära mit zweitweise überwältigendem Erfolg des Internet Explorers. Der Absturz begann, nachdem zwischen 2003 und 2010 Mozilla Firefox, Google Chrom und Apple Safari langsam den Markt übernahmen.

10,4 % lautet die aktuelle Zahl (Januar 2016) für den prozentualen Anteil des Internet Explorers an den verwendeten Internet-Browsern. Von der Gesamtheit aller Internet Explorer sind davon immerhin noch ca. 7% Internet Explorer 7 und 8, die jedoch schon seit 2014, wie auch das Betriebssystem XP, nicht mehr von Microsoft unterstütz werden. Siehe hierzu auch den früheren Artikel: Hallo i-genwillig! Adieu Internet Explorer Version 6, 7 und 8!

Mit der neuen Version 10 des Betriebssystems Windows liefert Microsoft einen neuen Browser mit dem Namen „Edge“ aus. Dieser hat ein neues Rendersystem (Umsetzung des Programmcodes in eine Computeranzeige), das jedoch 2016 noch etliche Fehler und Unzulänglichkeiten enthält.

In den letzten Jahrzehnten haben Programmierer den Internet Explorer „zu hassen“ gelernt, da, wenn man Normkonform programmierte und z.B. auf Mozilla Firefox eine perfekte Anzeige hatte, man auf dem IE immer seltsame Überraschungen erlebte. Das bedeutete, man programmierte eine Internetseite für alle „normalen“ Browser und dann nochmals etliche Sondereinstellungen für den Internet Explorer, so dass die Seite auch dort zumindest einigermaßen so aussah, wie man es beabsichtigt hatte. Das führte dazu, dass sich der Wahlspruch verbreitete:

Microsoft liefert mit seinem Betriebsystem nur deshalb den Internet Explorer aus, damit die Benutzer mit dem Internet Explorer beim Einrichten des Computers sich einen anderen, ordentlichen Browser herunterladen können.

Die Tatsache, dass man beim ersten Benutzen eines Windows-Computer zwangsläufig den Internet Explorer benutzen musste verfälschte auch etliche Statistiken. Man geht davon aus, dass die tatsächliche Nutzung unter den veröffentlichen Prozentzahlen liegt. Dennoch bin ich immer wieder überrascht, dass selbst deutsche mittelständische Unternehmen, die Hightech für die Automobilindustrie herstellen, im Jahr 3 nach Snowden tatsächlich noch Windows XP und den Internet Explorer 6 benutzen.
Insgesamt ging der Marktanteil jedoch schnell und rapide in den letzten Jahren nach unten.

In seiner Verzweiflung nahm Microsoft die Ablehnung des Internet Explorers in seine Werbung mit auf und versuchte hilflos zu vermitteln, dass der Browser in seiner neuesten Version vielleicht auch hier und da ganz gute Seiten hätte:

Do you know this guy?

The Browser You Loved To Hate | Internet Explorer

Doch auch die Selbstironie half nichts mehr und so hat man jetzt die Flinte ins Korn geworfen und versucht es mit „Edge“ nochmals von vorne. Hoffentlich aber diesmal mit dem Schwerpunkt auf ein konformes Verhalten mit den Regeln des World Wide Web Consortium, so dass man nicht alle Webseiten für normkonforme Browser und dann nochmals extra für „Edge“ programmieren muss.

Davon abgesehen, sollte jeder der auch nur ein wenig von den Vorgängen um die NSA und von der Übermacht weniger amerikanischer Internet-Konzerne verstanden hat, auf Open Source und damit auf den Mozilla Firefox setzen. Denn nur hier kennt man den Programmcode des Browsers und weiß, was er wirklich mit den Daten der Nutzer macht. Google Chrome liebt es zum Beispiel ständig nach Hause zu telefonieren und zu petzen, was der Nutzer denn gerade so macht.

Petzen mochten wir schon in der Schule nicht und sollten es uns auch nicht in der weiten Welt des World Wide Web gefallen lassen!

Autor: Thomas Hezel