FCE mit Typo3 6.2

Aus Debacher-Wiki
Zur Navigation springenZur Suche springen

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.

Typo3-62-FCE1.png

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

TCEFORM A.png

TCEFORM Z.png

TCEFORM E.png

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.

Typo3-62-FCE2.png

Für das root-Element wählt man hier den Body-Tag mit dem Modus Inner aus. Dann legt man ein neues Element

Typo3-62-FCE3.png

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.

Typo3-62-FCE4.png

Zum Abschluss beendet man die Eingabe mittels Hinzufügen. Dann kann man ein weiteres Elemente anlegen, mit dem Namen field_box_bachground

Typo3-62-FCE5.png

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

Typo3-62-FCE6.png

Typo3-62-FCE7.png

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>

Typo3-62-FCE8.png

Am Ende klickt man auf Aktualisieren für das Feld und dann auf Speichern Unter.

Typo3-62-FCE9.png

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. FCE UDroundBox.png

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.

Typo3-62-FCE10.png

Und nicht nur dort, sondern auch bei den Inhaltselementen die man auf einer Seite einfügen kann.

Typo3-62-FCE11.png

Bei den Eigenschaften des Inhaltselemente auf der Seite sind dann die notwendigen Felder sichtbar.

Typo3-62-FCE12.png

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

finden sich zwei Texte mit einfachen FCE-Beispielen.

Abgerufen von „https://www.debacher.de/uwiki/index.php?title=FCE_mit_Typo3_6.2&oldid=8172“