自定义渲染/使用 GridElements (typo3) 包装答案

【问题标题】：Custom rendering / wraps with GridElements (typo3)自定义渲染/使用 GridElements (typo3) 包装
【发布时间】：2023-03-17 03:31:01
【问题描述】：

我必须用网格元素制作一个后端和一个前端布局。澄清一下：我有 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>

（第 2 - 4 个容器将被包裹在“中间”，第 5 个容器在“右”）。

现在对于我的设置，我将字段打包（标有 // 有效），但是，我被困在打包某些属于一起的字段。

这是我的设置：

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 在容器“中间” 15,25 在容器中“正确”

【问题讨论】：

标签： typo3 typoscript tx-gridelements

【解决方案1】：

在这种情况下，您应该采用另一种方法，摆脱对列的单独包装，转而使用所谓的 Gridelements“虚拟字段”的整体 cObject。

这些字段在渲染过程中填充内容，然后通过 cObj->data 提供，因此可通过 TypoScript 字段、数据、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 中。你仍然可以用它们做任何可以用真实字段做的事情，除了将它们写回数据库。

请参阅 https://docs.typo3.org/typo3cms/extensions/gridelements/Chapters/Typoscript/Reference/Index.html 了解描述这些字段的 TypoScript 参考。

【讨论】：

【解决方案2】：

通过使用打字稿进行渲染，我在 gridelement 中遇到了类似的错误。

我使用的 TypoScript 与您使用的完全相同！

请在您的模板中添加这一行 > 最后设置

tt_content.gridelements_pi1.20 = COA

添加此行解决了我的问题，希望对您有所帮助！

EXT : gridelements 8.0.0-dev

TYPO3：8.7.8

谢谢:)

【讨论】：