Typolink

Die Standardkonfiguration lautet:

1. <config>
2.    <type>input</type>
3.    <renderType>inputLink</renderType>
4.    <size>30</size>
5.    <eval>trim</eval>
6.    <softref>typolink,typolink_tag,images,url</softref>
7.    <fieldControl>
8.        <linkPopup>
9.            <options>
10.                <!--<blindLinkOptions>file,mail,page,spec,url</blindLinkOptions>-->
11.                <!--<blindLinkFields>class,params,target,title</blindLinkFields>-->
12.            </options>
13.        </linkPopup>
14.    </fieldControl>
15. </config>

Damit wird ein Eingabefeld erzeugt, welches das Standard-Eingabefenster für Verlinkungen in Typo3 öffnet. Es werden die üblichen Eingabemöglichkeiten erzeugt.

Diese können jedoch beeinflusst werden, indem man zum Beispiel die Optionen "mail" oder "params" ausblendet.

Die "Display Conditions" lassen sich zu jedem Elemententyp hinzufügen. Sie sorgen dafür, dass ein Element bei der Backendeingabe nur unter bestimmten Bedingungen angezeigt wird. 

Die "Display Conditions" lassen sich auf viele verschiedene Arten verwenden. Mit der direkt vorgegebenen Standard-Version kann überprüft werden, ob ein bestimmtes Feld einen bestimmten Wert hat:

1. <displayCond>FIELD:settings.relatedField:=:1</displayCond>

Dabei wird auf demselben Tab also demselben "Sheet" überprüft, ob das Feld mit der Variablen "relatedField" auch dem Wert "1" entspricht. Stimmt dies, so wird das Feld eingeblendet. 

Es kann aber auch eine Oder-Abfrage

1. <displayCond>
2.  <OR>
3.    <numIndex index="0">FIELD:settings.detailauswahl:=:1</numIndex>
4.    <numIndex index="1">FIELD:settings.detailauswahl:=:2</numIndex>
5.  </OR>
6. </displayCond>

und eine Und-Abfrage gestellt werden:

1. <displayCond>
2.  <AND>
3.    <numIndex index="0">FIELD:settings.detailauswahl:=:1</numIndex>
4.    <numIndex index="1">FIELD:settings.bildauswahl:=:2</numIndex>
5.  </AND>
6. </displayCond>
    

Die Display Conditions können aber nicht nur innerhalb eines Tabs, sondern auch Tab übergreifend (Sheet übergreifend), innerhalb einer Sektion und sogar Sektion und Tab übergeifend verwendet werden. Und durch einen Trick kann man sogar ganze Tabs, bzw Sheets ausblenden, wenn sie nicht benötigt werden.

Mit Hilfe von 

1. <displayCond>FIELD:sheet.layouttab.settings.layout:=:1</displayCond>

wird auf dem Tab (sheet) mit der Variablen "layouttab" das Feld mit der Variablen "layout" überprüft. Dieser Code funktioniert auch aus einer Sektion heraus. Das heißt, man kann auf einem anderen Tab bestimmen, welche Elemente in der Sektion angezeigt werden.

Soll innerhalb einer Sektion ein Wert abgefragt werden, so wird 

1. <displayCond>FIELD:layout:=:1</displayCond>

dazu verwendet.

Will man einen ganzen Tab erst bei Auswahl einer bestimmten Option zeigen, so kann die <displayCond> ganz einfach bei jedem der Felder auf dem ensprechenden Tab eingefügt werden. So wird ein leerer Tab erzeugt. Leere Tabs werden jedoch im Backend nicht gezeigt. Das heißt der Tab erscheint erst, wenn die Option gewählt wurde.

TYPE:FAL

Mit Hilfe der "File Abstraction Layer" kann eine beliebige Datei aus dem fileadmin ausgewählt und eingebunden werden. Dabei wird zwischen zwei Typen unterschieden, einmal das normale FAL und dann das FAL für die Sectionen.

File Abstraction Layer (recommended)

Die Standard Konfiguration lautet:

1. <config>
2.   <type>inline</type>
3.   <foreign_table>sys_file_reference</foreign_table>
4.   <foreign_field>uid_foreign</foreign_field>
5.   <foreign_sortby>sorting_foreign</foreign_sortby>
6.   <foreign_table_field>tablenames</foreign_table_field>
7.   <foreign_match_fields>
8.       <fieldname>{$variable}</fieldname>
9.   </foreign_match_fields>
10.   <foreign_label>uid_local</foreign_label>
11.   <foreign_selector>uid_local</foreign_selector>
12.   <foreign_selector_fieldTcaOverride>
13.       <config>
14.           <appearance>
15.               <elementBrowserType>file</elementBrowserType>
16.               <elementBrowserAllowed>gif,jpg,jpeg,tif,tiff,bmp,pcx,tga,png,pdf,ai,svg</elementBrowserAllowed>
17.           </appearance>
18.       </config>
19.   </foreign_selector_fieldTcaOverride>
20.   <foreign_types type="array">
21.       <numIndex index="2">
22.           <showitem>--palette--;LLL:EXT:lang/locallang_tca.xlf:sys_file_reference.imageoverlayPalette;imageoverlayPalette,--palette--;;filePalette</showitem>
23.       </numIndex>
24.   </foreign_types>
25.   <minitems>0</minitems>
26.   <maxitems>99</maxitems>
27.   <appearance>
28.       <useSortable>1</useSortable>
29.       <headerThumbnail>
30.           <field>uid_local</field>
31.           <width>45c</width>
32.           <height>45</height>
33.       </headerThumbnail>
34.       <showPossibleLocalizationRecords>0</showPossibleLocalizationRecords>
35.       <showRemovedLocalizationRecords>0</showRemovedLocalizationRecords>
36.       <showSynchronizationLink>0</showSynchronizationLink>
37.       <useSortable>1</useSortable>
38.       <enabledControls>
39.           <info>1</info>
40.           <new>0</new>
41.           <dragdrop>0</dragdrop>
42.           <sort>1</sort>
43.           <hide>1</hide>
44.           <delete>1</delete>
45.           <localize>1</localize>
46.       </enabledControls>
47.       <createNewRelationLinkTitle>LLL:EXT:frontend/Resources/Private/Language/locallang_ttc.xlf:images.addFileReference</createNewRelationLinkTitle>
48.   </appearance>
49.   <behaviour>
50.       <localizationMode>select</localizationMode>
51.       <localizeChildrenAtParentLocalization>1</localizeChildrenAtParentLocalization>
52.   </behaviour>
53.   <dce_load_schema>1</dce_load_schema>
54.   <dce_get_fal_objects>1</dce_get_fal_objects>
55. </config>

Mit "File Abstraction Layer (recommended)" lässt sich eine Datei im Fileadmin auswählen und einbinden.

Variablen

Mit Hilfe von

1. <f:variable name="myvar" value="{field.anzahl}" />

lässt sich eine Variable namens {myvar} erzeugen. Diese kann zum Beispiel so verwendet werden:

1. <f:if condition="{myvar} > 8">

Wenn eine "Manuel List" erzeugt worden ist und man aus dieser eine Reihe von abfragbaren Variablen erzeugen will, geht dies zum Beispiel so:

1. <f:if condition="{field.einstellungen}">
2.   <f:then>
3.       <f:for each="{field.einstellungen -> dce:explode(delimiter:',')}" as="item" iteration="iterator">
4.           <f:variable name="{item}" value="1" />
5.       </f:for>        
6.   </f:then>
7. </f:if>

Abfragbar wäre das dann mit: 

1. <f:if condition="{item}">

Bilder einbauen

Wenn ein Bild als "File Abstraction Layer"-Element hinzugefügt wird, muss zusätzlich eine FOR-Schleife verwendet werden, da das FAL ein Array zurückgibt.

1. <f:for each="{field.image}" as="item" iteration="iterator">
2.    <f:image image="{item}" />
3. </f:for>

Mit Hilfe der Angabe "width" und "cropVariant" kann das Bild verkleinert und zugeschnitten werden:

1. <f:for each="{field.image}" as="item" iteration="iterator">
2.    <f:image image="{item}" width="200" cropVariant="header" />
3. </f:for>

Wenn das Bild als Hintergrundbild verwendet werden soll, muss dazu der <f:uri.image>-Viewhelper verwendet werden:

1. <f:for each="{field.image}" as="item" iteration="iterator">
2.    <div style="background-image:url({f:uri.image(src:'{item.uid}', treatIdAsReference:'1')})"></div>
3. </f:for>

Auf die Eigenschaften des Bildes kann mit 

• {item.title},
• {item.alternative},
• {item.description} und
• {item.link}

zugegriffen werden. 

Da der Link aber nicht die Seiten Id, sondern den direkten Typo-Linkt zurück gibt, nämlich "t3://page?uid=2", muss man den <f:link.typolink>-Viewhelper verwenden.

1. <f:link.typolink parameter="{item.link}" target="_blank" class="ico-class" title="some title" useCacheHash="true">
2.   Linktext
3. </f:link.typolink>

Responsive Bilder

Responsive Bilder können wieder mit Hilfe des <f:uri.image>-Viewhelpers eingebaut werden:

1. <f:for each="{field.image}" as="item" iteration="iterator">
2.    <picture>
3.        <source srcset="<f:uri.image src='{item.uid}' treatIdAsReference='1' width='700' cropVariant='header' />" media="(max-width: 768px)">
4.        <source srcset="<f:uri.image src='{item.uid}' treatIdAsReference='1' width='1000' cropVariant='header' />" media="(max-width: 1024px)">
5.        <source srcset="<f:uri.image src='{item.uid}' treatIdAsReference='1' width='1500' cropVariant='header' />">
6.      <f:image image="{item}" width="200" cropVariant="header"/>
7.    </picture>
8. </f:for>

Bild-Auswahl nach Name oder Dateiendung

Mit Hilfe von "{item.name}" kann auf den Dateinamen eines Bildes zurückgegriffen werden. Dieser kann dann direkt geprüft werden, oder mit Hilfe des <v:condition.string.contains>-Viewhelpers auf einen bestimmten Substring geprüft werden.

Konfiguration

In "{item.extension}" findet sich die Dateiendung eines Bildes, so kann zum Beispiel für svg-Dateien eine Ausnahme hinzugefügt werden.

Mehrsprachigkeit

Mit einem ganz einfachen Trick kann man schnell an einer Stelle einen verschiedensprachigen Button einbauen. Die Variable {page.sys_language_uid} gibt die aktuelle Sprache der Seite zurück:

1. <f:if condition="{page.sys_language_uid}==0">
2.  <f:then>mehr</f:then>
3.  <f:else if="{page.sys_language_uid}==1">more</f:else>
4.  <f:else>plus</f:else>
5. </f:if>

Wenn man zum Beispiel einen Button einbauen möchte, der immer den gleichen Text enthalten soll, aber an vielen verschiendenen Stellen eingesetzt wird, so ist es leichter, ihn an einer zentralen Stelle zu definieren. Dies ist auch praktischer, wenn das, was übersetzt werden muss, später an einen Übersetzer gegeben wird. Dann muss nicht viel im Code geändert werden, sondern nur die eine Datei.
Das geht mit Hilfe einer XML Datei und einem Verweis auf diese. Man erstellt also eine lang.xml mit folgendem Inhalt:

1. <?xml version="1.0" encoding="utf-8" standalone="yes" ?>
2. <T3locallang>
3.  <meta type="array">
4.    <typ>module</type>
5.    <description>Language labels for the DCEs in backend</description>
6.  </meta>
7.  <data type="array">
8.    <languageKey index="de" type="array">
9.      <label index="buttontext">Weiter</label>
10.    </languageKey>
11.    <languageKey index="default" type="array">
12.      <label index="buttontext">Next</label>
13.    </languageKey>
14.  </data>
15. </T3locallang>

Und schreibt dann ins FLUID-Template:

1. <a href="#">
2.  <f:translate key="LLL:fileadmin/lang/dce.xml:buttontext" />
3. </a>

Auf diese Weise können mehrere Sprachen definiert werden. Wichtig ist nur zu wissen, das Englisch, also "en" immer "default" ist. Auch wenn die eigentliche Default-Sprache Deutsch ist.

PDF einbinden

Ein PDF kann mit Hilfe von FAL-Objekten genauso wie ein Bild oder Video eingefügt werden. Wenn man aber hier den selben Code wie bei einem Bild verwendet, wird lediglich ein Bild der PDF angezeigt. 

Will man einen Button "Download" erzeugen, bei dem sich die PDF-Datei öffnet, so muss dies mit "publicUrl" umgesetzt werden:

1. <f:for each="{field.pdf}" as="pdf">
2.  <a href="{pdf.publicUrl}" target="_blank">Download</a>
3. </f:for>

Gleichzeitig kann man auch ein Bild der PDF anzeigen, bei dem sich dann auch der Download auf Klick öffnet:

1. <f:for each="{field.pdf}" as="pdf">
2.  <a href="{pdf.publicUrl}" target="_blank">
3.    <f:image image="{pdf}"/>
4.  </a>
5. </f:for>

Andere DCEs oder tt-content-Elemente einbinden und anzeigen

Wenn in einem "Nest DCE content element" oder eine "automatical list" ein oder mehrere Elemente ausgewählt wurden, kann mit Hilfe folgender Konfiguration auf alle Variablen des anderen DCEs zugegriffen werden:

1. <f:for each="{field.image}" as="item" iteration="iterator">
2.    {item.text}
3. </f:for>

In einigen DCE-Versionen muss "{item.get.text}" verwendet werden, aber dieses Problem wurde in den neueren DCE-Versionen behoben.

DCEs exportieren

Mit Hilfe der Standard Export-Funktion von Typo können auch DCEs ganz leicht aus einem bestehenden System in ein neues exportiert werden. Dazu geht man direkt aus der DCE Ansicht über den Button "Die Listenansicht aufrufen". Dort dann den Export auswählen und, ganz wichtig, unter "Tabellen einschließen" muss überall "tx_dce_domain_model_dce" und "tx_dce_domain_model_dcefield" ausgewählt werden, damit nicht nur die Templates, sondern auch die Eingabefelder exportiert werden. Es können auch nur einzelne DCEs ausgewählt werden, in dem man alle ausschließt, die nicht benötigt werden. Dann kann man den Export als .t3d Datei herunterladen.

Importieren kann man das Ganze, in dem man auf der Root-Ebene auf das Typo3 Zeichen klickt und dann "Importieren aus .t3d" auswählt. Dann werden alle gespeicherten DCEs diesem System hinzugefügt und können sofort verwendet werden.

DCE-Container sortieren

DCE-Container Elemente alphabetisch sortieren

Dazu wird das Template ganz normal für jedes Element definiert und der DCE-Container folgendermaßen geändert:

1. <f:section name="main">
2.  <div class="team">
3.    <f:for each="{dces->v:iterator.sort(order: 'ASC', sortBy: 'item.value')}" as="dce">
4.      {dce.render -> f:format.raw()}
5.    </f:for>
6.  </div>
7. </f:section>

Es wird zusätzlich die Extension VHS installiert und oben in das Template geschrieben:

1. {namespace v=FluidTYPO3\Vhs\ViewHelpers}

DCE-Container Elemente nach bestimmten Werten sortieren.

Dazu wird zuerst mit  <f:alias> das Array angelegt, in dem sich die Werte befinden. Danach kann eine for-Schleife über das Array laufen, für jede DCE-Instanz des Containers wird überprüft, ob diese Instanz zu dem entsprechenden Wert passt, dann wird diese entweder ausgegeben oder im nächsten Array Durchlauf wieder überprüft.

1. <f:section name="main">
2.  <f:alias map="{alpha: {obst: 'Obst', gemuese: 'Gemüse'}}">
3.    <f:for each="{alpha}" as="wert">
4.      <h2>{wert}</h2>
5.      <f:for each="{dces}" as="dce" iteration="iterator">    
6.        <f:if condition="{dce.sorte}=={wert}">
7.          <f:then>
8.            {dce.name}
9.          </f:then>
10.        </f:if>
11.      </f:for>
12.    </f:for>
13.  </f:alias>
14. </f:section>

Wäre die Eingabe in den Instanzen nun {dce.name} -> {dce.sorte}:

• Bohnen -> Gemüse
• Erdbeeren -> Obst
• Brokkoli -> Gemüse
• Äpfel -> Obst

Dann ergibt sich die Ausgabe:

• Obst
  • Erdbeeren
  • Äpfel
• Gemüse
  • Bohnen
  • Brokkoli

Substring auslesen

Wenn aus einer Reihe von Bildern, die in einem FAL-Element eingebunden wurden, anhend des Dateinamens ein bestimmtes Bild ausgewählt werden soll, so kann man dafür denVHS ViewHelper <v:condition.string.contains> verwenden:

1. <f:for each="{field.image}" as="image" iteration="iterator">
2.  <v:condition.string.contains haystack="{image.name}" needle="icons">
3.    <f:then></f:then>
4.    <f:else></f:else>
5.  </v:condition.string.contains>
6. </f:for>

Der ViewHelper untersucht den gegebenen String nach dem angegebenen Sub-String. Danach wird dann entweder der "then" oder der "else" Teil ausgeführt.

Es wird zusätzlich die Extension VHS installiert und oben in das Template geschrieben:

1. {namespace v=FluidTYPO3\Vhs\ViewHelpers}

Konfiguration Backend Template

Alle Eingabe-Felder, außer FAL Elemente, können im Backend-Template genauso ausgegeben werden, wie im normalen Template für das Frontend. Die FAL Elemente geben allerdings einen Fehler zurück, wenn kein Element vorhanden ist. Es muss dafür eine Array-Prüfung eingebaut werden, damit der Code nicht ausgeführt wird, wenn das Feld leer ist:

1. <f:section name="bodytext">
2.  <f:if condition="{field.image -> dce:isArray()}">
3.    <f:then>
4.      <f:for each="{field.image}" as="image" iteration="iterator">
5.        <img src="<f:uri.image src='{image.uid}' treatIdAsReference='1' width='200' cropVariant='free' />" style="padding:10px;" width="200" /><br>
6.      </f:for>
7.    </f:then>
8.  </f:if>
9. </f:section>

Mit Hilfe von Inline-Styles lassen sich alle Elemente in der Backend-Ansicht verändern.

Konfiguration der Detailseite

Damit eine Detailseite geöffnet werden kann muss zunächst ein Button im normalen Template untergebracht werden. Dieser lautet zum Beispiel:

1. <f:link.page additionalParams="{detailDceUid:contentObject.uid}">Weiter</f:link.page>

Durch diesen wird auf der aktuellen Seite die ID dieses speziellen DCE-Objektes aufgerufen und die zusätzlichen Informationen ausgelesen, die sich auf der Detailseite befinden. Mit dem Button:

1. <f:link.page pageUid="{page.uid}">Zurück</f:link.page>

kann dann wieder zur Original-Seite zurückgekehrt werden.