Aus Debacher-Wiki

Wechseln zu: Navigation, Suche

Diese Seite ist momentan in der Überarbeitung, weil ich (fast) ohne die Extension dbttv auskommen möchte. Die Version Typo3 mit dbttv ist aber noch vorhanden. Ganz verzichten auf die Arbeit von Dieter Bunkerd möchte ich aber auf keinen Fall. Seine FCE sind einfach klasse und auf die kommt es mir an. Sein Typoscript ist mir in der Handhabung zu kompliziert, ich schreibe lieber selber ein paar Zeilen Code, als den umfangreichen Code von ihm anzupassen. Ich bin so auch nicht auf die von dbttv mitgelieferte YAML-Version angewiesen, zum Einsatz kommt hier 3.2.

Auf der Seite Typo3Layout habe ich beschrieben, wie man prinzipiell YAML mit Typo3 nutzen kann. Richtig interessant wird das YAML-Paket aber anscheinen erst, wenn man mit TemplaVoila arbeitet. Gerade im Zusammenspiel von TemplaVoila und YAML ergibt sich eine Reihe von neuen Gestaltungsmöglichkeiten für Webseiten.

Die hier beschriebene Installation steht in einem kompletten Paket zur Verfügung. Beim Auspacken entsteht ein Ordner yamlud der die komplette Konfiguration beinhaltet, inklusive Dummy-Paket von Typo3 4.3.0. Im Unterordner typo3conf muss nur die Datei localconf angepasst werden und die Datei datenbankinhalt.sql in die MySQL-Datenbank eingespielt werden.

Für die Installation habe ich die Standard-Pakete von Typo3 4.3.0 benutzt.

Installation

Vor der eigentlichen Typo3-Installation sollte man schon die zugehörige Datenbank anlegen. Wichtig dabei ist, dass die Datenbank mit der Kollation utf8_unicode_ci angelegt wird. Außerdem muss ein Benutzer erstellt werden, der Zugriff auf diese Datenbank hat. Dieser Nutzer benötigt Zugriff auf die Daten und auf die Struktur, aber keinen administrativen Zugriff.

Auf der Downloadseite für Typo3 finden sich die benötigten Pakete, die man auf dem Server einspielt.

Vor der Installation muss man im Unerverzeichnis typo3conf eine ruhig leere Datei ENABLE_INSTALL_TOOL anlegen mittels

sudo touch typo3conf/ENABLE_INSTALL_TOOL

Nun folgen die normalen Installationsschritte, wie man es von Typo3 her kennt.

Aufpassen muss man etwas bei Schritt 3:

Hier muss man die Default-Datenbankvorlage auswählen, damit auch die notwendigen Dateien und Seiten wirklich komplett installiert sind. Nach diesem Schritt geht man dann weiter zur empfohlenen Konfiguration des Typo3-Systems.

Anpassungen

Die meisten Einstellungen sind schon richtig angegeben, so dass im Installationsscript nicht mehr viel zu tun ist. Es ist trotzdem immer sinnvoll die Grafikfunktionen zu überprüfen, bevor man an die Gestaltung der eigenen Seite geht. Meistens muss man auch die Einstellung für die Schriftgröße und Grafikunterstützung anpassen:

[GFX][TTFdpi]= 96
[GFX][im_version_5] = gm
[GFX][gdlib_2] = 1

und das Charset:

[BE][forceCharset] = utf-8
[SYS][setDBinit] = SET NAMES utf8

und ggf. noch den Pfad zu GraphicsMagick angeben

[GFX][im_path] = /usr/bin/

Danach kann man dann ins Backend wechseln.

Im Backend sollte man unter Ext Manager gleich drei Einstellungen vornehmen:

Im Reiter Settings erlaubt man den Zugriff auch auf nicht überprüfte Extensions, sonst stehen diese für einen Download nicht zur Verfügung.

Im Reiter Translation Handling aktiviert man zumindest German als erlaubte Backend-Sprache.

Nach dem Speichern der Sprach-Auswahl muss man übrigens noch Update from repository klicken, um die Sprachdatei wirklich herunter zu laden. Falls zu viele Fehler auftauchen, kann man dieses Update auch wiederholen. Auch später macht es Sinn hier nach neuen Sprachdateien zu suchen.

Hinweis: Bei der Typo3-Version 4.2.9 tritt an dieser Stelle ein Bug auf, wenn für das Backend ein Kompressionslevel gesetzt ist. Dann bekommt man an anstatt des Updates nur eine leere Seite zu sehen.

Unter Import Extensions sollte man dann noch über Retrieve Update die Liste der Extensions aktualisieren, damit man auch immer die aktuellen Versionen herunterlädt.

Danach kann man dann auch für den Administrator unter User settings die Backend-Sprache auf Deutsch umstellen.

Installation der Extensions

Nun muss man zuerst einmal die notwendigen Extensions installieren. Bei mir sind das der Reihe nach:

date2cal
phpmyadmin
(kj_recycler) inzwischen obsolet
rgtabs
api_macmade
dropdown_sitemap
static_info_tables (braucht templavoila)
(sr_language_menu)
tt_news
tt_address
perfectlightbox
doc_indexed_search
indexed_search
macina_searchbox
tw_rssfeeds
templavoila

Installation von YAML

Im nächsten Schritt holt man sich das aktuelle YAML-Paket von http://yaml.de und entpackt es in dem Ordner fileadmin.

Bei der Version 3.2 von Yaml gibt es kein übergeordnetes Verzeichnis mehr, es bietet sich also an, unterhalb von fileadmin einen Ordner yaml anzulegen. Im Ordner fileadmin/yaml finden sich nach dem Entpacken vier Textdateien und die Ordner documentation, tools, yaml, js, examples.

Danach habe ich mir noch von dem Paket DBTTV die Seite mit dem Templa-Voila-Templates importiert und unterhalb von fileadmin die Verzeichnisstruktur neu organisiert:

fileadmin
 |--- _temp_       (gehört zu Typo3)
 |
 |--- user_upload  (gehört zu Typo3)
 |
 |--- yaml         (das CSS-Paket s.o.)
 |
 |--- FCE          (hier sammle ich die FCE-Dateien von DBTTV)
 |
 |--- templates    (meine eigenen Templates und FCEs)

Im Backend habe ich eine Seite für typo-Script Templates angelegt und einige Standard-Seiten, damit man die Konfigurationen auch überprüfen kann. Der Seitenbaum in Typo3 hat folgenden Aufbau:

Nun fehlt noch eine wichtige Einstellung auf der root-Seite, nämlich die Verknüpfung mit der Seite mit den TemplaVoila Templates.

Dann noch in den Seiteneinstellungen der root-Seite ein TemplaVoila Template auswählen.

Erstellen des Seiten-Templates

Nun muss man für die root-Seite noch ein normales Template erstellen. Wichtig ist vor allem erst einmal, dass man die wichtigsten statischen Templates einbindet, vor allem CSS_styled_content.

Wenn man jetzt dieses Template speichert, dann kann man schon die Frontend-Seite aufrufen, bekommt aber nur den Text "Hello World" zu sehen. Finden kann man den Text im Reiter Allgemein unter Konfiguration als Vorgabe.

Will man eigene Texte sehen können, so muss man das typo-Script verändern.

page = PAGE
page {
  typeNum = 0
  10 = USER
  10.userFunc = tx_templavoila_pi1->main_page
}

Nach diesen Schritten erscheinen schon die eigenen Texte auf der Front-End Seite, aber es fehlt noch die Gestaltung. Dafür muss man die notwendigen CSS-Dateien im Header der Seite unterbringen, natürlich mit Typo-Script.

page = PAGE
 page {
   typeNum = 0
   10 = USER
   10.userFunc = tx_templavoila_pi1->main_page
 
   meta.AUTHOR= Uwe Debacher und Netthelp
   meta.DESCRIPTION = Netthelp - Die Schülerfirma in Hamburg
 
   headerData.20 = TEXT
   headerData.20.value (
   <link href="fileadmin/yaml/examples/02_layouts_2col/css/layout_2col_left_13.css" rel="stylesheet" type="text/css" />
   )
  
   headerData.30 = TEXT
   headerData.30.value (
   <!--[if lte IE 7]><link href="fileadmin/yaml/examples/02_layouts_2col/css/patches/patch_2col_left_13.css" rel="stylesheet" type="text/css"><![endif]--> 
   )
  
   headerData.40 = TEXT
   headerData.40.value (
   <link href="fileadmin/FCE/FCE-styles.css" rel="stylesheet" type="text/css" />
   )
 
   headerData.50 = TEXT
   headerData.50.value (
   <!--[if lte IE 7]><link href="fileadmin/templates/ieanpassung.css" rel="stylesheet" type="text/css" /><![endif]--> 
   )   

   headerData.60 = TEXT
   headerData.60.value (
   <link href="fileadmin/templates/anpassung.css" rel="stylesheet" type="text/css" />
 
   )  
 }
 
 config {
   doctype = xhtml_trans
   xhtml_cleaning = all
 
   headerComment = Templates von Netthelp.de
 
   language = de
   htmlTag_langKey = de
   sys_language_uid = 0
   locale_all = de_DE
 
   noScaleUp = 1
 
   sendCacheHeaders = 1
   inlineStyle2TempFile = 1
   # removeDefaultJS = external
   # removeDefaultJS = 1
 
   index_enable = 1
   sword_standAlone = 0
   sword_noMixedCase = 0
 
   intTarget = _self
   extTarget = _blank
 
   # spamProtectEmailAddresses = 1
   spamProtectEmailAddresses = ascii
   spamProtectEmailAddresses_atSubst = (at)
   spamProtectEmailAddresses_lastDotSubst = (dot)
 
 }

 // Reihenfolge von Doctype und XML-Prolog beim Internet Explorer tauschen (wegen Bug) 
 [browser = msie] && [version= <7]
   config.doctypeSwitch = 1
 [else]
   config.doctypeSwitch = 0
 [end]

Unter der Nummer 20 wird das passende Standard-Layout aus dem YAML-Paket eingebunden, unter Nummer 30 die zugehörigen Patches für einen nicht standardkonformen Browser-Typ. Unter Nummer 40 folgen einige Einstellungen von DBTTV für die genutzten FCE. Alle Vorgaben möchte man anpassen können, daher unter Nummer 50 die Anpassungen für den nicht standardkonformen Browser und unter Nummer 60 die eigentlichen Anpassungen. Das wirksame Layout der Seite findet sich also in der Datei fileadmin/templates/anpassung.css.

Im Bereich config finden sich dann noch ein paar wichtige Grundeinstellungen für die Seite, u.a. die Sprache.

Die letzten Zeilen stellen eine Browserweiche in Typoscript dar. Der IE6 und vermutlich auch seine Vorgänger mögen nicht, wenn die erste Zeile des HTML-Quelltextes

<?xml version="1.0" encoding="utf-8"?>

lautet. Daher muss für diese Browser die Reihenfolge der Zeilen vertauscht werden, was mittels

config.doctypeSwitch = 1

erfolgt.

Im Prinzip könnte man auch die speziellen CSS-Dateien für den IE6 auf diese Art einbinden.

Erstellen eines eigenen Layouts

Dank der FCEs benötigt man eigentlich kein dreispaltiges Layout mehr, zumindest nicht, wenn es nur für einzelne Seiten benötigt wird. Die Erstellung eines eigenen Layout geht im Idealfall von einer der mitgelieferten Vorlagen-Dateien aus, die dann an die eigenen Bedürfnisse angepasst wird.

Die HTML-Vorlage

Die mitgelieferte Vorlage für das zweispaltige Layout findet sich unter:

fileadmin/yaml/examples/02_layouts_2col/2col_left_13.html

Diese Datei kopiert man sich in den vorhandenen Ordner fileadmin/templates:

cp fileadmin/yaml/examples/02_layouts_2col/2col_left_13.html fileadmin/templates/zweispaltig.html
chown wwwrun.www zweispaltig.html

Damit die Pfade zu den Style-Dateien auch dann stimmen, wenn man die Vorlagen-Datei im Browser direkt anschauen möchte, sind die Pfade entsprechend angepasst, Typo3 ersetzt diesen Bereich ja sowieso:

Die benutzte Vorlage hat folgenden schlichten Aufbau:

<!DOCTYPE html
     PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
 <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>HTML template fuer Netthelp.de</title>
        <link href="../yaml/examples/02_layouts_2col/css/layout_2col_left_13.css" rel="stylesheet" type="text/css" />
        <!--[if lte IE 7]><link href="../yaml/examples/02_layouts_2col/css/patches/patch_2col_left_13.css" rel="stylesheet" type="text/css" /><![endif]-->
        <link href="../FCE/FCE-styles.css" rel="stylesheet"   type="text/css" />
        <!--[if lte IE 7]><link href="../templates/styles/ieanpassung.css" rel="stylesheet"  type="text/css" /><![endif]-->
        <link href="../templates/styles/anpassung.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <div id="page_margins">
        <div id="page">
                <div id="header"></div>
                <div id="nav">[Menue oben]</div>
                <div id="main">
                        <div id="service">[Impressum]</div>
                        <div id="rootline">[Rootline]</div>
                        <div id="col1">
                                <div id="col1_content" class="clearfix">
                                        <div class="menuLinks">[Menue   links]</div>
                                        <div class="textBelowMenu">[Inhalt unter Menue]</div>
                                </div>
                        </div>
                        <div id="col3">
                          <a id="content" name="content"></a>
                                <div id="col3_content" class="clearfix">
                                        <div class="floatbox">[Inhalt]</div>
                                </div>
                                <div id="ie_clearing"> </div>
                        </div>
                </div>
                <div id="footer">[Footer]</div>
        </div>
 </div>
 </body>
 </html>

In den eckigen Klammern stehen immer Texte, die andeuten sollen welchen Inhalt Typo3 später für diese Elemente liefern muss.

Ohne CSS-Nutzung ergibt sich für diese Seite im Browser folgendes Bild:

Mit dem passenden CSS sieht es dann ganz anders aus:

Einbinden der Vorlage über TemplaVoila

Wenn die Vorlagendatei fertig ist und auch das zugehörige CSS funktioniert, dann kann man daran gehen die Vorlage innerhalb von Typo3 verfügbar zu machen, es geht dabei darum, die eckigen Klammern in der Vorlagendatei duch Typo3-Inhalte ersetzen zu lassen. Dazu wählt man TemplaVoila, und klickt auf das Icon vor TemplaVoila Templates. In dem Menü wählt man Neu und dann Templa Voila Datenstruktur.

In diesem Formular muss man einen Titel angeben und unter Kategorie den Eintrag Seitenvorlage auswählen. Der Rest kann erst einmal leer bleiben, die Seite kann also so gespeichert werden.

Nun klickt man auf TemplaVoila Templates, die eben angelegte Vorlage sollte jetzt hier zu finden sein. Hier klickt man jetzt auf Create a new Template Object, worauf eine neue Maske erscheint. Das wichtigste Element in dieser Maske ist die Vorlagendatei, die unter Dateireferenz ausgewählt werden kann, indem man auf das entsprechende Icon klickt.

Hier wählt man die selbst erstellte HTML-Datei aus, die anderen Felder können erst einmal leer bleiben, so dass man schon speichern kann. Klickt man jetzt wieder auf TemplaVoila Templates, so steht für das Template jetzt der Buttons Update Mapping zur Verfügung. Klickt man auf den Button, so kommt man zu einer noch recht leeren Maske, in der man Modify DS / TO auswählt. Nach einer Sicherheitsabfrage landet man dann in dem Menü, wo die Zuordnung zwischen HTML und Typoscript erfolgen kann.

Anfangs gibt es hier nur den Eintrag Root, den man auf ein HTML-Element abbilden (mappen) muss. Dazu klickt man auf Map, worauf im unteren Bereich der Maske eine Vorschau auf die Struktur der Vorlagen-Seite angezeigt wird.

Hier klickt man auf den Body-Tag und dann auf Set bei dem root-Element. Den Mode inner kann man erst einmal beibehalten. Inner bewirkt, dass das Tag selber erhalten bleibt, nur die Inhalte zwischen dem jeweiligen Anfangs-Tag und dem zugehörigen End-Tag werden von Typo3 ersetzt. Wählt man stattdessen Outer, so verschwindet beim Ersetzen auch das Tag selber.

Nun muss man für jedes Element der Seite einen Eintrag erstellen. Am Ende könnte sich folgendes Bild ergeben:

Klickt man auf das Bleistift-Icon am Ende der Zeile Menue Oben, so kann man die Einstellungen erkennen.

Bei den meisten Elementen wird hier unter Object path auf das Typoscript verwiesen, welches das Element erstellt.

Nur bei den Content-Elementen ist das nicht notwendig.

Hier sollte man aber auf den Title-Eintrag achten, der liefert nachher auch im Seiten-Menü die Überschriften über die jeweiligen Kontent-Elemente. Unter Data Processing findet man hier den Typoscript-Code, den man in den bisherigen TV-Versionen nur über das XML bearbeiten konnte.

Bis auf das Element für die Header-Grafik wird alles inner gemappt. Bei der Header-Grafik muss der DIV-Tag komplett ersetzt und mit Angabe der Grafik-Datei neu erzeugt werden. Deshalb ist dieses Element outer gemappt.

Die XML-Datei

Templa-Voila speichert die Daten, bis auf das eigentliche Mapping, in einer XML-Struktur, die über das Bleistift-Icon hinter dem Datenstruktur-Element zugänglich ist.

<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<T3DataStructure>
	<meta type="array">
		<langDisable>1</langDisable>
		<langChildren>1</langChildren>
	</meta>
	<ROOT type="array">
		<tx_templavoila type="array">
			<title>ROOT</title>
			<description>Select the HTML element on the page which you want to be the overall container element for the template.</description>
		</tx_templavoila>
		<type>array</type>
		<dbttvdata type="array">
			<cssfile>02_layouts_2col/css/layout_2col_left_13.css</cssfile>
			<iehacks>../02_layouts_2col/css/patches/patch_2col_left_13.css</iehacks>
		</dbttvdata>
		<el type="array">
			<field_nav type="array">
				<tx_templavoila type="array">
					<title>Menue Oben</title>
					<description>Mappen an DIV id nav (eigenes Template)</description>
					<sample_data type="array">
						<numIndex index="0">[ Menue Oben ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<TypoScriptObjPath>lib.menu_oben</TypoScriptObjPath>
				</tx_templavoila>
			</field_nav>
			<field_teaser type="array">
				<tx_templavoila type="array">
					<title>Klickpfad / Rootline</title>
					<description>Mappen an DIV id teaser (eigenes template)</description>
					<sample_data type="array">
						<numIndex index="0">[ Rootline ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<TypoScriptObjPath>lib.klickpfad</TypoScriptObjPath>
				</tx_templavoila>
			</field_teaser>
			<field_submenu type="array">
				<tx_templavoila type="array">
					<title>Untermenue links</title>
					<description>Mappen an DIV id menuLinks (eigenes Templates)</description>
					<sample_data type="array">
						<numIndex index="0">[ Submenu ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<TypoScriptObjPath>lib.tmenu_links</TypoScriptObjPath>
				</tx_templavoila>
			</field_submenu>
			<field_footer type="array">
				<tx_templavoila type="array">
					<title>Footer</title>
					<description>Mappen an DIV id footer (eigenes Template)</description>
					<sample_data type="array">
						<numIndex index="0">[ Footer ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<TypoScriptObjPath>lib.footer</TypoScriptObjPath>
				</tx_templavoila>
			</field_footer>
			<field_maincontent type="array">
				<tx_templavoila type="array">
					<title>Haupt Inhalt</title>
					<description>Mappen an die Spalte mit dem Haupt-Inhalt</description>
					<sample_data type="array">
						<numIndex index="0">[ Haupt Inhalt ]</numIndex>
					</sample_data>
					<eType>ce</eType>
					<tags>div</tags>
					<oldStyleColumnNumber type="integer">0</oldStyleColumnNumber>
					<eType_EXTRA type="array">
						<objPath>lib.content</objPath>
					</eType_EXTRA>
					<TypoScript><![CDATA[
        10=RECORDS
        10.source.current=1
        10.tables = tt_content
        10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
                            ]]></TypoScript>
				</tx_templavoila>
				<TCEforms type="array">
					<label>Haupt Inhalt</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_maincontent>
			<field_menucontent type="array">
				<tx_templavoila type="array">
					<title>Inhalt unter dem linken Menue</title>
					<description>Mappen an die spalte mit dem Inhalt unter dem Menue</description>
					<sample_data type="array">
						<numIndex index="0">[ Below menu ]</numIndex>
					</sample_data>
					<eType>ce</eType>
					<tags>div</tags>
					<TypoScript><![CDATA[
	10= RECORDS
	10.source.current=1
	10.tables = tt_content
	10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
                    ]]></TypoScript>
					<oldStyleColumnNumber type="integer">1</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>
					<label>Inhalt unter dem linken Menue</label>
				</TCEforms>
			</field_menucontent>
			<field_impressum type="array">
				<tx_templavoila type="array">
					<title>Impressum</title>
					<description>Mappen als Impressum Impressum/Suche/Sitemap</description>
					<sample_data type="array">
						<numIndex index="0">[ Impressum ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<TypoScriptObjPath>lib.menu_unten</TypoScriptObjPath>
				</tx_templavoila>
			</field_impressum>
			<field_headerimage type="array">
				<tx_templavoila type="array">
					<title>Header-Image</title>
					<description>Mappen als Header-Image</description>
					<sample_data type="array">
						<numIndex index="0">[ Header - Image ]</numIndex>
					</sample_data>
					<eType>TypoScriptObject</eType>
					<tags>div</tags>
					<TypoScriptObjPath>lib.mainpic</TypoScriptObjPath>
				</tx_templavoila>
			</field_headerimage>
		</el>
	</ROOT>
</T3DataStructure>

Das Typocript

Die meisten Content-Elemente benötigen Typoscript-Code, der vom Template aus eingebunden wird. Es bietet sich an, diesen Code in handliche Einheiten zu gliedern. Dafür ist der Ordner Typoscript Templates gedacht.

In diesem Sys-Ordner finden sich folgende Code-Elemente:

Header-Grafik
Service Menu
Haupt-Menu
Klickpfad / Rootline
Untermenu links
Footer

Bei jedem der Einträge ist nur der Reiter Allgemein ausgefüllt, mit Titel und vor allem dem Typoscript:

Die einzelnen Elemente:

Header-Grafik:

lib.mainpic = IMG_RESOURCE
 lib.mainpic {
   file.import = uploads/media/
   file.import.data = levelmedia:2, slide
   file.import.listNum = 0
   stdWrap.wrap = <div id="header" style="background-image:url('|'); "></div>
 }

Die Zeile mit listNum = 0 ist nicht notwendig, weil Vorgabe. Man kann aber mehrere Mediendateien unter Ressourcen hochladen und dann hiermit die passende Auswählen. Dadurch können mehrere Grafiken gleichzeitig gewechselt werden.

Service Menu:

lib.menu_unten = HMENU
  lib.menu_unten {
  special = directory
  special.value = 7
  entryLevel = 1
  1 = TMENU
  1.NO = 1
  1.NO.linkWrap =  | | |*|  | | |*|  |
 }

Haupt-Menu:

lib.menu_oben = HMENU
 lib.menu_oben {
   special.value = 1
   entryLevel = 1
   special = directory
   1 = TMENU
   1 {
     expAll = 0
     noBlur = 1
  NO = 1
  NO.ATagParams = class ="oben_no"
  NO.linkWrap =  | | |*|  | | |*|  |
   }
     1.RO < .1.NO
     1.RO.ATagParams = class = "oben_ro"
 
     1.ACT < .1.NO
     1.ACT.ATagParams = class = "oben_act"
 
 }

Klickpfad:

lib.klickpfad = COA
 lib.klickpfad {
     10 = TEXT
     10.value =  <a href="index.php">Klickpfad</a> 
     
     20 = HMENU
     20 {
       special = rootline
       special.range = 1 | -1
       1 = TMENU
       1.NO = 1
       1.NO.linkWrap = <img src="fileadmin/templates/bilder/arrow.png" alt="Pfeil"/> | 
     }
  }

Untermenu links:

lib.tmenu_links = HMENU
lib.tmenu_links {
#  special = directory
#  special.value = 34
  entryLevel = 1
  1 = TMENU
  1 {
    expAll = 0
    noBlur = 1
    NO.wrapItemAndSub = <div class="links_all">|</div> |*| <hr /><div class="links_all">|</div> |*|<hr /><div class="links_all">|</div><hr />
    NO = 1
    NO.ATagParams = class ="links_no"
  }
  1.RO < .1.NO
     1.RO.ATagParams = class = "links_ro"

     1.ACT < .1.NO
     1.ACT.ATagParams = class = "links_act"
   
  2 = TMENU
  2 < lib.tmenu_links.1
  2.NO.wrapItemAndSub = <hr /><div class="links_all">|</div>
  2.NO.ATagParams = class = "links_no2"
  2.RO.ATagParams = class = "links_ro2"
  2.ACT.ATagParams = class = "links_act2"
  
  2.ACT.wrapItemAndSub = <hr /><div class="links_all">|</div>
  2.RO.wrapItemAndSub = <hr /><div class="links_all">|</div>

 }

Footer:

lib.footer = TEXT
 lib.footer {
    data = date : Y
    wrap = <br />© Netthelp.de (|)
  }

Wichtig ist noch, dass man all diese Code-Elemente im Template der root-Seite einbindet, sonst steht der Code nicht zur Verfügung:

Das Content-Element anpassen

Bisher habe ich auf vielen Seiten das Content-Element selber mit Typoscript erzeugt, in der Regel als COA Element, welches z.B. noch die Seitenüberschrift mit einblendet. Bei Templavoila werden die Inhaltselemente nicht direkt per eigenem Typoscript konfigurierbar. Der zugehörige Code steckt nämlich im XML der TemplaVoila Datenstruktur. Hier kann man ihn auch erweitern und anpassen:

			<field_maincontent type="array">
				<tx_templavoila type="array">
					<title>Haupt Inhalt</title>
					<description>Mappen an die Spalte mit dem Haupt-Inhalt</description>
					<sample_data type="array">
						<numIndex index="0">[ Haupt Inhalt ]</numIndex>
					</sample_data>
					<eType>ce</eType>
					<tags>div</tags>
					<oldStyleColumnNumber type="integer">0</oldStyleColumnNumber>
					<eType_EXTRA type="array">
						<objPath>lib.content</objPath>
					</eType_EXTRA>
					<TypoScript><![CDATA[
        10= COA {
           5 = TEXT
           5.data = page:subtitle // page:title 
           5.wrap = <h1>|</h1><br />
          10=RECORDS
          10.source.current=1
          10.tables = tt_content
          10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
          30 = TEXT
          30.value = <br />
        } 
                            ]]></TypoScript>
				</tx_templavoila>
				<TCEforms type="array">
					<label>Haupt Inhalt</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_maincontent>

Der Nachteil bei diesem Ansatz ist, dass der Code bei jeder Änderung an der Datenstruktur wieder zurück gesetzt wird. Die naheliegende Idee einfach den Editing Type von Content Elements auf Typoscript Object Path zu ändern und dann mit normalem Typoscript zu arbeiten funktioniert aber auch nicht, da dann dieser Content-Bereich im Backend nicht über das TV-Seitenmodul erreichbar ist.

Hier taucht 5.data auf, da der Bezeichner field von Templavoila vergeben ist. Ähnlich kann man auch auf Inhalte des aktuellen Content-Elementes zugreifen, hier muss es dann heißen:

10.5.data = register:tx_templavoila_pi1.parentRec.header

Das letzte Element header ist hier der Feldname aus der Tabelle tt_content. Entsprechend kann man aus dem XML des FCE heraus auch auf die anderen Spalten zugreifen.

Hinweis: Robert Lemke warnt zwar unter http://typo3.org/documentation/document-library/extension-manuals/templavoila/1.1.1/view/1/5/ davor, dass dieser Register-Zugriff zukünftig wegfallen könnte. Da ich aber keine Alternative kenne und die Warnung schon alt ist, kann man die Warnung wohl ignorieren.

Ein eigenes FCE

Anlass für die Umstellung auf TemplaVoila waren für mich die FCE, speziell die von DBTV mitgelieferten runden Boxen. Bei der praktischen Nutzung stellt sich schnell heraus, dass man gern mehr Farben zur Auswahl hätte. Es ist aber recht aufwändig, für jede Farbe ein FCE zu erstellen und dann das CSS darauf anzupassen.

Idee ist also ein FCE zu schreiben, bei dem man die Farbe im Backend einstellen kann. Die Templates von DBTV benutzen zwei Farben, eine für den Hintergrund und eine für den Rand.

Ich habe mir eines der Templates genommen und kopiert, hier das für die grüne Box

<html>
        <body>
                <div class="REboxGreen">
                        <span class="rGline1"></span>
                        <span class="rGline2"></span>
                        <span class="rGline3"></span>
                        <span class="rGline4"></span>
                        <div class="REboxGreenContent">
                                <h1>Headline</h1>
                                <p>Diese Box hat runde Ecken.</p>
                        </div>
                        <span class="rGline4"></span>
                        <span class="rGline3"></span>
                        <span class="rGline2"></span>
                        <span class="rGline1"></span>
                </div>
        </body>
 </html>

Im Prinzip passiert hier folgendes:

Vor dem eigentlichen Inhalt folgen vier Linien, die erste ist kürzer als die Box, die nächsten werden dann länger, durch geschickte Nutzung der beiden Farben entsteht die Rundung.
Das Inhalts-Element REboxGreenContent bekommt die Hintergrundfarbe und links und rechts den Rand in Randfarbe.
Unter dem Inhaltselement folgen wieder die vier Zeilen in umgekehrter Reihenfolge.

Diese html-Datei habe ich unter dem Namen roundbox-ud.html im Verzeichnis fileadmin/templates/FCE abgelegt.

Dann habe ich mit im Sys-Ordner von TemplaVoila ein neues DS-Objekt namens FCE RoundBox-UD erzeugt.

Zum Nachbauen kann man einfach den XML-Code hier aus dem Wiki nehmen (s.u.) und ins XML-Feld des DS-Objektes einfügen. TemplaVoila legt auch ein TS-Objekt an, das ich in FCE RoundBox-UD (einstellbare Farbe) und mit der html-Datei verknüpft.

Dann müssen noch die ersten beiden Elemente gemappt werden. Das root-Element an den body-Tag (inner) und das Content-Element an das äußere DIV (outer). Damit fällt der größte Teil der html-Vorlage weg, wird aber per Typo-Script gleich wieder aufgebaut.

Nach dem Mappen ist immer das Typoscript im XML beschädigt. Diese Teile müssen dann neu aus meiner Vorlage ins XML kopiert werden und zwar der komplette Bereich von <TypoScript> bis </TypoScript> muss gelöscht und neu eingefügt werden. Wichtig ist auch das Anhängsel

<TypoScript><![CDATA[

durch das CDATA-Element stört das Typoscript nicht die XML-Struktur, die sonst ungültig würde.

<?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_round_box_content type="array">
				<tx_templavoila type="array">
					<title>Round Box Content</title>
					<description>Ans Conten-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.field = field_box_border
	10.10.wrap = <div class="REboxGreen"><span class="rGline1" style="background-color: |;"></span>
	10.20 = TEXT
	10.20.field = field_box_border
	10.20.wrap = <span class="rGline2" style="border-color: |; 
	10.30 = TEXT
	10.30.field = field_box_background
	10.30.wrap = background-color: |;"></span>
	10.40 = TEXT
	10.40.field = field_box_border
	10.40.wrap = <span class="rGline3" style="border-color: |; 
	10.50 = TEXT
	10.50.field = field_box_background
	10.50.wrap = background-color: |;"></span>		
	10.60 = TEXT
	10.60.field = field_box_border
	10.60.wrap = <span class="rGline4" style="border-color: |; 
	10.70 = TEXT
	10.70.field = field_box_background
	10.70.wrap = background-color: |;"></span>
	10.80 = TEXT
	10.80.field = field_box_border
	10.80.wrap = <div class="REboxGreenContent" style="border-color: |; 
	10.90 = TEXT
	10.90.field = field_box_background
	10.90.wrap = background-color: | ;">

	10.100= RECORDS
	10.100.source.current=1
	10.100.tables = tt_content

	10.110 = TEXT
	10.110.field = field_box_border
	10.110.wrap = </div><span class="rGline4" style="border-color: |; 
	10.120 = TEXT
	10.120.field = field_box_background
	10.120.wrap = background-color: |;"></span>
	10.130 = TEXT
	10.130.field = field_box_border
	10.130.wrap = <span class="rGline3" style="border-color: |; 
	10.140 = TEXT
	10.140.field = field_box_background
	10.140.wrap = background-color: |;"></span>		
	10.150 = TEXT
	10.150.field = field_box_border
	10.150.wrap = <span class="rGline2" style="border-color: |; 
	10.160 = TEXT
	10.160.field = field_box_background
	10.160.wrap = background-color: |;"></span>
	10.170 = TEXT
	10.170.field = field_box_border
	10.170.wrap = <span class="rGline1" style="background-color: |;"></span></div>

                    ]]></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>
					<label>Round Box Content</label>
				</TCEforms>
			</field_round_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>
					<tags>div:attr:style</tags>
					<proc type="array">
						<HSC type="integer">1</HSC>
					</proc>
				</tx_templavoila>
				<TCEforms type="array">
					<config type="array">
						<type>input</type>
						<size>48</size>
						<eval>trim</eval>
					</config>
					<label>Box Hintergrund-Farbe z.B. #ff0000 oder #f00 oder red</label>
				</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>
					<tags>div:attr:style</tags>
					<proc type="array">
						<HSC type="integer">1</HSC>
					</proc>
				</tx_templavoila>
				<TCEforms type="array">
					<config type="array">
						<type>input</type>
						<size>48</size>
						<eval>trim</eval>
					</config>
					<label>Box Rahmen-Farbe z.B. #ff0000 oder #f00 oder red</label>
				</TCEforms>
			</field_box_border>
		</el>
	</ROOT>
 </T3DataStructure>

Im Prinzip füge ich hier nur die Elemente aus der html-Vorlage wieder ein und gebe ihnen lokale Style-Informationen für die Farbe mit. Das überschreibt die Farbeinstellungen aus der Vorlage. Da relativ oft Farbeinstellungen vorgenommen werden müssen, ist das Typoscript etwas länglich geraten.

Soll zusätzlich noch das bisher nicht genutzte Überschriftsfeld der Box genutzt werden, um eine Überschrift der Kategorie 1 vor der Box zu erzeugen, so helfen folgende Zeilen weiter:

	10.5 = TEXT
	10.5.data = register:tx_templavoila_pi1.parentRec.header
	10.5.wrap = <h1>|</h1>
	10.5.if.isTrue.data = register:tx_templavoila_pi1.parentRec.header

Nun kann man das neue FCE in eine eigene Seite einfügen und im Backend die Farben einstellen:

Auf der Seite kann das dann folgendermaßen aussehen:

Die Box besitzt die Hintergrundfarbe #ff0 und die Rahmenfarbe #ffb. Zum Vergleich befindet sich darüber die grüne Originalbox.

Weitere Anwendungen mit TV

Für ein Projekt, das unter http://www.netzdurchblick.de/ erreichbar ist, müssen mehrere Grafikelemente ausgewechselt werden.

Die Site hat vier Hauptrubriken, die jeweils einen andersfarbigen Hintergrund haben sollten. Also müssen Headergrafik und Body-Grafik entsprechend gesetzt werden.

Zusätzlich sollte das Hauptmenü mit bunter Grafikschrift erstellt werden. Dazu benötigt man dann für jede Hauptrubrik drei Grafiken, einmal für den Normalzustand, einmal für den Hover-Effekt und ein Bild für den aktiven Bereich.

Insgesamt gehören zu einer Rubrik jeweils fünf individuelle Grafiken. Diese habe ich jeweils als Ressourcen bei der Startseite der Rubrik untergebracht.

Am Screenshot sollte auch die Reihenfolge erkennbar sein.

Im Seitentemplate habe ich dann zwei Einträge vom Typ Attribut eingerichtet und festgelegt, dass sie auf div:attr:style gemappt werden sollen.

Passend dazu haben dann die DIVs vom Header und für den Main-Bereich ein style-Attribut mitbekommen, welches auch leer sein darf.

Die beiden Attribute sind jeweils vom Editing-Type Typoscript Object Path.

Nun können mit den folgenden Typoscript-Zeilen die Grafiken aus der Rubrik-Startseite ausgelesen werden.

lib.schw_headerstyle = IMG_RESOURCE
 lib.schw_headerstyle {
   file.import = uploads/media/
   file.import.data = levelmedia:2, slide
   file.import.listNum = 0
   stdWrap.wrap =  background-image:url('|'); 
 }
 
 lib.schw_mainstyle = IMG_RESOURCE
  lib.schw_mainstyle {
   file.import = uploads/media/
   file.import.data = levelmedia:2, slide
   file.import.listNum = 1
   stdWrap.wrap =  background-image:url('|'); 
 }

Auch der Aufbau des grafischen Menüs ist nicht mehr schwierig. Zuerst habe ich mir die IDs der vier Rubrik-Startseiten herausgesucht. Das Typoscript nimmt dann aus deren Ressourcen-Feld die passenden Einträge heraus.

  lib.hauptmenue = HMENU
   lib.hauptmenue.special = list
   lib.hauptmenue.special.value = 238,197,247,165
   lib.hauptmenue.1 = GMENU
   lib.hauptmenue.1 {
      NO = 1
      NO {
        10 = IMAGE
        10 {
            file.import.field = media
            file.import = uploads/media/
            file.import.listNum = 2
        }
        XY = [10.w],[10.h]
        wrap = |<img src='fileadmin/grafiken-neu/menu_spacer.png'  align='top'>
      }
      RO = 1
      RO {
        10 = IMAGE
        10 {
            file.import.field = media
            file.import = uploads/media/
            file.import.listNum = 4
        }
        XY = [10.w],[10.h]
        wrap = |<img src='fileadmin/grafiken-neu/menu_spacer.png' align='top'>
      }
      ACT = 1
      ACT {
        10 = IMAGE
        10 {
            file.import.field = media
            file.import = uploads/media/
            file.import.listNum = 3
        }
        XY = [10.w],[10.h]
        wrap = |<img src='fileadmin/grafiken-neu/menu_spacer.png' align='top'>
      } 
 }

Man muss nur aufpassen, dass man die Grafiken jeweils in der richtigen Reihenfolge ablegt, diese kann aber auch nachträglich verändert werden.

Typo3-YAML

Inhaltsverzeichnis

Installation

Anpassungen

Installation der Extensions

Installation von YAML

Erstellen des Seiten-Templates

Erstellen eines eigenen Layouts

Die HTML-Vorlage

Einbinden der Vorlage über TemplaVoila

Die XML-Datei

Das Typocript

Das Content-Element anpassen

Ein eigenes FCE

Weitere Anwendungen mit TV

Ansichten

Meine Werkzeuge

Navigation

Tipps_und_Tricks

Drucken/Exportieren

Suche

Werkzeuge