Bootstrap3 Carousel mit Grid Elements für TYPO3

Nach einer etwas längeren Pause, möchte ich meine kleine Reihe von Bootstrap-Gridelements-Elementen fortsetzen. Heute habe ich das Carousel-Element fertig gestellt. Damit ist es möglich, ohne große Aufwände einen Slider an jeder Stelle einer Website zu platzieren. Auch hier muss man einen „Carousel-Container“ erstellen und in diesem kann man dann mehrere „Carousel-Elemente“ einfügen. Das Carousel-Element ist in zwei Spalten aufgeteilt, eine für das Bild und eine für den Text, der auf dem Carousel angezeigt werden soll (auch Caption genannt). Read more …

WebStorm/PhpStorm: Version 7 mit eingebauter Compass unterstützung

PhpStorm

Diese Woche wurde WebStorm/PhpStorm 7 veröffentlicht. Zu den Neuerungen gehört unter vielem anderem, dass man SASS/Compass nun direkt aus der IDE mittels der in PhpStorm 6 eingeführten FileWatcher kompilieren lassen kann. Man benötigt dabei allerdings eine lauffähige Installation von Ruby mit den installierten Gems SASS und Compass. Das ist auch gut so, denn so wird immer die installierte Version verwendet und zusätzlich installierte Erweiterungen kann man immer noch verwenden. Read more …

Bootstrap3 Collapse mit Grid Elements für TYPO3

Nun da ich gerade dabei war, hab ich auch noch das Collapse Element von Bootstrap in eine Grid Elements Version übertragen. Die Umsetzung kommt ohne Fluid-Template aus und Umfasst nur drei Dateien.
Der Aufbau ähnelt dem Tabs-Element. Man erstellt einen „Collapsible Container“ und fügt diesem einzelne „Collapsible Elemente“ hinzu. In diese Elemente können dann wieder übliche Inhaltselemente erstellt werden. Read more …

Bootstrap3 Tabs mit Grid Elements für TYPO3

Auf Anfrage habe ich nun auch das Tabs-Element aus dem bekannten Bootstrap in eine Grid Elements Version übertragen. Die Durchführung war leider etwas komplizierter, da ein Extra Element für die Navigation oberhalb der eigentlichen Tab-Elemente erstellt werden musste. Ich habe das gelöst indem ich ein „FLUIDTEMPLATE“ für das Rendern des Containers verwendet habe. Aus diesem Grund funktioniert diese Variante auch nur für eine TYPO3-Installation >= 4.5 (ungetestet).

Der Aufbau ist einfach gehalten. Man erstellt einen Tabs-Container in dem man wiederum Tab-Elemente erstellen kann. In diese Tab-Elemente können dann wieder ganz normale Inhaltselemente eingefügt werden. Das gute an dieser Aufbauweise ist, dass es so auch möglich ist, mehrere Inhaltselemente „tabben“ zu lassen. Read more …

Bootstrap3 Grid mit Grid Elements für TYPO3

Wenn man eine Webseite mit TYPO3 unter Verwendung von Bootstrap 3 erstellt, kommt man meistens nicht daran vorbei ein Grid zu erstellen, wo der Redakteur die Seite selber strukturieren kann. Mit diesem Element kann der Redakteur dann ein Element erstellen, was eine Zwei-, Drei- oder Vierspaltigkeit darstellt. Innerhalb dieser Spalten kann man dann wieder gewohnte Inhaltselemente wie „Text mit Bild“ platzieren.

Die TYPO3 Erweiterung Grid Elements bietet die Möglichkeit, solche Elemente mit reinem TypoScript und Flexforms zu erstellen. Wenn man sich die Arbeit einmal gemacht hat, kann man so den Code jederzeit in anderen Projekten verwenden. Read more …

Inhalt von anderer Seite mit TYPO3 und TemplaVoila

Wenn man TemplaVoila intensiv verwendet kommt es vor, dass man Inhalt von einer anderen Seite einbinden möchte. Ein Beispiel wäre dafür der Inhalt eines globalen Footers. Man erstellt eine Seite in der der Inhalt des Footers definiert wird und fügt diesen Inhalt im Haupttemplate in einen definierten Marker ein. Problematisch wird das ganze wenn man ein Flexibles Inhaltselement (FCE, Flexible Content Elements) verwendet, welches selber wieder ein Feld für Inhaltelemente hat. Das Ergebnis ist, das alle Inhalte doppelt angezeigt werden, da die Inhaltselemente vom FCE ebenfalls die Seiten-UID der Hauptseite besitzen. Read more …

Verwendung von FAL (File Abstraction Layer) mit TemplaVoila

Seit TYPO3 6.0 gibt es einen eingebauten File Abstraction Layer (kurz FAL) mit dem es möglich ist, eine Datei als Referenz statt einer Kopie zu erstellen. Üblicherweise wird beim auswählen eines Bildes oder Datei in TYPO3 immer eine Kopie im Ordner „uploads/tx_extension“ erstellt. Wenn man aber nun mit vielen hundert Dateien arbeiten muss, ist abzusehen, dass über einen längeren Zeitraum alle Verzeichnisse gelinde gesagt „zumüllen“. Um dieses Problem zu verhindern, gibt es nun den FAL, der dazu dient Dateien zu indizieren und zu referenzieren. Ebenso ist es mit diesem Layer ohne weiteres möglich, eine Verbindung zu einer externen Datenquelle wie Google Drive, Dropbox oder Amazon herzustellen.

Ich allerdings, bin starker Benutzer von TemplaVoila und dort ist dieses Feature des FAL noch nicht angekommen (wird bestimmt bald passieren). Möchte man aber trotzdem das Referenzieren von Bildern in TemplaVoila verwenden, gibt es eine Möglichkeit, die allerdings etwas Geschick erfordert.
Read more …

WebStorm/PhpStorm: Verwendung von SASS & Compass

PhpStorm

SASS bzw. SCSS ist eins der Dinge die ich seit einigen Monaten nicht mehr missen möchte. Die Verwendung ist einfach und klar strukturiert und erleichtert die arbeit mit CSS um ein vielfaches. Compass ist eine Sammlung von Methoden (mixins) für SASS, mit der man z.B. viele CSS3 Eigenschaften Browserübergreifend erstellen kann. Auf die nähere Funktionsweise und den Sinn und Zweck von SASS werde ich in diesem Artikel allerdings nicht eingehen.

Mit PhpStorm kann man SASS/SCSS (und Compass) einfach als Externes Tool verwenden um den erstellten Code sofort kompilieren zu lassen. Folgende Vorgehensweise beschreibt die Verwendung unter Windows, es lässt sich aber ohne weiteres auf andere System übertragen.
Read more …

PhpStorm Live Templates für Extbase

PhpStorm

PhpStorm bietet jede menge Funktionen an, eine sehr nette Funktion davon ist das Live-Template. Live-Templates dienen dazu, mit einem Schlüsselwort einen kompletten Codeabschnitt automatisch zu generieren. Dabei kann man Variablen definieren die dann individuell gesetzt werden können und den Code vervollständigen.

Nachdem ich nun mehrmals ein repository in TYPO3 mit Extbase via „injectTestRepository“ erstellen musste, stellte ich fest das dies eins der Dinge ist die richtig aufhalten können.

Ich habe mir zwei Live-Templates erstellt mit dem ich ein „injectRepository“ und ein allgemeines „injectObject“ erstellen lassen kann und möchte Sie Euch heute einmal vorstellen. Read more …

Seitentitel als umgekehrten Breadcrumb in TYPO3

Um bei Suchmaschinen gute Ergebnisse zu erlangen möchte man unter Umständen, das der Titel einer Seite als umgekehrter Breadcrumb (reversed rootline) dargestellt wird.

Ein üblicher Breadcrumb (rootline) hat den Aufbau:

Home > Unterseite 1 > Unterseite 1.1

Nun möchte man allerdings als Seitentitel foldendes darstellen:

Unterseite 1.1 - Unterseite 1 - Home

Um das zu realisieren wird eine „itemArrayProcFunc“ benötigt die via Typoscript eingebunden wird und das Array des generierten Menüs einfach umdreht. Read more …