TYPO3 - Change Layout according to amount of entrys

Question

I want to change my Page Layout according to how many files are existing.

I developed the following code:

                        <f:for each="{files}" as="file">
                          <div class="ce-textpic-file-download-wrapper">
                            <a href="/fileadmin/{file.identifier}" target="_blank">
                                <div class="filesize">({file.originalFile})</div>
                            </a>
                        </div>
                      </f:for>

Now there are different cases:

• No files given -> empty div
• 1 File given -> Just show the one File
• 2 Files given -> Add Row with two columns, each column is col-6 and contains the file
• 3 Files given -> row(col-6, col-6), row(col-6)
• 4 Files given -> 2 rows, each with 2 col-6
• 5 or more files -> Just show the first 4 Files (as described in "4 files given")

How can i accomplish something like this. I am using Typo3-9.5.5 btw

Is this a possible solution?

<f:switch expression="{files -> f.count()}">
  <f:case value="0">EMPTY</f:case>
  <f:case value="1">ONE</f:case>
  <f:case value="2">TWO</f:case>
  <f:case value="3">THREE FILES</f:case>
  <f:case value="4">FOUR</f:case>
  <f:defaultCase>MORE THAN FOUR</f:defaultCase>
</f:switch>

How can i address for exmaple the third element in {files} does it work like this: {files}[2]?

EDIT: I solved it like this (There was no need for more than one row class):

  <f:if condition="{files}">
                        <f:if condition="{files->f:count()} == 1">
                            <f:then>
                                <div class="row download-row">
                                    <div class="col-lg-6 col-md-12 col-xs-12">
                                        <div class="ce-textpic-file-download-wrapper ">
                                            <a href="/fileadmin/{files.0.identifier}" target="_blank">
                                                <div class="fileinfo">
                                                    {files.0.originalFile.properties.name}<br>
                                                    ({files.0.originalFile.properties.size})
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                    <div class="col-6"></div>
                                </div>
                            </f:then>
                            <f:else>
                                <div class="row">
                                <f:for each="{files}" as="file" iteration="iterator">
                                    <f:if condition="{iterator.index} < 4">
                                        <div class="col-lg-6 col-md-12 col-xs-12">
                                            <div class="ce-textpic-file-download-wrapper">
                                                <a href="/fileadmin/{files.iterator.identifier}" target="_blank">
                                                    <div class="fileinfo test">
                                                        {file.originalFile.properties.name}<br>
                                                        ({file.originalFile.properties.size}
                                                    </div>
                                                </a>
                                            </div>
                                        </div>
                                    </f:if>
                                </f:for>
                            </f:else>
                        </f:if>
                    </f:if>

Answer 1

Depending on your variety of cases you might use different f:for viewhelper or change just the rendering inside of one single f:forviewhelper for all.
But you also should make use of the information an iterator will give you inside the f:for viewhelper.
You also might use a f:cycle viewhelper, so you do not need to caclulate modulo.

Number of files: {files->f:count()}<br />
<f:for each="{files}" as="file" iteration="iterator">
    <f:cycle values="{0: 'odd', 1: 'even'}" as="cycler"> 
        <f:debug title="inside the loop">{file:file, iterator:iterator, cycler:cycler}</f:debug>
    </f:cycle>
</f:for>

EDIT:

---

regarding your cases I think you must consider two variants:

   <f:if condition="{files}">
      <f:if condition="{files->f:count()} == 1">
         <f:then>
            <f:render section="item" arguments="{file:file}" />
         </f:then>
         <f:else>
            <f:for each="{files}" as="file" iteration="iterator">
               <f:if condition="{iterator.index} < 4">
                  <f:if condition="iterator.isOdd"><div class="row"></f:if>
                     <div class="col-6">
                        <f:render section="item" arguments="{file:file}" />
                     </div>
                  <f:if condition="iterator.isEven"></div></f:if>
               </f:if>
            </f:for>
            <f:if condition="{files->f:count()} == 3"></div></f:if>
        </f:else>
      </f:if>
   </f:if>

<f:section name="item">
<div class="ce-textpic-file-download-wrapper">
    <a href="/fileadmin/{file.identifier}" target="_blank">
        <div class="filesize">({file.originalFile})</div>
    </a>
</div>
</f:section>

EDIT2:

---

<f:section name="item">
<div class="ce-textpic-file-download-wrapper">
    <f:link.typolink parameter="{file.publicUrl}" target="_blank">
        {file.identifier} 
        <span class="filesize"> ({file.size->f:format.bytes()})</span>
    </a>
</div>

just remember: aside of the properties visible in a <f:debug title="file">{file}</f:debug> you have a lot of other properies, given by the getters you could see in the API