CODEWITHSUNDEEP
fluidtypo3-9.x
arderoma
arderoma

Reputation: 427

How to print something alternatively with fluid in typo3?

I'm learning to handle typo3. I understand that what I'm using here is Fluid to call the variable from my backend

I have this template

<f:layout name="Default" />
<f:section name="Main">
  <div class="container">
    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: '21'}" />
  </div>
</f:section>

And this is the template? I'm printing my content element with.

<html data-namespace-typo3-fluid="true"
   xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers">
   <div class="row">
      <div class="col-7 ">
         <div class="screen">
            <div class="screenshot">
               <f:for each="{screenshots}" as="screenshot">
                  <f:image style="opacity: 1;" image="{screenshot}" />
               </f:for>
            </div>
            <a href="#" target="_blank">
               <img src="typo3conf/ext/hebotek_website/Resources/Public/Images/screen.png" width="100%">
            </a>
         </div>
         
      </div>
      <div class="col-5">
         <f:for each="{logos}" as="logo">
            <f:image style="opacity: 1;" image="{logo}" />
         </f:for>
         <div class="project_desc">
            <h3>
               {data.header}
            </h3>
            <f:format.html>{data.bodytext}</f:format.html>
         </div>
      </div>
   </div>
</html>

This will print two columns, the first one with a picture and the second one with a header and a text. I want to print one time the image at the left and the next time the image at the right and the next at the left again. How do I alternate the html here? Is this possible with fluid or I must take a different approach?

Something like:

if(index % 2 == 0)
{
    print left
}
else
{
    print right
}

In any of this two templates I have an array in order to do this. Thanks!

Upvotes: 0

Views: 324

Answers (1)

the-lex
the-lex

Reputation: 26

Unfortunately, there is no real alternate functionality in fluid.

You could use your approach with a condition:

<f:if condition="{index % 2 == 0}">
    <f:then>
        print left
    </f:then>
    <f:else>
        print right
    </f:else>
</f:if>

Fluid also provides a way to render partials in separate files, to reduce the amount of markup in your template:

<f:render partial="path/to/your/partial/left">

But a better approach will probably be to use css to alternate your layout. For example with flexbox:

.row:nth-child(even) .col-6.image {
   order: 1;
}
.row:nth-child(even) .col-6.text {
   order: 2;
}
.row:nth-child(odd) .col-6.image {
   order: 2;
}
.row:nth-child(odd) .col-6.text {
   order: 1;
}

This way, you can also use a media query, to keep your top-bottom order for smaller screens, so your images or your text are not next to each other.

Upvotes: 1

Related Questions