TYPO3 - 根据条目数量更改布局

Question

我想根据现有文件的数量更改我的页面布局。

我开发了以下代码：

                        <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>

现在有不同的情况：

没有给出文件 -> 空 div
1 个文件给定 -> 只显示一个文件
2 给定的文件 -> 添加两列的行，每列为 col-6 并包含文件
3 个文件给定 -> 行(col-6, col-6), 行(col-6)
4 给定的文件 -> 2 行，每行有 2 col-6
5 个或更多文件 -> 仅显示前 4 个文件（如“4 给出的文件")

我怎样才能完成这样的事情。我正在使用 Typo3-9.5.5 btw

这是可行的解决方案吗？

<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>

我如何处理 {files} 中的第三个元素？它是这样工作的吗：{files}[2]?

编辑：我是这样解决的（不需要超过一行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

根据您的各种情况，您可能会使用不同的 f:for viewhelper 或仅更改一个 f:forviewhelper 内部的渲染。
但是您还应该利用 iterator 将在 f:for viewhelper 中为您提供的信息。
您也可以使用 f:cycle viewhelper，因此您不需要计算 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>

编辑：

关于您的案例，我认为您必须考虑两种变体：

   <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>

编辑 2：

<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>

请记住：除了 <f:debug title="file">{file}</f:debug> 中可见的属性外，您还有许多其他属性，这些属性由您可以在 API

中看到的吸气剂提供

TYPO3 - 根据条目数量更改布局

TYPO3 - Change Layout according to amount of entrys

foreach

fluid

conditional-statements

typo3-9.x