Wer im TYPO3-Repository schon mal öfters unterwegs ist, wird evtl. festgestellt haben, dass es für Spalten als Contentelement nur 3 Extensions gibt. Eine Extension, die beliebig viele Spalten anlegen kann gibt es nicht. Ohne nun eine neue Extension zu erstellen für 4-Spaltigkeit und mehr erkläre ich Euch wie man sowas z.B. mit FCEs aus dem Paket TemplaVoila lösen könnte.
Die folgende Anleitung ist nur ein Beispiel. Es bleibt Euch überlassen dieses entsprechend zu erweitern oder als Grundlage für eigene Projekte zu kopieren.
Zunächst brauchen wir ein Template (flex-cols.html):
<html> <head> <title>hallo</title> <link rel="stylesheet" type="text/css" href="style/flex-cols.css" media="all" /> </head> <body> <div class="flex-section"> <div class="flex-container"> <div class="flex-cols">###CONTENT###</div> </div> </div> </body> </html>
und die dazugehörige CSS-Datei (flex-cols.css):
div.flex-col { float: left; } div.clearer { clear: both; height: .1px; font-size: 0; line-height: 0; }
Bewegt Euch nun vom Contextmenü des Templates zum TemplaVoila-Mapping und macht folgende Zuordnungen:
- ROOT -> BODY (inner)
- Section (field_section) -> DIV.section (inner): SC:Abschnitt für Elementen
- Container (field_container) -> DIV.container (inner): CO:Container für Elemente
- Render (field_render) -> DIV.flex-cols (outer): EL:Element: Auswahlbox
- Type (field_type) -> NOT Mapped (TypoScript-Objectpath: lib.flexcols)
- Text (field_text) -> NOT Mapped (Textbereich für Textinhalt)
- Image (field_image) -> NOT Mapped (Bildfeld mit fester B+H)
- Image width (field_imagewidth) -> NOT Mapped (Ganzzahliger Wert)
- Image border (field_imgborder) -> NOT Mapped (Markierungsfeld)
Achtet beim Speichern darauf, dass Ihr “Inhaltselement” wählt und nicht “Seitentemplate”.
Die NOT Mapped-Elemente werden nicht sofort im FE ausgegeben, sondern werden mit Hilfe des Objektpfades in Render (field_render) zusammengeführt. Dazu später mehr.
Klick nun links im Hauptmenü auf “TemplaVoila” und dann auf den kleinen gelben Bleistift Eures neuen FCEs, um das XML bearbeiten zu können:
<?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_section type="array"> <type>array</type> <tx_templavoila type="array"> <title>Section</title> <description>Section</description> <eType>input</eType> <tags>div:inner</tags> <preview></preview> </tx_templavoila> <el type="array"> <field_container type="array"> <type>array</type> <tx_templavoila type="array"> <title>Container</title> <description>Container</description> <eType>input</eType> <tags>div:inner</tags> <TypoScript></TypoScript> <proc type="array"> <int>0</int> <HSC>0</HSC> <stdWrap></stdWrap> </proc> <preview></preview> </tx_templavoila> <TCEforms type="array"> <label></label> <config type="array"> </config> </TCEforms> <el type="array"> <field_render type="array"> <tx_templavoila type="array"> <title>Render</title> <description>Render</description> <sample_data type="array"> <numIndex index="0">RENDER</numIndex> </sample_data> <eType>TypoScriptObject</eType> <tags>div:outer</tags> <proc type="array"> <int>0</int> <HSC>0</HSC> <stdWrap></stdWrap> </proc> <preview></preview> <TypoScriptObjPath>lib.flexcols</TypoScriptObjPath> </tx_templavoila> </field_render> <field_type type="array"> <type>no_map</type> <tx_templavoila type="array"> <title>Type</title> <description>Type</description> <sample_data type="array"> <numIndex index="0">TYPE</numIndex> </sample_data> <eType>select</eType> <TypoScript></TypoScript> <proc type="array"> <int>0</int> <HSC>0</HSC> <stdWrap></stdWrap> </proc> <preview></preview> </tx_templavoila> <TCEforms type="array"> <label>Inhaltstyp</label> <strong><onChange>reload</onChange></strong> <config type="array"> <type>select</type> <items type="array"> <strong><numIndex index="0" type="array"> <numIndex index="0"></numIndex> <numIndex index="1">0</numIndex> </numIndex> <numIndex index="1" type="array"> <numIndex index="0">Text</numIndex> <numIndex index="1">1</numIndex> </numIndex> <numIndex index="2" type="array"> <numIndex index="0">Bild</numIndex> <numIndex index="1">2</numIndex> </numIndex></strong> </items> <default>0</default> </config> </TCEforms> </field_type> <field_text type="array"> <type>no_map</type> <tx_templavoila type="array"> <title>Text</title> <description>Text</description> <sample_data type="array"> <numIndex index="0">TEXT</numIndex> </sample_data> <eType>text</eType> <TypoScript></TypoScript> <proc type="array"> <HSC type="integer">1</HSC> <stdWrap></stdWrap> </proc> <preview></preview> </tx_templavoila> <TCEforms type="array"> <label>Text</label> <strong><displayCond>FIELD:field_type:=:1</displayCond></strong> <config type="array"> <type>text</type> <cols>48</cols> <rows>5</rows> </config> </TCEforms> </field_text> <field_image type="array"> <type>no_map</type> <tx_templavoila type="array"> <title>Image</title> <description>Image</description> <sample_data type="array"> <numIndex index="0">IMAGE</numIndex> </sample_data> <eType>imagefixed</eType> <strong><TypoScript> 10 = TEXT 10.current = 1 </TypoScript></strong> <preview></preview> </tx_templavoila> <TCEforms type="array"> <label>Image</label> <strong><displayCond>FIELD:field_type:=:2</displayCond></strong> <config type="array"> <type>group</type> <internal_type>file</internal_type> <allowed>gif,png,jpg,jpeg</allowed> <max_size>1000</max_size> <uploadfolder>uploads/tx_templavoila</uploadfolder> <show_thumbs>1</show_thumbs> <size>1</size> <maxitems>1</maxitems> <minitems>0</minitems> </config> </TCEforms> </field_image> <field_imagewidth type="array"> <type>no_map</type> <tx_templavoila type="array"> <title>Image width</title> <description>Image width</description> <sample_data type="array"> <numIndex index="0">Image width</numIndex> </sample_data> <eType>int</eType> <TypoScript></TypoScript> <proc type="array"> <int>1</int> <HSC>0</HSC> <stdWrap></stdWrap> </proc> <preview></preview> </tx_templavoila> <TCEforms type="array"> <label>Image width</label> <strong><displayCond>FIELD:field_type:=:2</displayCond></strong> <config type="array"> <type>input</type> <size>4</size> <max>4</max> <eval>int</eval> <checkbox>0</checkbox> <range type="array"> <upper>999</upper> <lower>25</lower> </range> <default type="integer">0</default> </config> </TCEforms> </field_imagewidth> <field_imgborder type="array"> <type>no_map</type> <tx_templavoila type="array"> <title>Image border</title> <description>Image border</description> <sample_data type="array"> <numIndex index="0">Image border</numIndex> </sample_data> <eType>check</eType> <TypoScript></TypoScript> <proc type="array"> <int>0</int> <HSC>0</HSC> <stdWrap></stdWrap> </proc> <preview></preview> </tx_templavoila> <TCEforms type="array"> <label>Image border</label> <strong><displayCond>FIELD:field_type:=:2</displayCond></strong> <config type="array"> <type>check</type> <default type="integer">0</default> </config> </TCEforms> </field_imgborder> </el> </field_container> </el> <section>1</section> </field_section> </el> </ROOT> </T3DataStructure>
Ich habe Euch meine Änderungen fett hervorgehoben. Unser field_type wird zum Flexformwechsler (onChange und reload) und in jedem einzelnen Eingabefeld bestimme ich mit displayCond, wann es angezeigt werden soll (bei Bild oder Text).
Im Seitentemplate tragt Ihr nun folgenden Inhalt ein
Constants:
flexcols { imageWidth = 150 colWidth = borderWidth = 2 borderStyle= solid borderColor = #000000 }
Dieses Beispiel zeigt, wie Ihr Defaultwerte für Euer FCE setzen könnt. Es obliegt Euch weitere zu definieren.
Setup:
lib.flexcols = COA lib.flexcols { 5 = LOAD_REGISTER 5.first = first 5.first.if.isTrue.data = REGISTER:tx_templavoila_pi1.sectionIsFirstItem 6 = LOAD_REGISTER 6.last = last 6.last.if.isTrue.data = REGISTER:tx_templavoila_pi1.sectionIsLastItem 7 = LOAD_REGISTER 7.styles.cObject = COA 7.styles.cObject.10 = TEXT 7.styles.cObject.10 { value = width: wrap = |{$flexcols.colWidth}; if.isTrue = {$flexcols.colWidth} } 10 = COA 10 { 10 = TEXT 10 { field = field_text if.isTrue.field = field_text } 20 = IMAGE 20 { file.import = uploads/tx_templavoila/ file.import.field = field_image file.width = {$flexcols.imageWidth} file.width.override.field = field_imagewidth params.stdWrap.cObject = TEXT params.stdWrap.cObject { value = style="border:{$flexcols.borderWidth}px {$flexcols.borderStyle} {$flexcols.borderColor};" if.isTrue.field = field_imgborder } if.isTrue.field = field_image } stdWrap.dataWrap = <div class="flex-col flex-col-{REGISTER:tx_templavoila_pi1.sectionPos} {REGISTER:first} {REGISTER:last}" style="{REGISTER:styles}">|</div> stdWrap.append = TEXT stdWrap.append { value = <div class="clearer"></div> if.isTrue.data = REGISTER:tx_templavoila_pi1.sectionIsLastItem } } 100 = RESTORE_REGISTER 101 = RESTORE_REGISTER }
Mit Hilfe diesem TypoScripts habt Ihr sogar einen Spaltenzähler, um im Bedarfsfall jede Spalte individuell per CSS ansprechen zu können. Da man nie wissen kann, wie viele Spalten der Redakteur angelegt hat, habe ich hier noch ein Passusdrin, um die vorhandenen Klassen um “first” und “last” zu erweitern.
Der Defaultwert (Constants) der Bildbreite kann hier bei Bedarf überschrieben werden und damit der Redakteur nicht jeden Bildrahmen in einer verschiedenen Farbe erstellt, wird diese in den Constants einmalig definiert und kann innerhalb des FCEs nur de- bzw. aktiviert werden.
Viel Spaß mit den flexiblen Spalten auf Basis eines FCEs.
)
Karl am 13. September 2010 um 13:03
