I have to make a backend and a frontend-layout with grid-elements. To clarify it a bit: I have 10 containers, 5x2
It looks in the backend like this:
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 stands for container)
There might be smarter ways to realize this, maybei with just "text with image"-content elements, but in this case this was the requirement.
Now the problematic part. I need to wrap each container differently. My expected output is something like this:
<div class="left w-clearfix">
<div class="organe_50_stapel_logo">
IMAGE // works
</div>
<div class="organe_50_stapel_text">
TEXT // works
</div>
</div>
(2nd - 4th container would be wrapped in "middle" and the 5th container in "right).
Now for my setup, I get the fields wrapped (marked with // works), however, I'm stuck wrapping certain fields which belong together.
Here is my setup:
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 belongs in the container "left" 12,13,14,22,23,24 in the container "middle" 15,25 in the container "right"
You should go for another approach in this case and get rid of the individual wraps for the columns in favor of an overall cObject making use of the so called "virtual fields" of Gridelements.
These fields get filled with content during the rendering process and then made available via cObj->data, thus accessiable via TypoScript field, data, insertData and dataWrap as well as variables within a 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>
)
}
}
This is working for flexform_fieldname, parentgrid_fieldname, tx_gridelements_view_column_123 and tx_gridelements_view_child_123. Additionally there are tx_gridelements_view_children and tx_gridelements_view_columns, but these contain arrays for the FLUIDTEMPLATE people, since TypoScript can't deal with arrays.
The fields are called "virtual" because they don't exist in the database, but will be filled into cObj->data during the rendering process. Still you can do anything with them that can be done with real fields, except writing them back to the database.
See https://docs.typo3.org/typo3cms/extensions/gridelements/Chapters/Typoscript/Reference/Index.html for the TypoScript Reference describing those fields.