[Frage] inline condition im else

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    610 Beiträge
    1 Hilfreiche Beiträge
    04. 08. 2021, 10:44

    Hallo ins Forum,

    folgende inline condition soll prüfen ob entweder "5" oder "4" gesetzt ist. Wenn "5", dann soll "mt-0" als Klasse eingetragen werden, wenn "4" gesetzt ist, dann die Klasse "mb-5"
    [code]<h1 class="{f:if(condition: '{dataLayout} == 5',
    then: 'mt-0 {positionClass}',
    else: '{f:if(condition: \'{dataLayout} == 4\',
    then: \'mb-5 {positionClass}\',
    else: \'{positionClass}\')}'
    )}">
    ....
    [/code]

    Es wird jedoch keine Klasse gesetzt, egal was ist beim data.Layout ausgewählt habe. Im HTML steht nur
    [code]<h1 class=""
    [/code]

    Was ist da am Fluid falsch?
    Prüfe ich z.B. nur eine Bedingung, funktioniert die Abfrage und die Klasse wird korrekt angezeigt.
    [code]<h1 class="{f:if(condition: '{dataLayout} == 5', then: 'mt-0 {positionClass}', else: '{positionClass}')}>
    [/code]

    Danke für n Tipp und Gruß
    mimii


  • 1
  • Teisinger Teisinger
    Jedi-Ratsmitglied
    0 x
    502 Beiträge
    37 Hilfreiche Beiträge
    04. 08. 2021, 16:36

    Persönlich halte ich diese Art für schlecht, weil sich kein Mensch auskennt wann wie wo und warum diese class gesetzt wird.
    Schöner oder besser finde ich wenn du einfach nur class="layout-{dataLayout}" machst und dann eben dein CSS entsprechend änderst, das ist meiner Meinung nach einfacher und Verständlicher... :)

    Wenn du das aber wirklich so machen willst wie du geschrieben hast, würde ich das trotzdem anders machen und zwar mit switch-case - ist einfach leserlicher und erweiterbarer:

    <h1 class='{positionClass}
    <f:switch expression="{dataLayout}">
    <f:case value="5">mt-0</f:case>
    <f:case value="4">mb-5</f:case>
    <f:defaultCase></f:defaultCase>
    </f:switch>
    ' > ... </h1>

    https://github.com/groundstack-org

  • mimii mimii
    Jedi-Ratsmitglied
    0 x
    610 Beiträge
    1 Hilfreiche Beiträge
    05. 08. 2021, 11:22

    Danke für die Antwort,

    die betroffene Homepage wird nur von mir verwaltet und ich weiß was ich wo und zu welchem Zweck auswählen muss. Daher gibt es kein Problem mit mt-0 oder mb-5 ;-) Grundsätzlich hat du aber vollkommen recht, ein externer Redakteur der nur für Inhalte und deren Formatierung zuständig ist, wäre mit solchen Benennungen überfordert, daher bin ich für Verbesserungen bin ich immer offen :-)

    Ich arbeite in allen Projekten mit Bootstrap und möchte die vorhandenen Klassen auch nutzen. Daher ja auch die Idee mit mt-0 und mb-5 (die könnte man in der Tat "sprechender" benennen). Erklärst du mir bitte wie das mit class="layout-{dataLayout}" gemeint ist? Sollte man nur die in Typo3 vorhandenen Klassen nutzen und hierfür immer CSS schreiben?

    THX für ein bisschen Input hierzu.

    mimii

  • Teisinger Teisinger
    Jedi-Ratsmitglied
    0 x
    502 Beiträge
    37 Hilfreiche Beiträge
    05. 08. 2021, 13:52

    naja ich vergebe keine "Zahlen" als Layout (key) sondern strings so heißt z.B. ein Layout im TYPO3 Backend "Button Blau" der Key dazu wäre button-blue oder btn-blue - somit hättest du in deinem PageTs sowas wie:

    TCEFORM {
    tt_content {
    header_layout {
    addItems {
    btn-blue = Button Blau
    // anstatt dem was TYPO3 im Standard macht wie:
    // 27 = Button Blau
    }
    }
    }
    }

    Somit kann ich dann im FLUID "btn-blue" direkt verwenden wie eben im Beispiel: class="layout-{dataLayout}". Was dann eben class="layout-btn-blue" erzeugen würde. Somit weiß ich von PageTs über FLUID über CSS und evtl JavaScript was gemeint ist und wo ich es finde bzw. zu suchen habe.

    Ansonsten nein, du kannst natürlich die Class von deinem Framework (Bootstrap) benutzen, spricht nichts dagegen ;)

    Es ist halt nur verwirrend wenn man nur mit Zahlen arbeitet. Es ist halt schwieriger sich zu merken welche Auswahl ich im BE treffen muss damit die Zahl 5 selectiert ist und damit die class mt-0 erzeugt wird.
    Falsch ist das nicht, nur weniger leserlich (meiner Meinung nach) :)

    https://github.com/groundstack-org

  • 0 x
    3252 Beiträge
    152 Hilfreiche Beiträge
    06. 08. 2021, 17:08

    Uff... Mit der Lösung wird aber das HTML/XML invalide...

    Würde - auch um mehr Verständlichkeit/Kommentare reinzubringen - eher mal `f:variable` angucken: https://docs.typo3.org/other/typo3/view-helper-reference/master/en-us/typo3fluid/fluid/latest/Variable.html

  • 0 x
    3252 Beiträge
    152 Hilfreiche Beiträge
    07. 08. 2021, 14:52

    Also Dein Fluid-Snippet tut bei mir...

    [code]page.75 = FLUIDTEMPLATE
    page.75 {
    template = TEXT
    template.value(
    <f:variable name="positionClass">top</f:variable>
    <f:variable name="dataLayout">4</f:variable>
    <h1 class="{f:if(condition: '{dataLayout} == 5',then: 'mt-0 {positionClass}',else: '{f:if(condition: \'{dataLayout} == 4\',then: \'mb-5 {positionClass}\',else: \'{positionClass}\')}')}">Test-Headline</h1>
    )
    }
    page.85 = FLUIDTEMPLATE
    page.85 {
    template = TEXT
    template.value(
    <f:variable name="positionClass">top</f:variable>
    <f:variable name="dataLayout">5</f:variable>
    <h1 class="{f:if(condition: '{dataLayout} == 5',then: 'mt-0 {positionClass}',else: '{f:if(condition: \'{dataLayout} == 4\',then: \'mb-5 {positionClass}\',else: \'{positionClass}\')}')}">Test-Headline</h1>
    )
    }
    [/code]

    Ausgabe:
    [code]<h1 class="mb-5 top">Test-Headline</h1>
    <h1 class="mt-0 top">Test-Headline</h1>[/code]

    Noch ein kleiner Link-Tipp zu einem Artikel von Trish:
    "Fluid: Escaping nested Inline ViewHelper"
    https://sitegeist.de/blog/typo3-blog/fluid-escaping-nested-inline-viewhelper.html

  • Teisinger Teisinger
    Jedi-Ratsmitglied
    0 x
    502 Beiträge
    37 Hilfreiche Beiträge
    09. 08. 2021, 15:16

    Du kannst dir mit deinen Variablen auch ein array zusammenbauen und dann im <h1 class="foreach meinArray" ausgeben... dann hast du auch ein valides xml... ;) immernoch lesbarer als verschachtelte IF's ... :)

    https://github.com/groundstack-org

  • 1