Typo3 - dynamisches Layout

Question

Ich möchte ein dynamisches Typo3 - Fluid Layout erstellen. Die Breite der Spalten sollte automatisch angepasst werden. Durch die Einschränkungen von Fluid und Typoscript habe ich Probleme, den komplexen Zustand der Mittelsäule zu formulieren. Die Operatoren AND, OR funktionieren nicht.

Ich hoffe, dass mir jemand helfen kann.

TypoScript:

variables { 
     top < styles.content.get 
     top.select.where = colPos=3 
     left < styles.content.get 
     left.select.where = colPos=1 
     center < styles.content.get 
     center.select.where = colPos=0 
     right < styles.content.get 
     right.select.where = colPos=2 
     footer < styles.content.get 
     footer.select.where = colPos=4 
    } 

Layout:

<div class="container-fluid"> 
    TEST: {f:if(condition:'{right} AND {left}', then:'8', else:'{f:if(condition:\'{left} OR {right}\', then: \'9\', else:\'12\')}')} 
    <div class="row"> 
    <div id="top_nav"> 
     {top -> f:format.raw()} 
    </div> 
    </div> 
    <div class="row"> 
    <f:if condition="{left}"> 
     <div id="left" class="col-xs-12 col-md-{f:if(condition:'{right}', then:'2', else:'3')}"> 
     {left -> f:format.raw()} 
     </div> 
    </f:if> 

    <div id="center" class="col-xs-12 col-md-{f:if(condition:'{right} AND {left}', then:'8', else:'{f:if(condition:\'{left} OR {right}\', then: \'9\', else:\'12\')}')}"> 
     {center -> f:format.raw()} 
    </div> 

    <f:if condition="{right}"> 
     <div id="right" class="col-xs-12 col-md-{f:if(condition:'{left}', then:'2', else:'3') }"> 
     {right -> f:format.raw()} 
     </div> 
    </f:if> 
    </div> 

Answer 1

Logische Operatoren werden nur von TYPO3 v8

https://wiki.typo3.org/Fluid#Logical_operators

ebenfalls verfügbar sein, wenn Sie eine neue Variable setzen möchten (was du gerne mit dem Klassennamen machst) könntest du einstellen ur Logik außerhalb Ihres html mit dem VHS-Variablen-Set View Helfer: https://fluidtypo3.org/viewhelpers/vhs/master/Variable/SetViewHelper.html

ein Beispiel:

<f:if condition="{right}"> 
<f:then> 
<v:variable.set name="classCenter" value="2" /> 
</f:then> 
<f:else> 
<v:variable.set name="classCenter" value="9" /> 
</f:else> 
</f:if> 

<div id="center" class="col-xs-12 col-md-{classCenter}" > 

Sie werden natürlich müssen vhs installieren und den Namespace in Ihrer Flüssigkeit Vorlage festgelegt: {namespace v=FluidTYPO3\Vhs\ViewHelpers}

Answer 2

That ist nur eine Menge Logik für die Vorlage. Wenn Sie sich dafür entscheiden, dies in einer Vorlage zu tun, versuchen Sie, Ihre Bedingungen nicht zu wiederholen, insbesondere in Inline-Notation ({f:if(…)}). Ich bevorzuge die Verwendung von Abschnitten, sei es in der gleichen Vorlage/Teildatei oder in einer anderen, über die Einstellung von Variablen.

Ihr Code kann so lesbar wie folgt erhalten:

<f:section="main"> 
    <f:if condition="{right}"> 
     <f:then> 
      <f:if condition="{left}"> 
       <f:then><f:comment>left and right</f:comment> 
        <f:render section="top" arguments="{top:top}" /> 
        <f:render section="left" arguments="{columns:2,left:left}" /> 
        <f:render section="center" arguments="{columns:8,center:center}" /> 
        <f:render section="right" arguments="{columns:2,right:right}" /> 
       </f:then> 
       <f:else><f:comment>right only</f:comment> 
        <f:render section="top" arguments="{top:top}" /> 
        <f:render section="center" arguments="{columns:9,center:center}" /> 
        <f:render section="right" arguments="{columns:3,right:right}" /> 
       </f:else> 
      </f:if> 
     </f:then> 
     <f:else>   
      <f:if condition="{left}"> 
       <f:then><f:comment>left only</f:comment> 
        <f:render section="top" arguments="{top:top}" /> 
        <f:render section="left" arguments="{columns:3,left:left}" /> 
        <f:render section="center" arguments="{columns:9,center:center}" /> 
       </f:then> 
       <f:else><f:comment>neither left nor right</f:comment> 
        <f:render section="top" arguments="{top:top}" /> 
        <f:render section="center" arguments="{columns:12,center:center}" /> 
       </f:else> 
      </f:if> 
     </f:else> 
    </f:if> 
</f:section> 

<f:section name="top"> 
    <div class="row"> 
     <div id="top_nav"> 
      {top -> f:format.raw()} 
     </div> 
    </div> 
</f:section> 

<f:section name="left"> 
    <div id="left" class="col-xs-12 col-md-{columns}"> 
     {left -> f:format.raw()} 
    </div> 
</f:section> 

<f:section name="right"> 
    <div id="right" class="col-xs-12 col-md-{columns}"> 
     {right -> f:format.raw()} 
    </div> 
</f:section> 

<f:section name="center"> 
    <div id="center" class="col-xs-12 col-md-{columns}"> 
     {center -> f:format.raw()} 
    </div> 
</f:section> 

Wie für den Bedingungsteil, IMO ist es das Maximum eine Flüssigkeit Vorlage in gesetzt werden sollte, wie Ihre Logik Fortschritte in der Komplexität bitte ein Datum. Prozessor. Sie können Ihre Spalten testen, bevor Ihre Ansicht gerendert wird, und das Ergebnis Ihrer Vorlage zuweisen und flüssige Layouts für Ihren Zweck verwenden.

Sie benötigen einige PHP-Fähigkeiten für Datenprozessoren. Guter Ausgangspunkt, um sie aus dem Code zu verstehen ist TYPO3\CMS\Frontend\DataProcessing\CommaSeparatedValueProcessor.