Fluid Archive - Typo3 Wissensdatenbank

Fluid Snippet: f:format.crop und f:format.raw gleichzeitig einsetzen

In einem aktuellen Typo3-Projekt benötigte ich bei einer Ausgabe in Fluid f:format.crop und f:format.raw gleichzeitig. In meinem Fall in der Typo3 Extension News.

Das schaut dann wie folgt aus:

{newsItem.bodytext -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.raw()}

1	{newsItem.bodytext -> f:format.crop(maxCharacters: '{settings.cropMaxCharacters}', respectWordBoundaries:'1') -> f:format.raw()}

DCE: Select field (manuelle Liste) mit if in Fluid abfragen

An dieser simplen Aufgabe bin ich einige Zeit gesessen. Wenn man z.B. im DCE für die Backend-Fields die Möglichkeit braucht mehrere Optionen auszuwählen.

Die Aufgabenstellung bei mir war:

Für eine Gruppe von Autohäusern stehen drei Automarken zu Verfügung. Für jeden Standort sollten die angebotenen Marken am Standort gewählt werden können.

Ich habe das Content Element mit der Extension DCE, die ich wirklich gerne verwende, erstellt. Als Feld habe ich ein Select-Feld verwendet, definiert als manuelle Liste mit drei Einträgen:

<config>
    <type>select</type>
    <items type="array">
        <numIndex index="0" type="array">
            <numIndex index="0">Peugeot</numIndex>
            <numIndex index="1">0</numIndex>
        </numIndex>
        <numIndex index="1" type="array">
            <numIndex index="0">Citroen</numIndex>
            <numIndex index="1">1</numIndex>
        </numIndex>
        <numIndex index="2" type="array">
            <numIndex index="0">Mazda</numIndex>
            <numIndex index="1">2</numIndex>
        </numIndex>
    </items>
    <minitems>0</minitems>
    <maxitems>3</maxitems>
    <dce_load_schema>1</dce_load_schema>
</config>

<type>select</type>

<numIndex index="0">Peugeot</numIndex>

</numIndex>

<numIndex index="0">Citroen</numIndex>

</numIndex>

<numIndex index="0">Mazda</numIndex>

</numIndex>

</items>

<dce_load_schema>1</dce_load_schema>

</config>

Im Fluidtemplate wollte ich die Abfrage mittels einem IF-Konstrukt lösen:

<f:if condition="{field.hersteller} == 0">
  <f:then>
    <img src="fileadmin/templates/pics/peugeot-logo.svg" />
  </f:then>
</f:if>
<f:if condition="{field.hersteller} == 1">
  <f:then>
    <img src="fileadmin/templates/pics/citroen-logo.svg" />
  </f:then>
</f:if>
<f:if condition="{field.hersteller} == 2">
  <f:then>
    <img src="fileadmin/templates/pics/mazda-logo.svg" />
  </f:then>
</f:if>

<f:if condition="{field.hersteller} == 0">

<f:then>

</f:then>

</f:if>

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

<f:then>

</f:then>

</f:if>

<f:if condition="{field.hersteller} == 2">

<f:then>

</f:then>

</f:if>

Das klappte aber nicht – hat die manuelle Liste des Elementes mehr als zwei Optionen lässt sie sich mittels Fluid IF so nicht mehr abfragen. (Bei zwei Optionen kann auf wahr/falsch abgefragt werden.)

Und das klappte deswegen nicht, da ein Fluid-Debug zeigte, dass die Variable kein Array ist, sondern ein String:

hersteller => '0,1,2' (5 chars)

1	hersteller => '0,1,2' (5 chars)

Die Lösung:

Um diesen String nun umzuwandeln hilft dce:explode (danke an die Hilfe von Armin und Erik im #dce-Channel von Slack):

<f:for each="{field.hersteller -> dce:explode(delimiter:',')}" as="autologos">
  <f:if condition="{autologos} == 0">
    <f:then>
      <img src="fileadmin/templates/pics/peugeot-logo.svg" />  
    </f:then>
  </f:if>
  <f:if condition="{autologos} == 1">
    <f:then>
      <img src="fileadmin/templates/pics/citroen-logo.svg" />
    </f:then>
  </f:if>
  <f:if condition="{autologos} == 2">
    <f:then>
      <img src="fileadmin/templates/pics/mazda-logo.svg" />
    </f:then>
  </f:if>
</f:for>

<f:for each="{field.hersteller -> dce:explode(delimiter:',')}" as="autologos">

<f:if condition="{autologos} == 0">

<f:then>

</f:then>

</f:if>

<f:if condition="{autologos} == 1">

<f:then>

</f:then>

</f:if>

<f:if condition="{autologos} == 2">

<f:then>

</f:then>

</f:if>

</f:for>

Namespace nicht vergessen:
{namespace dce=ArminVieweg\Dce\ViewHelpers}

Fluid in Typo3: Override Templates hat sich geändert

Der Typoscript Code um Templates zu überschreiben (override templates) hat sich geändert. Ich musste dies bei mir in Typo3 8.x ändern – und hab die Lösung erst nach einigem Suchen gefunden.

Die Typoscript lib hat sich geändert von lib.contentElement zu lib.fluidContent.

Richtig heisst der Typoscript-Code also um Templates in Fluid zu überschreiben:

lib.fluidContent {
   templateRootPaths {
      200 = fileadmin/ABCDE/Resources/Private/Templates/
   }
   partialRootPaths {
      200 = fileadmin/ABCDE/Resources/Private/Partials/
   }
   layoutRootPaths {
      200 = fileadmin/ABCDE/Resources/Private/Layouts/
   }
}

lib.fluidContent {

templateRootPaths {

200 = fileadmin/ABCDE/Resources/Private/Templates/

}

partialRootPaths {

200 = fileadmin/ABCDE/Resources/Private/Partials/

}

layoutRootPaths {

200 = fileadmin/ABCDE/Resources/Private/Layouts/

}

Typo3 Fluid: if Viewhelper (if – then – elseif – else)

Mit Typo3 8 wurde Fluid als Standalone Plugin weiterentwickelt und einigen Änderungen und Erweiterungen unterzogen. Da die Frage immer wieder mal auftaucht – hier eine kurze Übersicht die der if Viewhelper in Typo3 Fluid aufgebaut ist. Einmal in Typo3 7 und früher, einmal in Typo3 ab Version 8.

Fluid if Viewhelper in Typo3 7 und früher

Hier gab es das elseif-Konstrukt noch nicht, und man musste die if-Conditions in der Regel verschachteln:

<f:if condition="{variable} == 'bestimmterWert'">
    <f:then>
       // dann führe folgendes aus
    </f:then>
    <f:else>
        <f:if condition="{andereVariable} == 'bestimmterWert'">
            <f:then>
                // dann führe folgendes aus
            </f:then>
           <f:else>
               // dann führe diese Anweisungen aus
           </f:else>
        </f:if>
    </f:else>
</f:if>

<f:if condition="{variable} == 'bestimmterWert'">

<f:then>

// dann führe folgendes aus

</f:then>

<f:else>

<f:if condition="{andereVariable} == 'bestimmterWert'">

<f:then>

// dann führe folgendes aus

</f:then>

<f:else>

// dann führe diese Anweisungen aus

</f:else>

</f:if>

</f:else>

</f:if>

Eine Ausnahme gab es, um ohne die if-Verschachtelung auszukommen – man konnte via Arrays die logische UND-Verknüpfung (&&) wie folgt nachbauen, und sich somit das Verschachteln der if-Anweisungen sparen:

<f:if condition="{0: jahre, 1: monate} == {0: vergleichsJahr, 1: vergleichsMonat}">
// dann führe folgendes aus
</f:if>

<f:if condition="{0: jahre, 1: monate} == {0: vergleichsJahr, 1: vergleichsMonat}">

// dann führe folgendes aus

</f:if>

Fluid if-Viewhelper in Typo3 8 und höher

<f:if condition="{variable} == 'bestimmterWert'">
     <f:then>
          // dann führe folgendes aus
     </f:then>
     <f:else if="{andereVariable} == 'bestimmterWert'">
          // dann führe folgendes aus
     </f:else>
     <f:else>
         // für den Rest führe folgendes aus..
     </f:else>
</f:if>

<f:if condition="{variable} == 'bestimmterWert'">

<f:then>

// dann führe folgendes aus

</f:then>

<f:else if="{andereVariable} == 'bestimmterWert'">

// dann führe folgendes aus

</f:else>

<f:else>

// für den Rest führe folgendes aus..

</f:else>

</f:if>

Möglich ist auch, diese Abfragen mit logischen UND bzw. ODER in kürzerer Schreibweise zu schreiben:

<f:if condition="({variableOne} && {variableTwo}) || {variableThree} || {variableFour}">
// Done if both variable one and two evaluate to true,
// or if either variable three or four do.
</f:if>

<f:if condition="({variableOne} && {variableTwo}) || {variableThree} || {variableFour}">

// Done if both variable one and two evaluate to true,

// or if either variable three or four do.

</f:if>

Weitere Beispiele:

<f:if condition="{variable} || {andereVariable}">
    // dann führe folgendes aus
</f:if>

<f:if condition="{variable} || {andereVariable}">

// dann führe folgendes aus

</f:if>

Ist wahr, wenn eine der beiden Variablen gesetzt ist.

Inline Schreibweise von if-Conditions:

If – Abfragen können auch inline geschrieben werden. Das ist z.B. sinnvoll, wenn in Fluid-Templates je nach gesetzten Variablen oder bei bestimmten Varialben-Werten bestimmte CSS-Klassen ausgegeben werden sollen.

Beispielsweise wenn im Backend bei Inhaltselementen im Reiter „Erscheinungsbild“ bestimmte Layouts, Frames oder Abstände ausgewählt werden.

Hier die generelle Schreibweise:

{f:if(condition: variable1, then: 'bestimmterWert')}

// Hier wird "bestimmterWert" ausgegeben, wenn die Variable "variable1" gesetzt ist

{f:if(condition: variable1, then: 'bestimmterWert')}

// Hier wird "bestimmterWert" ausgegeben, wenn die Variable "variable1" gesetzt ist

{f:if(condition: '{variable1} == "Yes"', then: 'bestimmterWert')}

// Hier wird "bestimmterWert" ausgegeben, wenn die Variable "variable1" dem String "Yes" entspricht

{f:if(condition: '{variable1} == "Yes"', then: 'bestimmterWert')}

// Hier wird "bestimmterWert" ausgegeben, wenn die Variable "variable1" dem String "Yes" entspricht

{f:if(condition: '{variable1} == 1', then: 'bestimmterWert')}

// Hier wird die Variable "bestimmterWert" ausgegeben, wenn die Variable "variable1" der Zahl 1 entspricht.

{f:if(condition: '{variable1} == 1', then: 'bestimmterWert')}

// Hier wird die Variable "bestimmterWert" ausgegeben, wenn die Variable "variable1" der Zahl 1 entspricht.

{f:if(condition: '{variable1} == 1', then: 'bestimmterWert', else: 'andererWert')}

// Wenn die Variable "variable1" der Zahl 1 entspricht wird "bestimmterWert" ausgegeben, in allen anderen Fällen "andererWert".

{f:if(condition: '{variable1} == 1', then: 'bestimmterWert', else: 'andererWert')}

// Wenn die Variable "variable1" der Zahl 1 entspricht wird "bestimmterWert" ausgegeben, in allen anderen Fällen "andererWert".

Neue Features von FLUID in Typo3 8 LTS (Typo3 8.7)

Mit FLUID kann man nun komplexe, verschachtelte und gruppierte Abfragen durchführen, wie zum Beispiel:

<f:if condition="({variableOne} && {variableTwo}) || {variableThree} || {variableFour}">
// Done if both variable one and two evaluate to true,
// or if either variable three or four do.
</f:if>

<f:if condition="({variableOne} && {variableTwo}) || {variableThree} || {variableFour}">

// Done if both variable one and two evaluate to true,

// or if either variable three or four do.

</f:if>

Es gibt nun die Möglichkeit, bei IF-Abfragen auch elseif-Schleifen abzufragen:

<f:if condition="{variableOne}">
<f:then>Do this</f:then>
<f:else if="{variableTwo}">
Do this instead if variable two evals true
</f:else>
<f:else if="{variableThree}">
Or do this if variable three evals true
</f:else>
<f:else>
Or do this if nothing above is true
</f:else>
</f:if>

<f:if condition="{variableOne}">

<f:then>Do this</f:then>

<f:else if="{variableTwo}">

Do this instead if variable two evals true

</f:else>

<f:else if="{variableThree}">

Or do this if variable three evals true

</f:else>

<f:else>

Or do this if nothing above is true

</f:else>

</f:if>

Neuer ViewHelper: f:or

Damit kann man verkettete Abfragen schnell durchführen – die erste Variable die nicht leer ist wird ausgegeben:

{variableOne -> f:or(alternative: variableTwo) -> f:or(alternative: variableThree)}

1	{variableOne -> f:or(alternative: variableTwo) -> f:or(alternative: variableThree)}

Typo3 8 LTS – Die Neuerungen

Typo3 8 LTS

Endlich – viele von uns haben schon auf die neue LTS Version von Typo3 gewartet – nun ist sie, 18 Monate nach der Typo3 7 LTS Version, erschienen. Und sie wartet mit ein paar wirklich tollen Neuerungen auf, hier die für mich persönlich wichtigsten Neuerungen:

Responsive Backend:
Es wurde weiter an dem Responsive Design im Backend gearbeitet – und man kann sagen, dass dieses nun komplett umgesetzt wurde.
Performance:
Die neue Typo3 8 LTS hat als Mindestanforderung PHP Version ab 7. Das hat zur Folge, dass das Typo3 Backend nun gefühlt sehr viel schneller ist. Fluid wurde komplett ausgelagert, was zudem zu einem schnelleren Backend führt.
Bildbearbeitung:
Auch hier hat man einige neue Features integriert und vorhandenes optimiert. Es ist nun möglich, das Seitenverhältnis zu definieren, ausserdem für Tablet und Smartphone-Varianten des Bildes Fokusbereiche zu definieren. Fazit: Sehr praktisch!
Rich Text Editor: CKEditor integriert
Der in die Jahre gekommene Editor HTMLArea wurde von CKEditor abgelöst – CKEditor ist sehr einfach zu integrieren und konfigurieren und hat ein paar tolle Features – unter anderem einen „Frontend-Editing“ – Modus, welcher in zukünftigen Versionen von Typo3 integriert werden soll.
FLUID
Auch bei der Sprache FLUID hat sich einiges getan – so hat man FLUID nun aus dem Typo3 Core entkoppelt und es gibt einige neue Features.

Eine Liste von allen Neuerungen kann man hier finden oder bei dem PDF „What’s New Slides“ (111 Seiten).

Typo3 Fluid: Debugging

Debug von bestimmten Variablen oder allen Variablen:

<f:debug title="Debug of MyArray">{myarray}</f:debug>
<f:debug title="All available variables">{_all}</f:debug>

1 2	<f:debug title="Debug of MyArray">{myarray}</f:debug> <f:debug title="All available variables">{_all}</f:debug>

Debug bis zu einer bestimmten Tiefe der Variable:

<f:debug maxDepth="3">{data}</f:debug>

1	<f:debug maxDepth="3">{data}</f:debug>

Um die Debug-Informationen nicht über der Webseite, sondern inline an der Stelle wo er vorkommt anzuzeigen kann folgender Code verwendet werden:

<f:debug inline="true">{data}</f:debug>

1	<f:debug inline="true">{data}</f:debug>