FCE mit Typo3 6.2
Besonders die FCE sind eine Funktionalität von TemplaVoila, die mit den ganzen Alternativen kaum zu ersetzen ist. Ich hoffe, dass TemplaVoila noch lange gepflegt wird.
Vorbereitungen
Bevor es mit der eigentlichen Erstellung eines FCE losgeht sollte man im Feld Seiten TSConfig der root-Seite ein paar Einschränkungen vornehmen.
Hier sortiert nach den Reitern und der Position innerhalb der Reiter.
TCEFORM.tt_content { colPos.types.templavoila_pi1.disabled = 1 sys_language_uid.types.templavoila_pi1.disabled = 0 header.types.templavoila_pi1.disabled = 0 header_layout.types.templavoila_pi1.disabled = 1 header_position.types.templavoila_pi1.disabled = 1 date.types.templavoila_pi1.disabled = 1 header_link.types.templavoila_pi1.disabled = 1 subheader.types.templavoila_pi1.disabled = 1 hidden.types.templavoila_pi1.disabled = 1 sectionIndex.types.templavoila_pi1.disabled = 1 linkToTop.types.templavoila_pi1.disabled = 1 starttime.types.templavoila_pi1.disabled = 0 endtime.types.templavoila_pi1.disabled = 0 fe_group.types.templavoila_pi1.disabled = 1 layout.types.templavoila_pi1.disabled = 1 spaceAfter.types.templavoila_pi1.disabled = 0 spaceBefore.types.templavoila_pi1.disabled = 0 section_frame.types.templavoila_pi1.disabled = 1 }
Damit werden in den FCE einige unnötige Felder ausgeblendet.
Da die Zuordnung der Feldnamen nur schwer recherchierbar ist, hier einmal eine Übersicht meiner Ergebnisse
Mit diesen Informationen kann man dann gezielt Felder ausblenden (disabled = 1) oder auch nicht (disabled = 0).
Das FCE UDRoundBox
Die Entwicklung eines FCE geht in der Regel mit dem Erstellen einer HTML-Vorlage los. Die folgende Datei wird unter fileadmin/templates/FCE/box-ud.html abgelegt.
<html> <body> <div class="boxUD"> <div class="boxUD"> <h1>Headline</h1> <p>Dies ist einfach eine Box.</p> </div> </div> </body> </html>
TV Kontrollzentrum
Diese Datei sucht man dann im TemplaVoila Kontrollzentrum unter Vorlagendateien und klickt auf das grüne Pluszeichen am Ende der Zeile.
Für das root-Element wählt man hier den Body-Tag mit dem Modus Inner aus. Dann legt man ein neues Element
Dann legt man ein neues Element an, indem man den Namen field_box_content dort einträgt wo [Neuen Feldnamen eingeben] steht und anschließend auf Add drückt. Das Formular füllt man dann folgendermaßen aus.
Zum Abschluss beendet man die Eingabe mittels Hinzufügen. Dann kann man ein weiteres Elemente anlegen, mit dem Namen field_box_bachground
Wichtig ist hier die Einstellung Attribut. Nach dem Klick auf Hinzufügen ändert sich das Icon auch in der Farbe.
Nun folgen noch zwei weitere Attributfelder field_box_border und field_box_radius
Der Typoscript-Code
Zum Abschluss mappt man das Content-Feld an das äußere DIV mit dem Modus Inner und gibt unter Datenverarbeitung den Typoscript-Code ein.
10 = COA 10.10 = TEXT 10.10.data = register:tx_templavoila_pi1.parentRec.header 10.10.wrap = <h1>|</h1> 10.10.if.isTrue.data = register:tx_templavoila_pi1.parentRec.header 10.20 = TEXT 10.20.field = field_box_border 10.20.ifEmpty = #aaaaaa 10.20.wrap = <div class="boxUDContent" style="border-color: |; 10.30 = TEXT 10.30.field = field_box_background 10.30.ifEmpty = #eeeeee 10.30.wrap = background-color: | ; 10.40 = TEXT 10.40.field = field_box_radius 10.40.ifEmpty = 10px 10.40.wrap = border-radius: | ;"> 10.50= RECORDS 10.50.source.current=1 10.50.tables = tt_content 10.60 = TEXT 10.60.value = </div>
Am Ende klickt man auf Aktualisieren für das Feld und dann auf Speichern Unter.
In dem letzten Formular gibt man einen Namen für das FCE an, hier UDRoundBox und gibt dann als Vorlagentyp Inhaltselement an. Zum Abschluss klickt man dann auf DS / VO erstellen.
Man kann dann natürlich auch wieder eine Grafik hochladen, passend wäre z.B. die folgende Abbildung.
Das Data Structure XML
Wenn man der Beschreibung gefolgt ist, dann sollte sich folgendes XML ergeben haben.
<?xml version="1.0" encoding="utf-8" 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_box_content type="array"> <tx_templavoila type="array"> <title>UDroundBox Content</title> <description>Ans Content-Element mappen</description> <sample_data type="array"> <numIndex index="0">[ Inhalt ]</numIndex> </sample_data> <eType>ce</eType> <tags>div</tags> <TypoScript><![CDATA[10 = COA 10.10 = TEXT 10.10.data = register:tx_templavoila_pi1.parentRec.header 10.10.wrap = <h1>|</h1> 10.10.if.isTrue.data = register:tx_templavoila_pi1.parentRec.header 10.20 = TEXT 10.20.field = field_box_border 10.20.ifEmpty = #aaaaaa 10.20.wrap = <div class="boxUDContent" style="border-color: |; 10.30 = TEXT 10.30.field = field_box_background 10.30.ifEmpty = #eeeeee 10.30.wrap = background-color: | ; 10.40 = TEXT 10.40.field = field_box_radius 10.40.ifEmpty = 10px 10.40.wrap = border-radius: | ;"> 10.50= RECORDS 10.50.source.current=1 10.50.tables = tt_content 10.60 = TEXT 10.60.value = </div> ]]></TypoScript> <proc type="array"> <int>0</int> <HSC>0</HSC> <stdWrap></stdWrap> </proc> <preview></preview> <oldStyleColumnNumber>0</oldStyleColumnNumber> <enableDragDrop>1</enableDragDrop> </tx_templavoila> <TCEforms type="array"> <label>BoxUD Content</label> <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> </TCEforms> </field_box_content> <field_box_background type="array"> <type>attr</type> <tx_templavoila type="array"> <title>Box Hintergrund-Farbe z.B. #ff0000 oder #f00 oder red</title> <description>nicht Mappen</description> <sample_data type="array"> <numIndex index="0">yellow</numIndex> </sample_data> <eType>input</eType> <TypoScript type="NULL"></TypoScript> <proc type="array"> <int>0</int> <HSC>1</HSC> <stdWrap></stdWrap> </proc> <preview></preview> </tx_templavoila> <TCEforms type="array"> <label>Box Hintergrund-Farbe z.B. #ff0000 oder #f00 oder red</label> <config type="array"> <type>input</type> <size>48</size> <eval>trim</eval> </config> </TCEforms> </field_box_background> <field_box_border type="array"> <type>attr</type> <tx_templavoila type="array"> <title>Box Rahmen-Farbe z.B. #ff0000 oder #f00 oder red</title> <description>nicht mappen </description> <sample_data type="array"> <numIndex index="0">red</numIndex> </sample_data> <eType>input</eType> <proc type="array"> <HSC type="integer">1</HSC> <stdWrap></stdWrap> </proc> <preview></preview> <TypoScript type="NULL"></TypoScript> </tx_templavoila> <TCEforms type="array"> <label>Box Rahmen-Farbe z.B. #ff0000 oder #f00 oder red</label> <config type="array"> <type>input</type> <size>48</size> <eval>trim</eval> </config> </TCEforms> </field_box_border> <field_box_radius type="array"> <type>attr</type> <tx_templavoila type="array"> <title>Box Radius z.B. 10px</title> <description>nicht mappen </description> <sample_data type="array"> <numIndex index="0">30px</numIndex> </sample_data> <eType>input</eType> <TypoScript type="NULL"></TypoScript> <proc type="array"> <int>0</int> <HSC>1</HSC> <stdWrap></stdWrap> </proc> <preview></preview> </tx_templavoila> <TCEforms type="array"> <label>Box Radius z.B. 10px</label> <config type="array"> <type>input</type> <size>48</size> <eval>trim</eval> </config> </TCEforms> </field_box_radius> </el> </ROOT> </T3DataStructure>
FCE verfügbar
Damit ist dieses FCE im TemplaVoila-Kontrollzentrum verfügbar.
Und nicht nur dort, sondern auch bei den Inhaltselementen die man auf einer Seite einfügen kann.
Bei den Eigenschaften des Inhaltselemente auf der Seite sind dann die notwendigen Felder sichtbar.
In dieses Element kann man jetzt wieder beliebige Inhaltselemente hineinlegen, diese werden im Backend in dem Content-Feld angezeigt, im Frontend erscheinen sie in einer runden Box mit den hier gemachten Einstellungen.
Weitere Informationen
Unter
- http://elearn-server.de/typo3wiki/index.php5/TemplaVoila_-_FCE_-_Hintergrund
- http://elearn-server.de/typo3wiki/index.php5/TemplaVoila_-_Inhaltselement
finden sich zwei Texte mit einfachen FCE-Beispielen.