CODEWITHSUNDEEP
typo3typo3-8.x
Felix
Felix

Reputation: 5619

Typo3 Custom filed on Content Element

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>



}

Upvotes: 0

Views: 1276

Answers (2)

Bernd Wilke πφ
Bernd Wilke πφ

Reputation: 10791

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/
   }

}

Upvotes: 2

Felix
Felix

Reputation: 5619

I found a solution which works for me.

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

        4 = TEXT        
        4.value = <div class="blue"><div class="container-fluid"><div class="design">|</div></div></div>

        5 = TEXT
        5.value = <div class="white"><div class="container-fluid"><div class="design">|</div></div></div>

        6 = TEXT
        6.value = <div class="grey"><div class="container-fluid"><div class="design">|</div></div></div>
    }

Upvotes: 0

Related Questions