Für den Umsetzung benötigt man erst einmal eine solide TYPO3 Installation (HELLO WORLD!) und das responsive framework Bootstrap. Die Zusammenführung des TYPO3 CMS und Bootstrap zur Gestaltung einer responsiven Webseite, kann dann auch schon starten. Zuerst werden die nötigen CSS (bootstrap.min.css) und JS (bootstrap.min.js) Dateien aus dem Bootstrap Verzeichnis eingebunden. Das geschieht folgendermaßen.
page.includeCSS {
// Bootstrap CSS Datei
file_01 = fileadmin/templates/bootstrap/css/bootstrap.min.css
file_01.media = screen
}
page.includeJSFooterlibs {
// jQuery api wird für die Bootstrap jQuery Funktionen gebraucht
file_01 = fileadmin/templates/js/jquery.min.js
file_01 {
external = 1
disableCompression = 1
excludeFromConcatenation = 1
forceontop = 1
}
// Bootstrap JS Datei
file_02 = fileadmin/templates/bootstrap/js/bootstrap.min.js
}Die Grundstein zum Aufbau des Responsive Templates, ist nun bereits erledigt. Wer mehr zum Thema "includeCSS" oder "includeJS" erfahren will, kann in den Beiträgen CSS Dateien einbinden und Javascript in TYPO3 einbinden nachlesen.
Weiter gehts mit der Umsetzung des Bootstrap Responsive Template. Je nach dem was gewünscht ist, kann nun variiert werden. In diesem Beispiel besteht das HTML Template aus Kopf, Inhalt und Footer. Nach diesen Vorgaben, wird nun ein neuer TYPO3 Backend-Layout Datensatz namens "Bootstrap" erstellt, der folgende Struktur haben sollte.
backend_layout {
colCount = 1
rowCount = 3
rows {
1 {
columns {
1 {
name = Header
colPos = 1
}
}
}
2 {
columns {
1 {
name = Content
colPos = 0
}
}
}
3 {
columns {
1 {
name = Footer
colPos = 2
}
}
}
}
}Ist die Konfiguration für das Backend-Layout festgelegt und der Datensatz gespeichert, muss dieses Backend-Layout nun auch einer Seite im TYPO3 Seitenbaum zugewiesen werden. Das geschieht über die Seiteneigenschaften -> Erscheinungsbild -> Backend-Layout. Entweder nur für diese Seite oder auch für Unterseiten dieser Seite.
Soweit so gut. Ist die Seite nun mit dem angelegten Backend-Layout "Bootstrap" verknüpft und gespeichert, sollte sich die Aufteilung der Spalten, bei der Seiten-Ansicht im Backend bereits verändert haben. Es kann begonnen werden, die drei Bereiche: Header, Inhalt und Footer mit Inhaltselementen zu befüllen.
Der Abschluß des Tutorials zur Integration von Bootstrap in TYPO3, bildet nun die Zuweisung der Inhalte aus den Spalten, in das Bootstrap Fluid-Template. Dazu einfach eine HTML Datei mit dem Namen "bootstrap-fluid-template.html" in den Ordner: fileadmin/templates/html/ speichern und mit diesem HTML Quelltext ausstatten.
<div class="container">
<div class="row">
<div class="col-md-12">
<f:format.html parseFuncTSPath="">{header}</f:format.html>
</div>
</div>
<div class="row">
<div class="col-md-12">
<f:format.html parseFuncTSPath="">{content}</f:format.html>
</div>
</div>
<div class="row">
<div class="col-md-12">
<f:format.html parseFuncTSPath="">{footer}</f:format.html>
</div>
</div>
</div>Die Fluid Viewhelper werden nun mit dem Inhalt aus den Spalten mittels des TypoScript Objekts "FLUIDTEMPLATE" gefüllt.
# Default PAGE object:
page = PAGE
page.typeNum = 0
page.10 = FLUIDTEMPLATE
page.10 {
file = fileadmin/templates/html/bootstrap-fluid-template.html
partialRootPath = fileadmin/templates/html/partials/
layoutRootPath = fileadmin/templates/html/layouts/
variables {
header < styles.content.get
header {
select.where = colPos = 1
wrap = <div class="header">|</div>
}
content < styles.content.get
content {
select.where = colPos = 0
wrap = <div class="content">|</div>
}
footer < styles.content.get
footer {
select.where = colPos = 2
wrap = <div class="footer">|</div>
}
}
}Auf dieser Grundlage lassen sich nun für individuelle responsive Templates für TYPO3 erstellen, die nach belieben erweitert und verfeinert werden können. Und nicht vergessen immer schön den TYPO3 Cache zu löschen, damit Veränderungen auch im Frontend stattfinden.
