layout field / typo3 / typoscript

Usando o campo “Layout” em elementos de conteúdo

No TYPO3, todos os elementos de conteúdo normal têm um campo “Layout” na guia “Aparência”. Este campo pode ser usado para alterar o layout do elemento de conteúdo. Por exemplo, para adicionar uma classe CSS ao div de envolvimento. Vamos tentar isso abaixo.

Página TSConfig

Primeiro, modificamos a caixa de seleção de layout para os tt_contentelementos.
Neste caso, queremos ser capazes de alterar a cor de fundo do elemento de conteúdo.

TCEFORM.tt_content {
    layout {
        altLabels {
            1 = Green background
            2 = Blue background
        }
        removeItems = 3,4,5,6,7,9,10
    }
}

Aqui, definimos os rótulos a serem usados ​​na caixa seletora e removemos todos os outros rótulos.

Configuração do Typoscript

A próxima coisa a definir é como o campo Layout deve ser usado ao renderizar o frontend.
Dizemos ao TYPO3 para adicionar uma classe ao tt_contentelemento usando a stdWrappropriedade no typoscript.
O seguinte funciona para TYPO3 4.7. No 4.7, o elemento define as classes a serem colocadas no div. Apenas adicionamos um extra (número 40) e definimos que deve depender do valor do campo layout.tt_content.stdWrap.innerWrap.cObject.default.20

tt_content.stdWrap.innerWrap.cObject.default.20.40 = CASE
tt_content.stdWrap.innerWrap.cObject.default.20.40 {
    key.field = layout

    1 = TEXT
    1.value = fce-pagediv-green

    2 = TEXT
    2.value = fce-pagediv-blue
}

CSS

A única coisa que falta fazer é definir o CSS necessário para dar o resultado que queremos.

.fce-pagediv-green {
    background: green;
}

.fce-pagediv-blue {
    background: blue;
}

Related Posts