Typo3 Custom filed on Content Element

Question

Can I add a custom field to each content-element where I can add a string?

In typoscript I would be able to read this string and print it in class="" attribute is that possible?

There is the note field for each content element Can I red this in typoscript and paste it in the class attribute?

CONTENT < styles.content.get
CONTENT.renderObj.stdWrap.dataWrap=<div class="{NOTE??}">|</div>

Thanks

UPDATE:

Is something like this possible:

CONTENT < styles.content.get
CONTENT.renderObj.stdWrap {

    key.field = layout

    4 = TEXT        

    4.value = <div class="csc-default blue">|</div>



    5 = TEXT
    5.value = <div class="csc-default meineklasse2">|</div>



    6 = TEXT
    6.value = <div class="csc-default meineklasse3">|</div>



}

I think you want to layout the content element? Maybe you can use the layout field for your own needs? — Heinz Schilling
Can you give me an example how I can use the layout field to add custom css as wrapper of the content element? — Felix

Bernd Wilke πφ Bernd Wilke πφ · Accepted Answer · 2019-08-05T05:57:16

As to stay with a given CI it normally is no good option to enable editors to enter CSS-class names by hand. A better way would be to have a set of possible classes the editor can choose from.

This can be done if you use the already available field layout in the tt_contentrecord.

As the layoutfield is type int you might need a 'translation' to your expected class names, or you stay with numbered classes like frame-layout-1 to frame-layout-3. This is the (in FSC) build in solution and available option.

You can enhance this option and also modify it. Enhancing the selection is done in page TSconfig:

// Adding more layouts:
TCEFORM.tt_content.layout.addItems {
    4 = my special layout
    5 = my other special layout
}

// Modifying layouts names:
TCEFORM.tt_content.layout.altLabels {
    1 = my default layout
}

// remove items
TCEFORM.tt_content.layout.removeItems = 2,3

In FSC this field is evaluated in the layout template (Resources/Private/Layouts/Default.html) (if you also use a frame_class ????)

[...]
<div id="c{data.uid}" class="frame frame-{data.frame_class} frame-type-{data.CType} frame-layout-{data.layout}{f:if(condition: data.space_before_class, then: ' frame-space-before-{data.space_before_class}')}{f:if(condition: data.space_after_class, then: ' frame-space-after-{data.space_after_class}')}">
[...]

But you can override the Default.html file with your own, like in every fluid templating system. Just copy the original file to your own space and add the new location to the template (Layout) paths.
That could end in something like:

[...]
<div id="c{data.uid}" {f:render.section(name:'layout-selection', arguments={layout:'layout'})} ... >
[...]

<f:section name="layout-selection">
    <f:switch expression="{layout}">
        <f:case value="1">class="normal"</f:case>
        <f:case value="4">class="special"</f:case>
        <f:case value="5">class="very-special"</f:case>
        <f:defaultCase>class="default"</f:defaultCase>
   </f:switch>
</f:section>

based on the version of your TYPO3 the template paths of FSC can be configured like:
(up to TYPO3 7):

lib.fluidContent {
   templateRootPaths {
       20 = EXT:my_extension/Resources/Private/Templates/
   }
   partialRootPaths {
       20 = EXT:my_extension/Resources/Private/Partials/
   }
   layoutRootPaths {
       20 = EXT:my_extension/Resources/Private/Layouts/
   }
}

or (since TYPO3 8): (Manual)

lib.contentElement {
   templateRootPaths {
       20 = EXT:my_extension/Resources/Private/Templates/
   }
   partialRootPaths {
       20 = EXT:my_extension/Resources/Private/Partials/
   }
   layoutRootPaths {
       20 = EXT:my_extension/Resources/Private/Layouts/
   }

}

Typo3 Custom filed on Content Element

2 Answers