Webmaster Blog

Infos und News aus verschiedenen Sparten

Bootstrap und TYPO3

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 = https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/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.