Internetservice - Blog

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

TYPO3 Contentblöcke mit Templavoila erzeugen

Aufgabenstellung:

  1. Es sollen Contenblöcke mit Überschriften mit farbigem Hintergrund ausgegeben werden
  2. Eine globale Hintergrundfarbe soll per CSS-Stylesheet vorgegeben werden
  3. Per Typoscript soll für bestimmte Zweige im Seitenbaum die Farbe vorgegeben werden
  4. 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

.contentmitteboxlangheaderrot {
    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

contentHeadline.bgcolor = blue

Im Setup-Bereich des Typoscript-Templates die Konstanten exportieren

_CONSTANTS.contentHeadline {
  bgcolor = {$contentHeadline.bgcolor}
}

3) Das Templavoila-HTML-Template

<div class="dummy">
<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

<stdwrap>
  wrap = |&#60;/div&#62;
 </stdwrap>

Hinweis: die eckigen Klammern wurden encodiert um Konflikte mit dem XML-Parser zu vermeiden

Zeile 43-45: Die Typoscriptkonstanten importieren

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

Zeile 46-51: Die Typoscript gesteuerte Ausgabe
Zeile 47-48: Den Eingabewert des Feldes holen

10 = TEXT
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 = TEXT
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

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