使用GridElements（typo3）進行自定義渲染/換行

Question

我必須使用網格元素制作一個后端和一個前端布局。 稍微說明一下：我有10個容器（5x2）

它在后端看起來像這樣：

con 1_1 | con 2_1 | con 3_1 | con 4_1 | con 5_1 
con 1_2 | con 2_2 | con 3_2 | con 4_2 | con 5_2

（ con代表容器）

可能有更聰明的方法來實現這一點，也許只包含“帶有圖像的文本”內容元素，但是在這種情況下，這是必需的。

現在是有問題的部分。 我需要以不同的方式包裝每個容器。 我的預期輸出是這樣的：

<div class="left w-clearfix">
    <div class="organe_50_stapel_logo">
        IMAGE // works
    </div>
    <div class="organe_50_stapel_text">
      TEXT // works
    </div>
</div>

（第二至第四個容器將包裝在“中間”中，第五個容器將包裝在“右側”中）。

現在，對於我的設置，我將字段包裝（用//工程標記），但是，我被卡住了包裝在一起的某些字段。

這是我的設置：

21 < lib.gridelements.defaultGridSetup
21 {
    columns {
         11 < .default
         11.wrap = <div class="organe_50_stapel_logo">|</div>
         12 < .default
         12.wrap = <div class="organe_50_stapel_logo">|</div>
         13 < .default
         13.wrap = <div class="organe_50_stapel_logo">|</div>
         14 < .default
         14.wrap = <div class="organe_50_stapel_logo">|</div>
         15 < .default
         15.wrap = <div class="organe_50_stapel_logo">|</div>

         21 < .default
         21.wrap = <div class="organe_50_stapel_text">|</div>
         22 < .default
         22.wrap = <div class="organe_50_stapel_text">|</div>
         23 < .default
         23.wrap = <div class="organe_50_stapel_text">|</div>
         24 < .default
         24.wrap = <div class="organe_50_stapel_text">|</div>
         25 < .default
         25.wrap = <div class="organe_50_stapel_text">|</div>
    }
}

11 + 21屬於容器“ left”的容器12,13,14,22,23,24屬於容器“ middle”的15,25屬於容器“ right”

Answer 1

在這種情況下，您應該尋求另一種方法，並放棄使用各個列的換行，而使用Gridelements的所謂“虛擬字段”來支持整體cObject。

這些字段在渲染過程中充滿內容，然后通過cObj-> data可用，因此可以通過TypoScript字段，data，insertData和dataWrap以及FLUIDTEMPLATE中的變量進行訪問。

21 < lib.gridelements.defaultGridSetup
21 {
    cObject = TEXT
    cObject {
        dataWrap (
            <div class="left w-clearfix">
                <div class="organe_50_stapel_logo">{field:tx_gridelements_view_column_11}</div>
                <div class="organe_50_stapel_text">{field:tx_gridelements_view_column_21}</div>
            </div>
            <div class="middle">
                <div class="organe_50_stapel_logo">{field:tx_gridelements_view_column_12}</div>
                <div class="organe_50_stapel_text">{field:tx_gridelements_view_column_22}</div>
            </div>
            <div class="middle">
                <div class="organe_50_stapel_logo">{field:tx_gridelements_view_column_13}</div>
                <div class="organe_50_stapel_text">{field:tx_gridelements_view_column_23}</div>
            </div>
            <div class="middle">
                <div class="organe_50_stapel_logo">{field:tx_gridelements_view_column_14}</div>
                <div class="organe_50_stapel_text">{field:tx_gridelements_view_column_24}</div>
            </div>
            <div class="right">
                <div class="organe_50_stapel_logo">{field:tx_gridelements_view_column_15}</div>
                <div class="organe_50_stapel_text">{field:tx_gridelements_view_column_25}</div>
            </div>
        )
    }
}

這適用於flexform_fieldname，parentgrid_fieldname，tx_gridelements_view_column_123和tx_gridelements_view_child_123。 此外，還有tx_gridelements_view_children和tx_gridelements_view_columns，但是它們包含供FLUIDTEMPLATE用戶使用的數組，因為TypoScript無法處理數組。

這些字段稱為“虛擬”字段，因為它們在數據庫中不存在，但在渲染過程中將填充到cObj-> data中。 您仍然可以對它們執行任何可以使用實際字段完成的操作，只是將它們寫回到數據庫中。

有關描述這些字段的TypoScript參考，請參見https://docs.typo3.org/typo3cms/extensions/gridelements/Chapters/Typoscript/Reference/Index.html 。

Answer 2

通過使用排印字進行排序，網格元素中出現了類似的錯誤。

我已經使用了您使用的確切TypoScript！

請最后將此行添加到您的模板>設置中

tt_content.gridelements_pi1.20 = COA

通過添加此行解決了我的問題，希望對您有所幫助！

---

EXT：網格元素8.0.0-dev

TYPO3：8.7.8

謝謝 ：）