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

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

0 голосов
/ 24 марта 2020

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

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

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

Как мне сделать sh что-то вроде этого. Я использую 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}, он работает так: { файлы} [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 Ответ

1 голос
/ 24 марта 2020

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

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

...