Archive for Jun. 2012

Die verwendeted Typo3 Storage-ID in einer ExtBase Controller-Action verwenden

Um die Storage-ID in einer ExtBase-Extension sauber auslesen zu können müssen wir unsere setup.txt TypoScript Datei ein wenig erweitern, und die storagePid auch im settings-Zweig verfügbar machen:

plugin.tx_yourext {
    persistence {
        storagePid = {$plugin.tx_yourext.persistence.storagePid}
    }
    settings {
        storagePid = {$plugin.tx_yourext.persistence.storagePid}
    }
}

Einfach nur das tx_yourext durch den Extension-Key deiner Extension ersetzen.
Nach dem Speichern und Einspiele in Typo3, nicht vergessen den Typo3-Cache zu leeren 😉

Danach kann man einfach innerhalb einer ExtBase Controller-Action mit der folgenden Zeile darauf zugreifen:

$this->settings['storagePid']

Nun sollte mit die Storage-ID zum Eimsatz bereit sein.

Sollte die Storage-ID leer sein, hast Du vielleicht vergessen sie im Typo3 entsprechend zu setzen 😉

LESS mit Fluid-Templates verwenden in Typo3 4.5

TIPP: Um LESS optimal mit TYPO3 Fluid-Templates nutzen zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Um Templates und Designs schneller und effektiver zu entwickeln ist es zu empfehlen LESS zu verwenden.
LESS ist eine ähnliche Technik wie SASS bietet einem viele Möglichkeiten wie bspw. Variablen-Definition, Mixins, etc., welche die CSS-Erstellung beschleunigen und die Wiederverwendbarkeit erhöhen.
Vorallem bei der Verwendung vieler neuer CSS3-Features, wo oft jeder Browser sein eigenes Statement erwartet, ist es sinnvoll LESS-Mixins einzusetzen.

Alle Infos und die Dokumentation zu LESS findet Ihr hier:
http://lesscss.org/.

Viele brauchbare Mixins findet man hier:
http://lesselements.com/.

Starten wir nun um ‚mal eben‘ LESS in unser Typo3 einzubinden. Folge einfach den nächsten Punkten Schritt für Schritt:

  1. Als erstes wechseln wir in den Extension-Manager und installieren die notwendigen Extensions. Ich arbeite hier gerne mit der LESS Extension cs_less, da diese einen View-Helper mitbringt, mit dem man sein LESS direkt im Fluid-Template einbinden kann. Da diese jedoch wiederum Abhängigkeiten zu anderen Extensions hat, installieren wir diese beiden zuerst. Dies wären aktuell fed (1.4.12) und flux (1.4.1). Nach dem die beiden Extensions importiert und installiert sind, nur noch schnell die cs_less Exxtension hinterher installieren
  2. Nach dem die notwendigen Extensions vorhanden sind können wir beginnen unsere LESS-Dateien zu erstellen. Die erste nennen wir styles.less und legen sie in unserem fileadmin/templates/css/-Verzeichnis ab. Danach laden wir uns die less-elements runter, und legen die Datei elements.less in das gleiche Verzeichnis.
  3. In unsere styles.less importieren wir die less-elements und wenden zum testen einfach mal Gradient auf den Body-Tag an:
    @import "elements.less";
    body {
       .gradient(#F00, #F00, #FFF);
    }
    

    .gradient() ist an dieser Stelle ein Mixin, welches von den less-elements bereitgestellt wird. Das .gradient() Mixin ist mit einer Funktion vergleichbar, welche drei Parameter erwartet. Als Rückgabe fügt diese bei der Compilierung des LESS alle erforderlichen CSS-Statements für die jeweiligen Browser in das CSS ein.
    Das Ergebnis sieht wie folgt aus:

    body {
      background:#ff0000;
      background:-webkit-gradient(linear,left bottom,left top,color-stop(0,#ff0000),color-stop(1,#ffffff));
      background:-ms-linear-gradient(bottom,#ff0000,#ffffff);
      background:-moz-linear-gradient(center bottom,#ff0000 0%,#ffffff 100%);
    }
    
  4. Nun müssen wir nur noch den View-Helper der cs_less-Extension verwenden, um unser LESS einzubinden. An diesem Punkt gehen ich einfach mal davon aus, das eh schon Fluid als Template-Engine verwendet wird 😉
    Also öffnen wir uns die Layout-Datei unseres Fluid-Templates. Meine liegt bspw. unter /fileadmin/templates/layouts/main.html. Wir öffnen diese und fügen den folgenden Code hinzu:

    {namespace less=Tx_CsLess_ViewHelpers}
    <less:style href="fileadmin/templates/css/styles.less" />

    In der ersten Zeile definieren wir den Namespace, in dem unser View-Helper zu finden ist. Danach wird dieser einfach nur noch verwendet. Das Attribute href bekommt den Pfad zu unserer Less-Datei, alles andere passiert automatisch. Wenn man nun alle seine Styles über die LESS-Datei definiert, ist keine weitere CSS-Datei notwendig. Natürlich kann man auch normales CSS in der LESS-Datei verwenden, aber das kann man alles auf der LESS-Dokumentation nachlesen. 😉

Typo3 Multisite/MultiDomain: Fluid-Website zu bestehender TemplaVoila-Website hinzufügen

Woah.. Nachdem ich nun über zwei Stunden an einem Fluid/TemplaVoila-Problem verbracht habe, hier nun die Lösung für alle, die vielleicht mal ein ähnliches Problem haben.

Ziel war es in eine bestehende TemplaVoila-Website, eine komplette neue Website zu integrieren, welche jedoch auf Fluid als Template-Engine setzt. Alles im Allgemeinen kein Problem, da ich schon sehr lange mit Fluid arbeite und es lieben gelernt habe 😉
Das Vorgehen zur Integration der zusätzlichen Website ging nun wie gewohnt von statten:

  1. fluid und extbase über den Extension-Manager installiert
  2. Im fileadmin ein neues Verzeichnis angelegt, wo die üblichen Template-Dateien für Fluid liegen
  3. Im Typo3-Root einen neuen Shortcut für meine neuen Website-Root erstellt. Darin liegen wie gewohnt die Pages der Websites.
  4. Auf der Website-Root Seite wird nun ein neues Root-Template erstellt. Hier werden im TypoScript-Template auf dem Tab:Options die folgenden Checkboxen angehakt:
    Clear: Constants & Setup; Rootlevel
  5. Zusätzlich werden auf der Website-Root Seite die erforderlichen Backend-Templates erstellt

Alles in allem, bis auf die Einstellungen zur zweiten Website, wurden die Schritte wie in diesem Artikel ausgeführt: Create a complete Typo3 website by using the Fluid Template Engine

Nun sollte eigentlich soweit alles startklar sein, um die Inhalte einzupflegen..

Aber stop, was ist das!?

Wenn wir die Page-Properties einer Seite von uns öffnen und unter Appearance ->Backend Template eines unserer angelegten Backend-Templates auswählen wollen, ist die Select-Box leer?! Stutzig macht auch ein wenig, das dort nicht wie gewohnt das Label ‚Backend Layout (this page only)‘, sondern ‚Use Template Design‘ steht.

Nach langer Recherche, Testen und Debugging – keine Lösung in Sicht. Durch Zufall, da ich noch ein deaktiviertes WEB->Page Module wieder aktivieren wollte, bin ich dann in die Extension-Einstellungen der TemplaVoila-Extension gegangen – und siehe da: Die Extension biete Datenbank-Tabellen Updates an. Nach dem diese ausgeführt worden sind, der Cache proforma einmal geleert, sind auf mal alle vorhandenen Backend-Templates vorhanden. Auch das Label hat wieder wie gewohnt den Inhalt ‚Backend Layout (this page only)‘


Ich sag nur, Sachen gibts – die gibts gar nicht. 😉