Tutorial: Eine responsive Seite mit Typo3 (Teil 1)

Dummy View

Neuanfang! Nachdem ich in den letzten Monaten an verschiedenen Webprojekten gearbeitet habe und meine eigene Seite sträflich vernachlässigt habe, wird es zum Jahresende Zeit für einen Relaunch. Zwar war die alte Seite bereits responsiv, allerdings bin ich seit geraumer Zeit Fan der fertigen Bootstrap Distros, die Typo3 über den Erweiterungs-Manager mitbringt. Persönlich nutze ich sehr gern das Bootstrap Kickstart Package (bsdist) von Pascal Mayer.

Das Typo3 Setting

Meine Seite liegt aufgrund der relativen Begrenztheit des Angebots auf einem kleinen Server beim Anbieter Hosting Agency aus Chemnitz. Die Basic settings sind:

  • Hosting Paket mit PHP 7
  • MySQL Datenbank
  • FTP Zugang

Das Paket hat keinen SSH Zugang und ich installiere die Typo3 Version von Hand. Zum Einsatz kommt ein Typo3 7.6.14. Die Installationsroutine wird auf JWeiland recht gut beschrieben, allerdings verzichte ich auf das Setzen von Symlinks, da die beim Hoster nicht unterstützt werden. Auch das PHP Limit kann in meinem Minimalpaket nicht manuell eingestellt werden. Für mein Vorhaben einer kleinen „Visitenkarte“ reicht das aber dennoch.

Typo3 7.6 Installation
image-402

Statusmeldung bei erfolgreicher Installation einer Typo3 7.6 Instanz

Die Distribution Packages

Wie im Bild oben bereits gezeigt, bekommt man im letzten Schritt der Installation die Wahl vorgefertigte Distributions-Packages herunter zu laden. Darüber kommt dann das „bsdist“ Package in den Erweiterungs-Manager und kann von dort installiert werden.

Nach der ersten Anmeldung im Backend werden wir direkt in den Erweiterungs-Manager umgeleitet:

Distro-Packages
image-403

Eine Liste verfügbarer Distributions Packages

Ich entscheide mich für das nachfolgende Package:

Bootstrap Kickstart Package
image-404

Das Bootstrap Kickstart Package

Nach erfolgreicher Installation erhält man folgende Meldung:

Das Bootstrap Kickstart Package Installation
image-405

Erfolgreiche Installation Bootstrap Kickstart Package

Das Bootstrap Kickstart Package hat im Backend eine Menüstruktur und einige Test-Inhalte angelegt.

Menüstruktur und Testinhalte
image-406

Menüstruktur und Testinhalte nach der Installation

Text/Media

Etwas irritierend war der Umstand, dass die bsdist noch veraltete Inhaltstypen benutzt, die prompt zu einer Fehlermeldung führen.

Fehlerhafte Content-Types
image-407

Fehlerhafte Content-Types durch Umstellung in Typo3 7.6

Das kann man aber durch Ändern des Inhaltstyps beheben:

Inhaltstyp ändern
image-408

Ändern des Inhaltstyps in Typo3 7.6

Das Frontend bleibt (fast) leer

Beim Blick in das Frontend der neuen Seite bleibt dieses vorerst (fast) leer. Lediglich das Logo und der rudimentäre Menü-Container ist erkennbar.

Leeres Frontend
image-409

Die bsdist gibt ein leeres Frontend aus

Ein kurzer Blick in das Haupt-Template verrät das nicht eingebundene „fluid_style_content“:

fluid_style_content
image-410

Das „fluid_style_content“ muss noch eingebunden werden.

Eingebunden und abgespeichert und schon erscheinen die Texte im Frontend der Seite:

Dummy View
image-411

Die Dummy Ansicht der bsdist

Ausblick

Im zweiten Teil unseres Tutorials widmen wir uns der Dateistruktur des Bootstrap Kickstart Package (bsdist).