TYPO3 Contentblöcke mit Templavoila erzeugen
Aufgabenstellung:
- Es sollen Contenblöcke mit Überschriften mit farbigem Hintergrund ausgegeben werden
- Eine globale Hintergrundfarbe soll per CSS-Stylesheet vorgegeben werden
- Per Typoscript soll für bestimmte Zweige im Seitenbaum die Farbe vorgegeben werden
- Der Redakteur soll per TYPO3 Colorpicker-Wizard für einzelne Seiten die Hintergrundfarbe individuell festlegen können
Die Problemlösung:
1) Die globale Definition im Stylesheet
background-image:url(/fileadmin/templates/images/bgboxlang.gif);
background-repeat:no-repeat;
background-position: top;
color: white;
width: 545px;
font-weight: bold;
padding: 3px 0 3px 15px;
background-color: #df002a;
}
2) Die Farben als Typoscript-Konstanten festlegen und für die Verwendung in TCEForms exportieren
Im Konstantenbereich des Typoscript-Templates des jeweiligen Seitenbaumzweiges die Hintergrundfarbe definieren
Im Setup-Bereich des Typoscript-Templates die Konstanten exportieren
bgcolor = {$contentHeadline.bgcolor}
}
3) Das Templavoila-HTML-Template
<div class="rgb"></div>
<div class="headline"></div>
<div class="contentmitteboxlang">Content</div>
</div>
4) Das mit Templavoila per Mapping erzeugte TCEForm/Datenstruktur anpassen
Einige Erklärungen:
Zeile 22-24: Ein schließendes HTML-div-Tag nach den Überschriftstext wrappen
wrap = |</div>
</stdwrap>
Hinweis: die eckigen Klammern wurden encodiert um Konflikte mit dem XML-Parser zu vermeiden
Zeile 43-45: Die Typoscriptkonstanten importieren
<bgcolor>{$_CONSTANTS.contentHeadline.bgcolor}</bgcolor>
</typoscript_constants>
Zeile 46-51: Die Typoscript gesteuerte Ausgabe
Zeile 47-48: Den Eingabewert des Feldes holen
10.field = field_rgb
Hinweis: Der Feldname field_rgb entspricht der XML-Feldbezeichnung in Zeile 36 der Datenstruktur
Zeile 49-50: Falls kein individueller Wert eingegeben wurde die Vorgabe durch die Typoscript-Konstante verwenden
10.stdWrap.ifEmpty.cObject.value = {$bgcolor}
Hinweis: Die Konstantenbezeichnung $bgcolor entspricht dem XMl-Tagnamen in Zeile 44 beim Konstantenimport
Zeile 53-55: Der Ausgabewert wird gewrapped und in ein style-Attribut eingebaut
wrap = <div class="contentmitteboxlangheaderrot" style="background-color: |;">
</stdwrap>
Hier nun die vollständige Datenstruktur mit der Integration des Colorpicker-Wizard
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 | <?xml version="1.0" encoding="iso-8859-1" standalone="yes" ?> <T3DataStructure> <meta type="array"> <langDisable>1</langDisable> </meta> <ROOT type="array"> <tx_templavoila type="array"> <title>ROOT</title> <description>Wählen Sie das HTML-Element der Seite, das Sie als übergeordnetes Container-Element der Vorlage möchten.</description> </tx_templavoila> <type>array</type> <el type="array"> <field_headline type="array"> <tx_templavoila type="array"> <title>Überschrift</title> <sample_data type="array"> <numIndex index="0"></numIndex> </sample_data> <eType>input_h</eType> <proc type="array"> <stdWrap> wrap = |</div> </stdWrap> </proc> </tx_templavoila> <TCEforms type="array"> <config type="array"> <type>input</type> <size>48</size> <eval>trim</eval> </config> <label>Überschrift</label> </TCEforms> </field_headline> <field_rgb type="array"> <tx_templavoila type="array"> <title>Hintergrundfarbe Überschrift</title> <sample_data type="array"> <numIndex index="0">#df002a</numIndex> </sample_data> <eType>input</eType> <TypoScript_constants> <bgcolor>{$_CONSTANTS.contentHeadline.bgcolor}</bgcolor> </TypoScript_constants> <TypoScript> 10 = TEXT 10.field = field_rgb 10.stdWrap.ifEmpty.cObject = TEXT 10.stdWrap.ifEmpty.cObject.value = {$bgcolor} </TypoScript> <proc type="array"> <HSC type="integer">1</HSC> <stdWrap> wrap = <div class="contentmitteboxlangheaderrot" style="background-color: |;"> </stdWrap> </proc> </tx_templavoila> <TCEforms type="array"> <config type="array"> <type>input</type> <size>48</size> <eval>trim</eval> <wizards> <colorpick> <type>colorbox</type> <title>LLL:EXT:partner/locallang.php:tx_partner.label.color_picker</title> <script>wizard_colorpicker.php</script> <dim>20x20</dim> <tableStyle>border: solid 1px black; margin-left: 20px;</tableStyle> <JSopenParams>height=500,width=365,status=0,menubar=0,scrollbars=1</JSopenParams> <exampleImg>gfx/wizard_colorpickerex.jpg</exampleImg> </colorpick> </wizards> </config> <label>Hintergrundfarbe Überschrift</label> </TCEforms> </field_rgb> <field_text type="array"> <tx_templavoila type="array"> <title>Text</title> <sample_data type="array"> <numIndex index="0"></numIndex> </sample_data> <eType>ce</eType> <TypoScript> 10= RECORDS 10.source.current=1 10.tables = tt_content </TypoScript> <oldStyleColumnNumber type="integer">0</oldStyleColumnNumber> </tx_templavoila> <TCEforms type="array"> <config type="array"> <type>group</type> <internal_type>db</internal_type> <allowed>tt_content</allowed> <size>5</size> <maxitems>200</maxitems> <minitems>0</minitems> <multiple>1</multiple> <show_thumbs>1</show_thumbs> </config> <defaultExtras>richtext:rte_transform[flag=rte_enabled|mode=ts_css]</defaultExtras> <label>Text</label> </TCEforms> </field_text> </el> </ROOT> </T3DataStructure> |