TYPO3 / Fluid – IF Condition inline

Des öfteren benötige ich für GridElement-Templates, Frontend-Templates oder Extension-Templates immer wieder die in TYPO3 Fluid IF-Abfragen als Inline Aufbau. Immer wieder suche im Netz nach passenden Beispielen wenn es darum geht, z.B. inline CSS styles mit einzubinden.
Daher hier ein paar Beispiele der unterschiedlichen Möglichkeiten für Condition:

Gebe „active“ aus, sobald die Variable „true“ ist!

{f:if(condition: ValueNameHere, then: 'active')}

Prüfe die Variable und gebe dann einen Wert aus

{f:if(condition: '{ValueNameHere} == \'Yes\'', then: 'active')}

{f:if(condition: '{ValueNameHere} == "Yes"', then: 'active')}

oder mit einer Zahl eine Variable prüfen.

{f:if(condition: '{ValueNameHere} == 1', then: 'active')}

Mehrere Variablen prüfen:

{f:if(condition: '{0: ValueNameHere, 1: AbfrageText} == {0: \'Yes\', 1: \'Hier kommt der Text\'}', then: 'active')}
{f:if(condition: '{xx:pageid(xx:settings.ui)} == {v:page.info(field:\'uid\')}',then:' active')}

Prüfe die Variable und gebe dann einen Wert aus oder einen anderen Wert:

{f:if(condition: '{ValueNameHere} == 1', then: 'active', else: 'disable')}

Prüfe die Variable und prüfe einen zweite Variable (nicht inline!):

<f:if condition="{ValueNameHere} == 1">
    <f:then>
       // do something
    </f:then>
    <f:else>
        <f:if condition="{ValueNameHere2} == 1">
            <f:then>
                // do something else
            </f:then>
           <f:else>
               // do then the other thing
           </f:else>
        </f:if>
    </f:else>
</f:if>

Hier noch ein paar weitere Abfragemöglichkeiten als Beispiel:
https://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/ViewHelper/If.html
https://wiki.typo3.org/Fluid_Inline_Notation

Gehen wir nun mal davon aus, dass wir einen DIV-Container haben und wollen darin eine Abfrage für eine CSS-Class oder sogar Inline-CSS-Styles aufbauen:

<section class="className {f:if(condition: '{ValueNameHere}', then: 'class-name-2')}" {f:if(condition: '{ValueNameHere}', then: 'style=\"background: url('uploads/{ValueNameHere}\"')')}>
    Content
</section>

Wichtig ist dabei, dass Ihr anfang die Anführungszeichen zu escape! Das geht mit dem \ (Backslash)
In meinen Beispiel gebe ich für die GridElemente Extension Inhalte je nach Backend-Auswahl aus, bzw. kann ich im Backend ein Hintergrund-Bild für einen Container hinterlegen:

<section class="columns-1-col-wrap columns-grid-{data.tx_gridelements_backend_layout} {data.flexform_containerbg} {f:if(condition: '{data.flexform_containerbgimage}', then: 'container-bgimage')}" {f:if(condition: '{data.flexform_containerbgimage}', then: 'style="background-image: url(\'uploads/ContentBackground/{data.flexform_containerbgimage}\'")')}>
    Content
</section>

Inline For Each:

{items -> f:for(each: '{ValueNameHere}', as: 'items', iteration: 'iterator')}

For Each inline mit f:section und f:render

<div class="{f:spaceless() -> f:render(section: 'class', arguments: _all)}">
   Content
</div>

<f:section name="class">
    <f:for each="{ValueNameHere}" as="items" iteration="iterator"><f:spaceless>{items.title}</f:spaceless></f:for>
</f:section>

Inline verketten:

{items -> f:format.html() -> f:format.crop(maxCharacters:'100',respectHtml:'1',respectWordBoundaries:'1')}

Ab der TYPO3 8.7.x Version:

<f:if condition="({variableEins} && {variableZwei}) || {variableDrei} || {variableVier}">
// Done if both variable one and two evaluate to true,
// or if either variable three or four do.
</f:if>

Inline:

{f:if(condition: '{variableEins} && {variableZwei}', then: 'active')}
<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>

Inline Condition in Condition:

<div class="{f:if(condition: settings.list.media.disable, then: 'col-md-12 test', else: '{f:if(condition: newsItem.mediaPreviews, then: \'col-md-8\', else: \'col-md-12\')}')}">

Schreibt gerne weitere Beispiel in den Kommentaren!

Eure Meinung zu dem Artikel ist gefragt! Schreibt mir ein Kommentar

Hat Euch der Artikel weitergeholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste. Vielen Dank!

Hat Euch der Artikel geholfen oder gefallen?
Ich freue mich auf einen Blick auf meine Amazon-Wunschliste.
Vielen Dank!


Ich bin TYPO3 Freelancer, TYPO3-Entwickler, Web-Entwickler und Frontend-Entwickler. Ich arbeite im und für das Web seit 2004.
Mehr Infos zu der TYPO3 Internet-Agentur INGENIUMDESIGN.

Besucht auch unser TYPO3 Hilfe Forum.

Leave a Reply

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

2 Kommentare

  1. Nils

    Danke, das war genau das, was ich gesucht hab.

Next ArticleKommunikationskanal für TYPO3