TYPO3: Automatic wrapping CASE by page.layout

Question

I'm having a big teaser image at the top of the page. The author may select in the backend whether the teaser image should be static or a animated slideshow. I'm using bootstrap for the slideshow btw.

The selection appears at Page > Edit > Appearance
Rootpage TSConfig:

TCEFORM.pages {
    layout.altLabels.1 = Default (with Slideshow)
    layout.altLabels.0 = Default
}

Now, it gets a bit trickier.
To get the Bootstrap slider running, you need to have an outer wrap and each slide wrapped, too. This is what I've got so far:

page.10.variables {
    teaser < styles.content.get
    teaser.select.where = colPos = 0
    teaser.stdWrap.required = 1
    teaser.stdWrap.wrap {
        cObject = CASE 
        cObject {
            key.field = layout

            default = TEXT
            default.value = |

            1 = TEXT
            1.value = <div id="teaser" ...>|</div> ### shortened 
        }
    }

    teaser.renderObj.stdWrap.wrap {
        cObject = CASE 
        cObject {
            key.field = layout

            default = TEXT
            default.value = |

            1 = TEXT
            1.value = <div class="item">|</div>
        }
    }
}

The first teaser.stdWrap.wrap works like a charm. Selecting the Frontend Layout wraps the teaser correspondingly.
But the teaser.renderObj.stdWrap.wrap doesn't want to work. Mainly, because I think that the key of the CASE is not the Frontend Layout, but the layout of the content element. How to change that?

Second question. This is how the wraps currently look like (or how they would look if the TS above would work as intended):

<div class="item">
    <div id="c14">
        <div class="ce-textpic ce-right ce-intext">
            <div class="ce-gallery" data-ce-columns="1" data-ce-images="1">
                <div class="ce-row">
                    <div class="ce-column">
                        <div class="ce-media">
                            <img src="img.jpg" width="1150" height="632" alt="">
                        </div>
                    </div>
                </div>
            </div>
        <div class="ce-bodytext"></div>
    </div>
</div>

Is there a way to make it look more or less like this?

<div class="item">
    <img class="slide" src="img.jpg">
</div>

The customer doesn't wish to have any captions or text, so it can be ignored.

I'm running TYPO3 7.6.6 with fluid_styled_content.

András Ottó András Ottó · Accepted Answer · 2016-05-13T09:53:31

So the answer for the 1st question:

You can use the "getText" data type in TypoScript. See in doc here.

It has a predefined variable for the current page record. So simple change the second key attribute so:

key.data = page:layout

But if you are running the system with fluid_styled_content, then you can simply use fluid to solve this problem. (There you can access the layout with data.layout )

To answer the second question:

Yes. It is possible, you need to take a look into the fluid_styled_content extension. There you find a lot about the templates, layouts and the elements. You can simply override them with your templates and you can get rid of any not wanted div inside.

To do so, I can recommend you a german video.

TYPO3: Automatic wrapping CASE by page.layout

1 Answers