Hallo,
ich habe leider Schwierigkeiten folgenden HTML-Aufbau mittels Fluid zu realisieren. Ich hoffe, dass mir jemand aushelfen kann.
<div class="service">
<div class="col-4">
<h3 class="title">...</h3>
<p class="teaser">...</p>
</div>
<div class="col-8">
<div class="col-4">
<h5 class="title">...</h3>
<p class="teaser">...</p>
</div>
<div class="col-4">
<h5 class="title">...</h3>
<p class="teaser">...</p>
</div>
<div class="col-4">
<h5 class="title">...</h3>
<p class="teaser">...</p>
</div>
</div>
</div>
Mein Fluid-Markup sieht folgendermaßen aus:
<div class="service">
<f:for each="{blocks}" as="block" iteration="iterator">
<f:if condition="{iterator.isFirst}">
<f:then>
<div class="col-4">
<h3 class="title">{block.title}</h3>
<p class="teaser">{block.teaser}</p>
</div>
</f:then>
<f:else>
<f:if condition="{iterator.cycle} % 3">
<f:then>
<div class="col-8">
<div class="col-4">
<h5 class="title">{block.title}</h3>
<p class="teaser">{block.teaser}</p>
</div>
</f:then>
<f:else>
<div class="col-4">
<h5 class="title">{block.title}</h3>
<p class="teaser">{block.teaser}</p>
</div>
</div>
</f:else>
</f:if>
</f:else>
</f:if>
</f:for>
</div>
Das Ergebnis:
<div class="service">
<div class="col-4">
<h3 class="title">...</h3>
<p class="teaser">...</p>
</div>
<div class="col-8">
<div class="col-4">
<h5 class="title">...</h3>
<p class="teaser">...</p>
</div>
<div class="col-4">
<h5 class="title">...</h3>
<p class="teaser">...</p>
</div>
</div>
<div class="col-8">
<div class="col-4">
<h5 class="title">...</h3>
<p class="teaser">...</p>
</div>
</div>
</div>
Wie ihr seht, wird die letzte Column (col-4) aus der zweiten Column (col-8) herausgenommen und nochmal in eine weitere Column (col-8) gesteckt. Kann mir jemand sagen, was ich falsch mache und was ich ändern muss, damit ich mein gewünschtes Ergebnis erhalte?