Internetservice - Blog

bit4you präsentiert einen Blog rund um die Themen TYPO3, MySQL und PHP

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:

contentHeadline.bgcolor = blue

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.

_CONSTANTS.contentHeadline {
  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

<TypoScript_constants>
     <bgcolor>{$_CONSTANTS.contentHeadline.bgcolor}</bgcolor>
</TypoScript_constants>

Auswertung der Farbkonstante per Typoscript
Nur falls der Redakeur keinen Farbwert festgelegt, wird die Typoscript-Konstante verwendet

<TypoScript>
   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

<proc type="array">
   <HSC type="integer">1</HSC>
   <stdWrap>
      wrap = &#60;div class="contentmitteboxlangheaderrot" style="background-color: |;"&#62;
   </stdWrap>
</proc>

Natürlich muss das DIV-Tag auch geschlossen werden:

<proc type="array">
   <stdWrap>
      wrap = |&#60;/div&#62;
   </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

<wizards>
   <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 = |&#60;/div&#62;
                        </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 = &#60;div class="contentmitteboxlangheaderrot" style="background-color: |;"&#62;
                        </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>

Kommentare sind zur Zeit geschlossen.

Internetservice - Blog läuft unter Wordpress 2.3.2
Anpassung und Design: bit4you :: Waldseer Str. 14 :: 88250 Weingarten