TYPO3 - Изменить макет в соответствии с количеством записей

Я хочу изменить макет страницы в зависимости от того, сколько файлов существует.

Я разработал следующий код:

                        <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 предоставленных файлов -> Добавить строку с двумя столбцами, каждый столбец - столбец 6 и содержит файл
  • 3 предоставленных файла -> строка (столбец 6, столбец 6), ряд (столбец 6)
  • 4 файла даны -> 2 строки, каждый с 2 ​​col-6
  • 5 или более файлов -> просто показать первые 4 файла (как описано в разделе «4 файла дано»)

Как я могу сделать что-то подобное. Я использую Typo3-9.5.5 кстати

Это возможное решение?

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

РЕДАКТИРОВАТЬ: я решил это так (не было необходимости в более чем один класс строки):

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

Всего 1 ответ


В зависимости от вашего разнообразия случаев вы можете использовать разные f:for viewhelper или изменить только рендеринг внутри одного f:for viewhelper для всех.
Но вы также должны использовать информацию, которую iterator предоставит вам внутри f:for viewhelper.
Вы также можете использовать видоискатель f:cycle , поэтому вам не нужно рассчитывать 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>

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>

просто помните: кроме свойств, видимых в <f:debug title="file">{file}</f:debug> вас есть много других свойств, предоставленных получателями, которые вы могли видеть в API


Есть идеи?

10000