Posts Tagged ‘ TYPOSCRIPT

TYPO3 6 with integrated t3editor in own extbase extension

In a current project of mine, the Fluid Template Manager, I use the t3editor in the developed backend module. Thanks of the great post of the typo3blogger I was able to integrate them easily in TYPO3 4.7.x.
But while preparing our ftm Extension for TYPO3 6.1 there happens a small error.
The page with the t3editor isn’t loading, because there happens a 500 internal server error.

The solution is easy.
By the conventions of the TYPO3-Extension folder structure, the folder classes must be written uppercase first. The corrected TCA-Snippet looks now like that:

'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',

By the way, i found out that the cols and rows entries now worked as they should. 🙂

Note: Related to this problem there is another post here, that deals with the integration in different TYPO3 versions.

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

Sorry, this entry is only available in Deutsch.

(Deutsch) 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. 😉

How to create combined AND / OR Conditions with TypoScript

Sorry, this entry is only available in Deutsch.

How to make the TypoScript pageID in Typo3 available for JavaScript

Sometimes it is necessary to have the current pageID from Typo3 available within you website for JavaScript actions and so on.
You are able to do this with a little wrap like this:

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(|)">

How to integrate Dojo Toolkit with TypoScript into Typo3

If you need the Dojo Toolkit within Typo3, you only need the following few lines TypoScript:

page.includeJS {

  # Dojo Configuraton
  file1 = fileadmin/templates/javascript/djConfig.js
  # Dojo-Libraries
  file3 =
  file3.external = 1
  file3.type = text/javascript

In this case i’ve the Dojo configuration within a separate JavaScript file:

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

But attention, as you know the configuration must be included before the Dojo-Library. Therefore the ‘file’-variable have a lower number.. 😉

In the next step we need to integrate all required CSS:

page.includeCSS {
  file2 =
  file2.external = 1 = all

Attention: The included CSS must be external=1 and media=all!

Finally we have to include the Dojo-Theme class ‘nihilo’ into the Body-Tag. This can be done with the next TypoScript:

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

And that’s it.. Now you should be able to use Dojo within your Typo3 site. 🙂

How to use Google Web Fonts with Typo3/TypoScript

For integrating Google Web Fonts into Typo3 you need the following TypoScript:

page.includeCSS {  
  file5 =,400italic,700,700italic
  file5.external = 1 = all

Attention: The included CSS must be external=1 and media=all!
After that, you are able to declare your font by using CSS as usual:

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


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

TIP: For an easier creation, management and reuse of TYPO3 Fluid-Templates, I recommend using the Fluid-Template-Manager (short 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

TIP: For an easier creation, management and reuse of TYPO3 Fluid-Templates, I recommend using the Fluid-Template-Manager (short 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.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


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 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 id="footer-bottom-border"></div>

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