Add Field for custom class in TYPO3 CE

Question

I'm trying to add a field for adding a custom class to all TYPO3 CE (i.e Bootstrap Classes).

The Field is shown in the BE CEs and I'm able to write f.e. col-md-6 in this field. The DB has a field called bootstrap_css where the values are stored.

But I've no Idea on how to get a wrap around the CE in FE with that custom class:

Example: Adding col-md-6 in the BE Field should result in something like this:

<div class="col-md-6">
    <div class="csc-default">
        ....
    </div>
</div>

Any Idea?

Urs Urs · Accepted Answer · 2014-10-15T21:39:41

A free input for classes is generally considered bad practice (-> separation of concerns).

For such cases, I use the classic 'header_layout' method, based on www.typo3wizard.com/en/snippets/cool-stuff-typoscript/using-the-layout-field-in-tt-content-and-pages.html

This works very robustly, and editors can pick any value you offer them. It IS a workaround, but it's been used for ages. The header_layout box has been used because it's in a convenient place for editors. Originally, it was designed to pick a layout just for the element.

in page TSConfig:

TCEFORM.tt_content {
      // Layout-Selector
      header_layout.altLabels.0 = Normal
      header_layout.altLabels.1 = Kasten
      header_layout.altLabels.2 = Bilder 1/2
      header_layout.altLabels.3 = Bilder 1/3
      header_layout.altLabels.4 = Dokumente 1/2 (mit Rand)
      header_layout.altLabels.5 = Dokumente 1/3 (mit Rand)

       // everything higher than 5 goes here

       header_layout.addItems {
            // 6 =  Box für wichtige Daten
            // 7 =  Box für Kosten
            // 8 =  Box für Arbeiten / Literatur
       }

       //  Remove items if less than 5
       // 100 is "hidden"
       header_layout.removeItems = 100

    }

Then in page TS: Assuming we want to wrap text and textpic elements:

tt_content.text.stdWrap.outerWrap.cObject=CASE
tt_content.text.stdWrap.outerWrap.cObject=CASE
tt_content.text.stdWrap.outerWrap.cObject{
    key.field = header_layout
    default=TEXT
    default.value=|
    1=TEXT
    1.value=<aside class="kasten halfimg clearfix">|</aside>
    2=TEXT
    2.value=<div class="halfimg clearfix">|</div>
    3=TEXT
    3.value=<div class="thirdimg clearfix">|</div>
    4=TEXT
    4.value=<div class="halfimg-border clearfix">|</div>
    5=TEXT
    5.value=<div class="thirdimg-border clearfix">|</div>
}   

tt_content.textpic.stdWrap.outerWrap.cObject=CASE
tt_content.textpic.stdWrap.outerWrap.cObject{
    key.field = header_layout
    default=TEXT
    default.value=|
    1=TEXT
    1.value=<aside class="kasten halfimg clearfix">|</aside>
    2=TEXT
    2.value=<div class="halfimg clearfix">|</div>
    3=TEXT
    3.value=<div class="thirdimg clearfix">|</div>
    4=TEXT
    4.value=<div class="halfimg-border clearfix">|</div>
    5=TEXT
    5.value=<div class="thirdimg-border clearfix">|</div>
}

So basically, you tap into the rendering of css_styled_content and tell it to wrap that content element depending on what is set in header_layout.

Add Field for custom class in TYPO3 CE

1 Answers