TYPO3 und TemplaVoila: Den Colorpicker wizard verwenden
Sie möchten in Flexiblen Contentelementen den TYPO3-Colorpicker wizard verwenden, um ihren Redakteueren die Möglichkeit zu geben Farben individuell einzustellen? Zudem sollen vorsichtshalber Standardfarbeinstellungen per Typoscript vorgeleget werden.
Das folgende Beispiel beschreibt die nötige Technik:
Aufgabe: Es soll eine Kopfzeile ausgegeben werden, deren Farbwert vom Redakteur festgelegt werden kann.
Typoscript-Template: Konstantendefininition
========================================================
Tragen sie die Standardfarbeinstellung im Constantenbereich des root-Typoscript-Templates ein:
Sie können diesen Wert an untergeordneten Stellen des Seitenbaums jederzeit in
Typoscript-Extension-Templates für den einen oder anderen Zweig des Baums überschreiben.
Typoscript-Template: Konstantenexport
========================================================
Schreiben sie folgendes Typoscript in den Setup-Abschnitt des root-Typoscript-Templates ihre Homepage, um die Farbkonstante für den Zugriff aus TemplaVoila- Datenstukturen zu exportieren.
bgcolor = {$contentHeadline.bgcolor}
}
Passen sie nun das Templavoila-Flexform der Datenstuktur an
========================================================
Der Trick: Im HTML-Template wurde ein Dummy-Layer angelegt. Dieser wurde mit dem Templavoila-Wizzard im HTML-Path-Typ OUTLINE als Content-Elemente gemapped.
De facto wird aber nur das öffnende Tag eines HTML-DIV Layers erzeugt, dass den Farbwert in einem Inline-Style-Attribut enthält.
Ein zweites Element enthält die anzuzeigende Kopfzeile. Hinter diesen Text wird das schließende </div> gewrapped.
Zur weiteren Erklärung zunächst einige Abschnitte aus der Datenstrukur:
Import der Typoscript-Farbkonstante in das Templavoila-System
<bgcolor>{$_CONSTANTS.contentHeadline.bgcolor}</bgcolor>
</TypoScript_constants>
Auswertung der Farbkonstante per Typoscript
Nur falls der Redakeur keinen Farbwert festgelegt, wird die Typoscript-Konstante verwendet
10 = TEXT
10.field = field_rgb
10.stdWrap.ifEmpty.cObject = TEXT
10.stdWrap.ifEmpty.cObject.value = {$bgcolor}
</TypoScript>
Der Farbwert wird in diesem Beispiel in ein HTML-Inline-Style-Attribut gewrapped
<HSC type="integer">1</HSC>
<stdWrap>
wrap = <div class="contentmitteboxlangheaderrot" style="background-color: |;">
</stdWrap>
</proc>
Natürlich muss das DIV-Tag auch geschlossen werden:
<stdWrap>
wrap = |</div>
</stdWrap>
</proc>
Hinweis: In beiden Fällen werden die eckigen Klammern des HTML-Codes encodiert, damit der XML-Parser beim Auswerten des Flexforms nicht verzweifelt.
Konfiguration des Colorpicker wizard
<colorpick>
<type>colorbox</type>
<title>LLL:EXT:tx_your_extension/locallang.php:tx_your_extension.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>
Hinweis: Passen sie ggf. den Pfad für die Sprachdatei an.
Hier die komplette Datenstruktur:
========================================================
Bitte bachten sie, an welchen Stellen im Feld rgb (”field_rgb”) bzw headline (”field_headline”) sie obige XML-Schnipsel einfügen müssen.
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> |