Posts Tagged ‘ TYPOSCRIPT

TYPO3 6 mit integriertem t3editor in eigener Extbase-Extension

In einem aktuellen Projekt von mir, dem Fluid Template Manager, benutze ich den t3editor im entwickelten Backend Modul. Danke dem großartigen Post vom typo3blogger war es leicht diesen in TYPO3 4.7.x zu integrieren.
Nur, bei der Vorbereitung der ftm Extension für TYPO3 6.1 passierte ein kleiner Fehler. Die Seite mit dem t3editor wird wegen einem 500er Internal Server Error nicht geladen.

Die Lösung ist einfach.
Laut Konvention der ExtBase-Extensions muss der erste Buchstabe des classes-Verzeichnisses großgeschrieben werden. Das korrekte TCA-Snippet sieht nun wie folgt aus:

'template_code' => array(
    'exclude' => 0,
    'label' => 'LLL:EXT:ftm/Resources/Private/Language/locallang_db.xml:tx_ftm_domain_model_templatefluid.template_code',
    'config' => array(
        'type' => 'text',
        'cols' => 112,
        'rows' => 36,
        'eval' => 'trim',
        'wizards' => array(
            't3editorHtml' => array(
                'enableByTypeConfig' => 1,
                'type' => 'userFunc',
                'userFunc' => 'EXT:t3editor/Classes/class.tx_t3editor_tceforms_wizard.php:tx_t3editor_tceforms_wizard->main',
                'params' => array(
                    'format' => 'html',
                ),
            ),
        ),
    ),
),

Nebenbei fand ich auch heraus, das die cols und rows nun auch funktionieren wie sie sollten. 🙂

Notiz: Bezogen auf dieses Problem gibt es hier noch einen weiteren Post, der die Integration in unterschiedlichen TYPO3-Versionen behandelt.

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 😉

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. 😉

Kombinierte AND / OR Conditions mit mit TypoScript erstellen

Oft kommt es vor das man auf bestimmten Typo3 Seiten-IDs speziellen TypoScript Code einfügen möchte, der sich von anderen Seite unterscheidet.
Für diesen Fall gibt es in TypoScript Conditions. So hatte ich diese Woche den Fall das ich auf zwei bestimmten Seiten jeweils ein Dojo-Modul einbinden und ausführen wollte, aber auf allen anderen Seiten diese Module aus Performance Gründen nicht eingebunden werden sollten – die Dojo-Einbindung aber nicht fehlen sollte.
Für diesen Fall brauchte ich eine Condition mit zwei ‚ungleich‘ / ‚!=‘ Bedingungen, die ich mit einem ‚logischem UND‘ / ‚AND‘ verknüpfe.
Das Resultat ist das folgende TypoScript:

[globalVar = TSFE:id = 3]
page {
  headerData {
    11 = TEXT
    11.value (
      <script type="text/javascript">
        // Require in Dojo's i18n utilities first
        dojo.require("dojo.i18n");
        dojo.require("dojox.image.Lightbox");
			
        // Own Module and Translation
        dojo.require("mop.Collection");
        dojo.requireLocalization("mop", "collection");	
        dojo.addOnLoad(function() {
          startUp();
          mop.Collection.create("./fileadmin/templates/collection.php", "content_main_full", "subNavi");
        });
      </script>
    )    
  }
}
[global]

[globalVar = TSFE:id = 8]
page {
  headerData {
    11 = TEXT
    11.value (
      <script type="text/javascript">
        // Require in Dojo's i18n utilities first
        dojo.require("dojo.i18n");
        dojo.require("dojox.image.Lightbox");
			
        // Own Module and Translation
        dojo.require("mop.Slider");
        dojo.requireLocalization("mop", "slider");	
        dojo.addOnLoad(function() {
          startUp();
          mop.Slider.create("./fileadmin/templates/slider.php", "sliderCampaign");
        });
      </script>
    )    
  }
}
[global]

[globalVar = TSFE:id != 3] AND [globalVar = TSFE:id != 8]
page {
  headerData {
    11 = TEXT
    11.value (
      <script type="text/javascript">
        // Require in Dojo's i18n utilities first
        dojo.require("dojo.i18n");
        dojo.require("dojox.image.Lightbox");
        
        dojo.addOnLoad(function() {
          startUp();
        });
      </script>
    )    
  }
}
[global]

Typo3 pageID mit TypoScript für JavaScript zur Verfügung stellen

Manchmal ist es notwendig, die aktuelle pageID von Typo3 innerhalb einer Website für JavaScript-Aktionen und oder ähnliches verfügbar zu haben.
Mit dem folgenden kleinem Wrap ist dies leicht möglich:

page.bodyTagCObject = HTML
page.bodyTagCObject.value.field = uid
#page.bodyTagCObject.value.wrap = <body id="pageID_|">
#page.bodyTagCObject.value.wrap = <body onload="sendPageIdToAnyFunction(|)">
page.bodyTagCObject.value.wrap = <body onload="alert(|)">

Das Dojo-Toolkit mit TypoScript in Typo3 integrieren

Wenn Du das Dojo Toolkit in Typo3 benötigen, brauchen Sie nur die folgenden paar Zeilen TypoScript:

page.includeJS {

  # Dojo Configuraton
  file1 = fileadmin/templates/javascript/djConfig.js
 
  # Dojo-Libraries
  file3 = http://ajax.googleapis.com/ajax/libs/dojo/1.6/dojo/dojo.xd.js
  file3.external = 1
  file3.type = text/javascript
}

 
In diesem Fall habe ich die Dojo-Konfiguration in einer separaten JavaScript-Datei:

var djConfig = {
  parseOnLoad: true,
  locale: 'de'
};

 
Aber Achtung, wie Du sicher weißt muss die Konfiguration vor der Dojo-Bibliothek integriert werden. Daher hat die ‚file‘-Variable geringere Nummer .. 😉

Im nächsten Schritt müssen wir das erforderliche CSS integrieren:

page.includeCSS {
  file2 = http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/nihilo/nihilo.css
  file2.external = 1
  file2.media = all
}

 
Achtung: Das CSS muss mit external=1 und media=all eingebunden werden!

Abschließend müssen wir die Dojo-Theme class ’nihilo‘ in den Body-Tag schreiben. Dies kann mit dem nächsten TypoScript vorgenommen werden:

page.bodyTagCObject = HTML
page.bodyTagCObject.value = <body class="nihilo">

 
Und das war’s .. Nun sollten Sie in der Lage sein Dojo in Ihrer Typo3 Website zu nutzen. 🙂

Google Web Fonts mit TypoScript in Typo3 einbinden

Für die Integration von Google Web Fonts in Typo3 brauchst Du das folgende TypoScript:

page.includeCSS {  
  file5 = http://fonts.googleapis.com/css?family=Marvel:400,400italic,700,700italic
  file5.external = 1
  file5.media = all
}

 
Achtung: Das CSS muss mit external=1 und media=all eingebunden werden!
 
Danach kann die Font ganz normal mit CSS deklariert werden:

.webFont {
  font-family: 'Marvel',Arial,Helvetica,sans-serif;
}

Integrate a JavaScript File (as sample jQuery) into a Typo3 Website

Currently i need some JavaScript-Actions in my Typo3-Website, therefore i will integrate jQuery.
 
First of all, download the current version of jQuery and upload the .js-File to your Webspace, as sample in:

/fileadmin/template/javascript/jquery/

 
After that, navigate into the Typo3 Backend to the TypoScript Main-Template and add the following TypoScript to the Setup:

# Assign the JavaScripts
page.includeJS { 
  file1 = fileadmin/templates/javavcript/jquery/jquery-1.6.2.min.js 
}

 

 
Now your JavaScript-Library is ready to use 🙂

Install the tscobj Extension under Typo3 4.5

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

In order to use some PHP-generated Content within a Content-Element in Typo3, i need to insert a TypoScript-Mark within these Content-Element.
Therefore i want to install the tscobj. The tscobj Extensions allows you, to use a TypoScript-Mark within a Content-Element. So you are able to manage all your TypoScript centrally in the Setup-Area of your Template. So you have no more widespread TypoScript Code in several Content-Elements.. 🙂

The installation of the tscobj Extension is very easy, just do the following few steps:

At first, navigate to ‘ADMIN TOOLS’ -> ‘Extension Manager’, and select ‘Import extensions’ within the Select-Box on the top of the mainframe. Here enter the Extension-Name ‘tscobj’ in the ‘Look up extensions’ Field, then press ‘Look up’ 😉


 
After that, do import the Extension into your System by clicking on the Brick-Symbol from the ‘tscobj’-Row


 
And that’s it..


 
Read in a following Post, how to use this Extension… So, stay tuned 😉

Create a Typo3 Menu/Navigation and include it in a Fluid-Template

TIPP: Um noch leichter TYPO3 Fluid-Templates erstellen, verwalten und wiederverwenden zu können empfehle ich die Verwendung des Fluid-Template-Manager (kurz FTM).

Notice: This Post is the fifth part of Create a complete Typo3 website by using the Fluid Template Engine

After creating a few more sites, includes some CSS-Files and designing the main frame, we will create a main-menu for our site.

1. Navigate into ‚WEB‘->’List‘, select the root-site within the tree and create a new sub-template by clicking on the New-Icon on your main-template. (show image)
2. Enter a name and save the new sub-template. (show image)
3. Be sure that the new sub-template is listed under the main-template and edit the main-template. (show image)
4. Open the Inlcudes-tab and search in the Include Basis Template Area for your sub-template, then include it (show image) and save the changes. (show image)
5. Open the new sub-template for creating the menu-TypoScript. (show image)
The mainNavi TypoScript could look like (show image) :

lib.mainNavi = HMENU
lib.mainNavi.entryLevel=0
lib.mainNavi.1 = TMENU
lib.mainNavi.1 {
  wrap = <ul id="mainNavi">|</ul>
  expAll = 0
  NO.allWrap = <li class="mainNaviItem">|</li>
  RO < .NO
  RO = 1
  CUR < .NO
  CUR = 1
  CUR.allWrap = <li class="mainNaviItemActive">|</li>
  ACT < .CUR
}

 

6.
Now we just have to include the mainNavi TypoScript objectpath into our Fluid-Template. Therefore we navigate into ‚FILE‘->’Filelist‘ and edit the fileadmin/templates/layouts/main.html and add the f:cObject on the needed position (show image) :

  <f:cObject typoscriptObjectPath="lib.mainNavi" />

 
Our Fluid-Template now looks like:

<div id="header">
  <div id="header-top-border"></div>
  <div id="header-area"></div>
  <f:cObject typoscriptObjectPath="lib.mainNavi" />
  <div id="header-line-dark"></div>
  <div id="header-line"></div>
</div>
<div id="content"><f:render section="content" /></div>
<div id="footer">
  <div id="footer-line"></div>
  <div id="footer-text">
    <div id="footer-text-left"></div>
    <div id="footer-text-right"></div>
  </div>
  <div id="footer-bottom-border"></div>
</div>

 
Notice: Don’t forget to clear the Typo3-Cache after editing the Fluid-Template. 😉