Dabei kommt uns eine Extension zugute, die seit TYPO3 4.5 im Core ist. Diese heißt “backend_layout” und als neuer Datensatz heißt er “Backend Layout”:

Backend Layout Datensatz

Ein neues Backend Layout können wir unsere eigene oder vom Kunden gewünschte Inhaltsstruktur mittels des Wizards erstellen. Wir erstellen heute ein Layout, welches in der oberen Hälfte aus zwei Spalten und in der unteren Hälfte aus einer Spalte über die gesamte Breite besteht:

Backend Layout Wizard

Hier sieht man schön die zukünftige Struktur. Man sieht auch, dass ich jeden Bereich mit einer Zahl fest definiert habe. Diese Zahlen müssen wir uns merken für das TypoScript später.

Nachdem wir das Backend Layout gespeichert haben, können wir uns sogleich mal an das TypoScript machen. Merken müssen wir uns noch die UID des Backend Layouts. Und so geht es los:

# Ein CASE Objekt schaut, welcher Fall eintritt und handelt dementsprechend.
temp.contentStructure = CASE
temp.contentStructure {
  # Durch den Key können wir festlegen, auf welches Feld er prüft, in diesem Fall das Feld
  # "backend_layout" im Seiten-Datensatz.
  key.field = backend_layout
  # Falls das Feld leer ist, schaut er rekursiv bis zur Root Page, ob irgendwo das Feld gesetzt ist.
  key.ifEmpty.data = levelfield:-2, backend_layout_next_level, slide
 
  # Die UID des Backend Layout Datensatzes, in unserem Falle die 1
  1 = COA
  1.10 = COA
  1.10.wrap = <div class="maincolumns">|<div class="clear"></div></div>
  # Spalte oben links 
  1.10.10 < styles.content.get 
  1.10.10.select.where = colPos = 1 
  1.10.10.wrap = <div class="column first">|</div>
  # Spalte oben rechts 
  1.10.20 < styles.content.get 
  1.10.20.select.where = colPos = 2 
  1.10.20.wrap = <div class="column second">|</div>
  # Spalte unten 
  1.20 < styles.content.get 
  1.20.select.where = colPos = 3 
  1.20.wrap = <div>|</div>
} 
 
# Wir kopieren das Objekt in die Variable content 
page.10.variables.content < temp.contentStructure

Damit setzen wir für jede Spalte (colPos = vorher gesetzte Spaltennummer) auch direkt das HTML. Mit den verschiedenen Klassen können wir dann auch im Frontend per CSS die Struktur nachbauen, wie wir sie im Backend erstellt haben:

div.first {
  float: left;
  width: 50%;
}
div.second {
  float: right;
  width: 50%;
}
div.clear {
  clear: both;
}

Natürlich hat man Unmengen von Möglichkeiten, um sich mittels der Spalten verschiedene Backend Layouts zusammenzustellen.
Ach, und die Auswahl erfolgt über den Seiten-Datensatz im Backend. Dort gibt es die Möglichkeit ein Backend Layout für die Seite, aber auch rekursiv für alle darunterliegenden Seiten zu setzen:

Backend Layout Auswahl

Viel Spaß beim Probieren!

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Hier möchte ich euch gerne mit den häufigst gebrauchten Snippets Abhilfe verschaffen.

Das wichtigste zuerst: sämtliche Konfigurationen der Dateiliste sind per TypoScript im Setup-Teil des Templates vorzunehmen und finden im tt_content.uploads.20 Bereich statt. Dank des mittlerweile standardmäßig vorhandenen TypoScript Editor im Backend sind zwar schon viele Einstellungen per “Suggest Drop-Down” zu erahnen, aber halt doch nicht immer so durchsichtig.

Sinnvolle Dateigrößen-Bezeichnungen einpflegen:

tt_content.uploads.20.itemRendering.30.bytes.labels = Byte | KB | MB | GB

Dateiendung (*.pdf, *.doc, etc.) verstecken:

tt_content.uploads.20.stripFileExtensionFromLinkText = 1

Thumbnail-Generierung beeinflussen:

tt_content.uploads.20.linkProc.iconCObject.file.maxH = 100 #maximale Höhe der Thumbnails
tt_content.uploads.20.linkProc.iconCObject.file.maxW = 100 # maximale Breite der Thumbnails
# etc.

Bestimmen welches Frame eines GIFs bzw. welche Seite eines PDFs angezeigt werden soll:

tt_content.uploads.20.linkProc.iconCObject.file.maxH = 100 #maximale Höhe der Thumbnails
tt_content.uploads.20.linkProc.iconCObject.file.frame = 2 # zweite Seite eines PDFs als Thumbnail generieren

Viel Spaß beim Experimentieren!

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Man lädt sich also die Erweiterung “gridelements” aus dem TER, installiert sie und bindet die “Statischen Templates” ein. Danach den System-Ordner, den man als “Allgemeine Datensatzsammlung” angegeben hat öffnen und dort einen neuen Datensatz vom Typ “CE Backend Layout” anlegen. Die Funktionsweise ist hier die gleiche wie bei den Backend Layouts. Danach lässt sich das neu angelegte Element auf einer Seite einfügen. Man findet es in der Rubrik “Raster-Elemente”. Hat man z. B. ein zweispaltiges Element angelegt, sieht das Backend ungefähr so aus:

Nachdem das erfreulicherweise schon alles war, kümmern wir uns um die Ausgabe auf der Webseite. Dazu kann man per Typoscript definieren, wie dieses Element ausgegeben werden soll. Für das zweispaltige Element könnte das so aussehen:

tt_content.gridelements_pi1.20.10.setup {
	# ID of gridelement
	1 < temp.gridelements.defaultGridSetup
	1 {
		columns {
			# colPos ID
			11 < .default
			11.wrap = <div class="firstcol">|</div>
			# colPos ID
			12 < .default
			12.wrap = <div class="secondcol">|</div>
		}
		wrap = <div class="element2cols">|</div>
	}
}

Wichtig sind hier die verwendeten Zahlen. Die “1″ entspricht der ID des angelegten “gridelements”. Darin befinden sich die “columns”, die anhand ihrer colPos mit einem “wrap” versehen werden können. Der “wrap” am Ende umschließt das komplette Element. Zusätzliche Elemente können nach dem gleichen Schema hinzugefügt werden.

Selbst wenn man keine Raster-Elemente benötigt, empfiehlt es sich, die Erweiterung gridelements zu installieren. Denn man erhält mit dieser Extension auch eine Drag&Drop-Funktionalität für die Inhaltselemente, wie man sie von Templavoila kennt.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

1. Backend-Layout anlegen

Als erstes im System-Ordner, den man bei “Allgemeine Datensatzsammlung” der Root-Seite angegeben hat, einen neuen Datensatz vom Typ “Backend-Layout” anlegen. Man vergibt einen Titel (z. B. Startseite oder Unterseite) und  öffnet über “Konfiguration” den sog. “Grid wizard”. Dort lässt sich dann ein Backend-Layout zusammen klicken, das in meinem Fall auch die Ausgabe im Frontend widerspiegelt.

Die einzelnen Bereiche lassen sich noch benennen und mit Spaltennummern (colPos) versehen.

2. Backend-Layout auswählen

Nach dem Speichern, kann dieses Backend-Layout bereits in den Seiteneigenschaften einer Seite ausgewählt werden. Dazu einfach den Reiter “Erscheinungsbild” anklicken.

Man kann das Backend-Layout für die aktuelle Seite und für deren Unterseiten einstellen. Nach der Auswahl zeigt das Backend direkt die vorher getroffene Konfiguration an – und zwar in korrekter Spalten- und Zeilen-Aufteilung.

Somit wäre das Backend schon mal fertig konfiguriert. Bei Bedarf kann man sich natürlich noch weitere Backend-Layouts bzw. Seiten-Templates anlegen.

3. Die Verknüpfung mit dem Frontend

Um die angelegten Backend-Layouts mit der Ausgabe zu verknüpfen, benötigt man nur folgendes Typoscript Setup:

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
	file.stdWrap.cObject = CASE
	file.stdWrap.cObject {
		# slide the template
		key.data = levelfield:-1, backend_layout_next_level, slide
		key.override.field = backend_layout
		# default template file
		default = TEXT
		default.value = fileadmin/templates/index.html
		# template file for backend-layout with ID 2
		2 = TEXT
		2.value = fileadmin/templates/subpage.html
	}
}

Im obigen Beispiel wird abhängig vom gewählten Backend-Layout, eine entsprechendes Template-Datei verwendet. Ich habe ein Standard-Template (default) angegeben und ein Template für das Backend-Layout mit der ID 2. Bei weiteren vorhanden Backend-Layouts, kann diese Liste natürlich erweitert werden. Dazu nur die korrekte ID benutzen.

4. Inhalte für die Ausgabe im Template bereitstellen

Wer von Templavoila kommt, dürfte z. B. die Navigation immer per “TypoScript Object Path” eingebunden haben. Die gute Nachricht: diese können beibehalten und direkt im Template aufgerufen werden. Aber wie kommt man an die Inhaltsbereiche? Mit Templavoila wurden diese als “Content Elements” gemapped. Jetzt benötigt man hier ein wenig Typoscript. (Ich gehe davon aus, dass CSS Styled Content benutzt wird.)

lib.field_content < styles.content.get
lib.field_content.select.where = colPos = 2

Hier auf die korrekte Angabe der colPos achten. Je nach Anzahl der Inhaltsbereiche, muss diese Anweisung natürlich “vervielfältigt” werden.

5. Die Template-Datei

Die Template-Datei, die im “fileadmin” liegt, beinhaltet dann vom Prinzip nur noch den Inhalt des <body> Bereichs. Den Rest baut TYPO3 ja automatisch drum herum. Das HTML-Template könnte dann z. B. so aussehen:

<div id=”header”>
<f:cObject typoscriptObjectPath=”lib.field_navmain” />
</div>
<div id=”content”>
<f:cObject typoscriptObjectPath=”lib.field_content” />
</div>

In diesem Beispiel benutze ich nur den <f:cObject> View-Helper von Fluid, um direkt auf die im Typoscript angelegten Content-Objekte zuzugreifen. Fluid aber auch Fluidtemplate bieten natürlich noch viele weitere Möglichkeiten, mit denen man sein Template anreichern kann.

Und hier sind wir schon am Ende. Mehr ist nicht nötig.

Fazit

Im Vergleich zu Templavoila bin ich mit dieser Template-Methode um einiges schneller, da das aufwändige Mapping wegfällt. Und das Anlegen der extra Backend-Layouts für Templavoila-Templates spart man sich dadurch auch.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Variablen

Man definiert einen Wert, welcher dann an entsprechender Stelle im Code immer wieder eingefügt werden kann.

$black:       #222222;
$blue:        #083672;
$white:       #fff;
$arrow_white: url('../img/arrow_white.png');
$arrow_blue:  url('../img/arrow_blue.png');
body {
  font-family: Arial, Verdana, sans-serif;
  font-size:   0.8em;
  color:       $black;
  text-align:  center;
  background:  $white;
}
 
a {
  display: block;
  background: $blue $arrow_white no-repeat 205px 13px;
}

Nesting

Mit dieser Methode kann man sich super viel Schreibarbeit ersparen. Es werden einfach die Elemente ineinander verschachtelt.

nav {
  position: relative; 
  padding: 0 0  0 240px;
  width: 710px;
 
  li {
    display: inline;
    float: left;
 
    a {
     display: block; 
     float: left;
     margin: 0 10px 0 0;
     font-size: 0.85em;
     }
 
   } /* li */
 
 } /* nav */

Mixins

Mit dieser Methode ist es möglich mehrere CSS-Definitionen einzufügen. Sehr hilfreich z.B. bei den CSS3 Definitionen, die für jeden Browser speziell definiert werden müssen.
Definition Mixin

@mixin verlaufZweiFarben($hauptfarbe, $farbe1) { 
  background: $hauptfarbe; /* Old browsers */
  background: -moz-linear-gradient(top, $hauptfarbe 0%, $farbe1 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$hauptfarbe), color-stop(100%,$farbe1)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* Opera11.10+ */
  background: -ms-linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* IE10+ */
  filter: "progid:DXImageTransform.Microsoft.gradient( startColorstr='$hauptfarbe', endColorstr='$farbe1',GradientType=0 )"; /* IE6-9 */
  background: linear-gradient(top, $hauptfarbe 0%,$farbe1 100%); /* W3C */
}

Integration Mixin

article { 
  @include verlaufZweiFarben;
}

Selector Inheritance

Mit dieser Methode ist es möglich Stile zu kopieren, ohne die CSS Eigenschaften zu duplizieren.

.infobox { 
  border: 1px solid #000;
  background: #dddddd;
  color: #000;
  width: 100px;
}

Hier werden jetzt alle Styles, die bereits in “.infobox” definiert wurden integriert.

.teaser { 
  @extend .infobox;
  font-size: 1em;
}

Funktionen

$color: #777777;
#content {
  background:-color: darken($color,20%);
  color: lighten($color,50%);
}
 
Definition als CSS
#content {
  background-color: #444444;
  color: #f6f6f6;
}

Weitere Informationen sind auf der offiziellen SASS Homepage zu finden unter sass-lang.com. Für alle, die die Firebug Extension für den Firefox nutzen, gibt es zudem die Erweiterung FireSass.

SASS in TYPO3

Die Extension sassify unterstützt die Integration von SASS in TYPO3. Einfach herunter laden, installieren, Include static Template einbinden und Ts Code definieren. z.B.:

plugin.tx_sassify_plugin {  
  debugInfo = 0
  showExceptions = 1
  cache = 0
  stylesheets {    
    10 = reset.scss
    10 {
      filenameWrap.wrap = fileadmin/templates/scss/|    
      media = screen    
    }
    20 = screen.scss
    20 {
      filenameWrap.wrap = fileadmin/templates/scss/|    
      media = screen    
    }
    50 = print.scss
    50 {
      filenameWrap.wrap = fileadmin/templates/scss/|    
      media = print    
    }
 
  }
}

Seitenspezifische CSS können einfach mittels Conditions definiert werden

[PIDinRootline = 2]
  plugin.tx_sassify_plugin.stylesheets.21 = home.scss
  plugin.tx_sassify_plugin.stylesheets.21.filenameWrap.wrap = fileadmin/templates/scss/|
[end]

Wer von euch auf den Geschmack gekommen ist und SASS ausprobieren möchte, kann auch ganz einfach seine bisherigen css Dateien umbenennen in .scss und die neuen Sachen Stück für Stück integrieren. Man kann klein anfangen – z.B. erst einmal nur die Farben als Variablen definieren und sich dann allmählich weiter entwickeln. Ich habe mich super schnell dran gewöhnt und mag SASS absolut nicht mehr missen.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Die passende Projekt-Seite t3o.typo3.org ist die Tage online gegangen.

PS: Im buzz-Blog wird gerade, passend zum Thema, KnowHow in Sachen Forum Design und FudForum Integration gesucht. Vielleicht auch was für dich

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Detlef Schäbel betreut seit einiger Zeit das if20-Projekt, bei dem es um eine Template-Engine geht, welche das Bindeglied zwischen YAML und TYPO3 ist. Mit einem Backlink lässt sich das System kostenlos nutzen. In den letzten Tagen gab es ein Update, weshalb ich euch mit dieser Meldung einen Einblick ins Projekt geben will. (Dies ist ein Gastbeitrag von Detlef Schäbel).

Das Entwicklertemplate if20 wurde am 25.10.2010 in der Version 1.4 released und ist unter TYPO3 4.4.4 lauffähig. Ältere TYPO3 Versionen werden ebenfalls unterstützt. Die aktuelle TYPO3 Version 4.4.4 ist in dem Komplettpaket enthalten.

Release Notes 1.4

• das neue YAML 3.3 wurde implementiert, damit wurde die Grundlage für HTML5 und CSS3 für if20 optimiert
• Integration in TYPO3 4.4.4 mit TemplaVoila 1.5.1
• wechselnde Headerbilder mittels der Extensions imagecycle und jf_multicontentv
• Accordeon-Effekte und Slider
• JS Tabs löst rgtabs ab

Release Notes 1.3:

• das neue JS Backend wurde implementiert, die alte Version steht natürlich weiterhin zur Verfügung
• das sp_better_contact Formular steht zur Verfügung, es wurde mit dem YAML Formularbaukasten gestyled
• wechselnde Headerbilder
• Beseitigung aller bekannten Bugs

Es kann auf der Projektseite if-20.com in folgenden Ausführungen heruntergeladen werden:

• als Komplettpaket mit TYPO3 4.4.4
• als importierbares Template für bestehende Installationen
• als Installationsscript, wobei dieses ein aktuelles TYPO3 und if20installiert. Es muss nur eine Datenbank und eine TYPO3-tauglicheHosting-Umgebung vorhanden sein.

if20 basiert auf YAML und ermöglicht die schnelle Entwicklung hochwertiger Templates. YAML kann in if20-Projekten getrennt upgedatet werden. Viele Standard-Funktionen können mit Konstanten konfiguriert werden, somit wird die TYPO3 Einstiegshürde deutlich gesenkt. if20 kann (wie YAML) unter Beibehaltung der Backlinks kostenlos in Produktivumgebungen eingesetzt werden.

Mit dem if20 Template ist man in der Lage, unter TYPO3 installierbare Templates zu entwickeln. Für Agenturen ist die einheitliche Entwicklungsumgebung interessant, dies erleichtert die Entwicklung im Team.

Mehr Informationen gibt es auf if-20.com
Das if20-Team

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Altes Design:

Neues Design:

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Wer sich für die Ideen begeistert, findet auf templavoila.busynoggin.com mehr Informationen.

Den Podcast gibt es auf der Podcastseite oder hinter diesem Direktlink.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

page.10 = TEMPLATE
page.10 {
	template = FILE
	template.file = fileadmin/tmpl.html
 
	subparts.CONTENT = COA
	subparts.CONTENT {
 
		# show both columns if content in left col
		10 = COA
		10 {
			if.isTrue.numRows < styles.content.getLeft
 
			10 < styles.content.getLeft
			10.wrap = <div id="col1" class="col">|</div>
 
			20 < styles.content.get
			20.wrap = <div id="col2" class="col">|</div>
		}
 
		# show one column if NO content in left col
		20 = COA
		20 {
			if.isFalse.numRows < styles.content.getLeft
 
			10 = TEXT
 
			20 < styles.content.get
			20.wrap = <div id="col12">|</div>
		}
 
		# Clear old floats via CSS
		30 = TEXT
		30.value = <div class="clear"></div>
 
	}
}

Da sich lediglich die ID des umschließenden DIV Containers ändert, muss man jetzt über CSS sinnvoll floaten.

So kann das Ganze dann im FE aussehen:

Einspaltig: http://www.realdevelopers.com/organisation.html

Zweispaltig: http://www.realdevelopers.com/whos-conject.html

2. Anderes HTML Template bei zwei Spalten

temp.maintemplate = COA
temp.maintemplate {
	# if there is content in the right col
	10 = COA
	10 {
		if.isTrue.numRows < styles.content.getRight
		10 = TEMPLATE
		10 {
			template = FILE
			template.file = fileadmin/2cols.html
		}
	}
 
	# if there is NO content in the right col
	20 = COA
	20 {
		if.isFalse.numRows < styles.content.getRight
		10 = TEMPLATE
		10 {
			template = FILE
			template.file = fileadmin/1col.html
		}
	}
}

3. Anderes CSS File bei zwei Spalten

page.headerData = COA
page.headerData {
	10 = COA
	10 {
		if.isTrue.numRows < styles.content.getRight
		10 = TEXT
		10.value = <link rel="stylesheet" type="text/css" href="fileadmin/3cols.css" />
	}
	20 = COA
	20 {
		if.isFalse.numRows < styles.content.getRight
		10 = TEXT
		10.value = <link rel="stylesheet" type="text/css" href="fileadmin/2cols.css" />
	}
}

Links zum Thema

• Template abhängig von Spalteninhalt auf typo3wizard.com
• Anderes CSS wenn Inhalt in rechter Spalte auf typo3.net

Fazit
Ich hoffe ihr könnt das so verwenden?

Frohe Weihnachten wünscht euch das gesamte typo3blogger Team

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Für alle die noch nicht Wissen was denn die T3UXW09 ist? Hier gibt es mehr Infos.
Zudem werden noch immer Sponsoren für 8 der 30 Teilnehmer gesucht.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Interessante Themen sind:
- TYPO3-Backend Rechtevergabe
- TYPO3 News
- Mehrsprachigkeit für Einsteiger
- TYPO3-Upgrade
- Inside TYPO3
- Fluid: Templating leicht gemacht und
- Die Zukunft der Extension Entwicklung: MVC

Jeder der nicht weiß wie er an die T3N ran kommt: Dir wird hier geholfen.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Hier geht es zur neuen, alten TYPO3 Linkliste.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Vorgehensweise:
Zunächst navigiert man im Backend im Modul “TemplaVoila” zum SysFoldre, welcher die Datenstrukuren beinhaltet und klickt dort bei der gewünschten DS auf das Edit-Icon. Im Feld Data Structure XML kann man dann anschließend die Ausgabe im Page-Modul zum Beispiel wie folgt steuern (das Ganze muss in den -Tag):

<meta>
<beLayout>
<![CDATA[
<table style="background: transparent; border: 0;" style="background: transparent; border: 0;" border="0" width="99%">
<tbody>
<tr>
<td style="border: 1px dashed #666666; background: transparent; width: 50%; vertical-align: top;">###field_left###</td>
<td style="border: 1px dashed #666666; background: transparent; width: 50%; vertical-align: top;">###field_right###</td>
</tr>
<tr>
<td style="border: 1px dashed #666666; background: transparent; vertical-align: top;" colspan="2">###field_bottom###</td>
</tr>
</tbody></table>
]]>
</beLayout>
</meta>

Wie man sieht lässt sich sogar CSS verwenden. Alles in allem stellt dieses eine sehr komfortable Möglichkeit dar, das Layout des Frontends auch im Backend für die Redakteure nachvollziehbar und übersichtlich darzustellen.

Leider gibt es auch einen Wehrmutstropfen bei der ganzen Sache. Hat man verschiedene Template-Objects unter einer Datenstruktur lässt sich für die verschiedenen TOs immer nur ein Layout verwenden – eben jenes, welches in der Datenstruktur definiert ist. Aber wie immer gibt es denke ich Hoffnung, dass in einer der späteren TemplaVoila-Versionen auch das möglich sein wird.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!

Edit: Auch bei Amazon ist das Buch schon vorstellbar.

------------------------------------------------------
Dies ist ein Post vom TYPO3 Blog typo3blogger.de!