Custom rendering / wraps with GridElements (typo3)

Question

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"

score 3 · Accepted Answer · answered Oct 19 '16 at 13:22

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.

score 0 · Answer 2 · answered Dec 01 '17 at 03:28

I have got similar error in gridelement by rending using typoscript.

I have used exact TypoScript which you used !

Please add this line in your template > setup at last

tt_content.gridelements_pi1.20 = COA

My problem solved by adding this line , I hope it will help you !

EXT : gridelements 8.0.0-dev

TYPO3 : 8.7.8

Thanks :)

Custom rendering / wraps with GridElements (typo3)

2 Answers2

TYPO3 : 8.7.8