Configure the Fluid TypoScript and create Backend-Templates

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 fourth part of Create a complete Typo3 website by using the Fluid Template Engine Before we can actually see the first result on the screen , we have to configure the TypoScript template. We do this again step by step 😉 1. Navigate to the ‘WEB’->’Page’ module and click on the Typo3-Icon in the frame next to the modules list (“tree area”) and create a new site. (show image) 2. Enter a name for the Root-Site of your website (show image) 3. Navigate on the Access-tab and remove the Disable-Checkbox and save the changes subsequently. (show image) 4. Navigate into the ‘WEB’->’Template’ module, and create a new Template by clicking on ‘Create template for a site’ (show image) 5. After that, click on ‘Edit the whole template record’ (show image) 6. Enter a name for the Template and write the first TypoScript code, that will define the page (show image):

# Create and configure our site
page = PAGE
page.typeNum = 0
page.meta.DESCRIPTION = My Site
page.meta.KEYWORDS = Internet, Homepage, Typo3

7. Navigate to the Includes-tab and include the ‘CSS Styled Content’ in the Include-static Area and then save the complete template. (show image) 8. Now we proceed to create the Backend-Templates. The Backend-Templates define the backend view, so the editor(s) can only see the content areas that are present in each template. In our default case, a Backend-Template with three columns and an alternative template with only one content area. Navigate to ‘WEB’->’List’ and click above the main-frame on the New-Icon, then click on ‘Backend Layout’. (show image) 9. Enter a name for the Backend-Template and click the Edit-icon in the config-area to start the Wizard. (show image) 10. In the Wizard-Popup we create for example the Three-Column Layout. To achieve this start by clicking on the right side twice on the Plus-Icon. (show image 1, image 2) 11. Then click on each Layout-Column on the Edit-Icon an give the columns a name and a column number. (show image) In our case the columns will have the following column-numbers: Left=1, Center= 0, Right= 2. (show image)The resulting config for the threeColumnTemplate would look like this:

backend_layout {
  colCount = 3
  rowCount = 1
  rows {
    1 {
      columns {
        1 {
          name = leftColumn
          colPos = 1
        }
        2 {
          name = mainColumn
          colPos = 0
        }
        3 {
          name = rightColumn
          colPos = 2
        }
      }
    }
  }
}

The resulting config for a fullSize Template would look like this:

backend_layout {
  colCount = 1
  rowCount = 1
  rows {
    1 {
      columns {
        1 {
          name = mainColumn
          colPos = 0
        }
      }
    }
  }
}

Notice: After creating the Backend-Templates, look for the respective Template-ID. You will find the ID at the right bottom corner, and it would look like ‘Backend Layout [2]’. My threeColumTemplate has the ID 2, the fullSizeTemplate the ID 3. We will need the respective ID when producing the required TypoScript code. (show image) 11. Now we will write the required TypoScript code for our site. For this purpose we navigate back to ‘WEB’->’Template’, click on our root-site and then edit the Setup. (show image) First of all, we will assign the Typo3-Columns with the Fluid-Templates: (show image)

# Create a Fluid Template
page.10 = FLUIDTEMPLATE
page.10 {
  # Set the Template Pathes
  partialRootPath = fileadmin/templates/partials/
  layoutRootPath = fileadmin/templates/layouts/
  variables {
    # Assign the main column with our {content}-destination
    content < styles.content.get
    # Assign the left column with our {content_left}-destination
    content_left < styles.content.get
    content_left.select.where = colPos = 1
    # Assign the right column with our {content_right}-destination
    content_right < styles.content.get
    content_right.select.where = colPos = 2
  }
}

After that we assign the Backend-Template, so that we can select it later when creating pages (show image):

# Assign the Template files with the Fluid Backend-Template
page.10.file.stdWrap.cObject = CASE
page.10.file.stdWrap.cObject {
  key.data = levelfield:-1, backend_layout_next_level, slide
  key.override.field = backend_layout

  # Set the default Template, our 3 column Template
  default = TEXT
  default.value = fileadmin/templates/threeColumn.html

  # Set also the first [2] Template, our 3 column Template
  2 = TEXT
  2.value = fileadmin/templates/threeColumn.html

  # Set a second [3] Template, our full size Template
  3 = TEXT
  3.value = fileadmin/templates/fullSize.html
}

12. At the end we want to create some pages to test the result of our configuration. We do this under ‘WEB’->’Functions’, as we will need several pages. Navigate to this module and click once again on the “New”-icon above the main frame. There we enter the name(s) of our new site(s) and click ‘Create pages’. (show image) When the dialogue ‘You’re about to create many new pages. Are you sure you want to continue?’ pops up, click ‘Yes’. 13. After that we can modify our Root-Site to become a shortcut. Just click within the tree-area on the root-page icon and click edit. (show image) Select on the General-tab the Type ‘Shortcut’ and the Shortcut Mode ‘First subpage of current page’. (show image) 14. Now you only need to select the required Template for your pages and create page contents… and that’s about it. Edit for example the start-site and navigate to the Appearance-tab, there we select the threeColumnTemplate as Backend Layout (this page only) and Backend Layout (subpages of this page). (show image) A Backend-Page for our threeColumntemplate could now look like this: (show image) So now I’m going to create my Fluid HTML-Template in detail 🙂 I’ll be back soon and then we’ll see how to create some navigation menus and so on.. 😉 Read here the next step: Create a Typo3 Menu/Navigation and include it in a Fluid-Template

  1. Hallo Thomas,

    super Tutorial bis hier, vielen dank für all die Mühe. Hatte gelesen, dass einige sich über sprachliche Sachen aufgeregt haben, aber es ist absolut verständlich und inhaltlich super. Gerade für Anfänger habe ich selten sowas gutes gelesen.

    Meine Frage: wenn ich am Ende dieser Stelle eine Seite angucke, wird leider der für sie erstellte Content noch nicht angezeigt. So geht alles, die Templates werden richtig geladen und so. Nur die Inhalte nicht.

    Ich habe für jede Spalte einen einfachen TEXT-Content erstellt, die sehe ich nicht. Fehlt da an dieser Stelle noch etwas?

    Bin neu bei Typo und daher für jede Hilfe dankbar.

    Viele Grüße,
    Sebastian

      • tdeuling
      • November 10th, 2011

      Hi Sebastian, sorry für die späte Antwort.. Ich hatte erst zu viel zu tun, und dann war Dein Kommentar zu tief unter den anderen 😉
      Du hast Dein Problem bestimmt schon in den Griff bekommen, oder?
      Es klingt ein wenig als wären deine Inhalte nicht online/sichtbar geschaltet?

        • Mich
        • November 22nd, 2011

        Hatte genau das gleiche Problem. Bei mir lags daran, dass ich einfach mal vergessen hab “CSS Styled Content” im Template zu includen.

        Und Danke für das tolle Tutorial! 🙂

    • Jepp
    • November 7th, 2011

    Hallo,
    bei Punkt 8 steige ich voellig aus. Das was man im Screen Shot sieht, das gibt es bei mir niegends! Hab verzeifelt jetzt ganz lange geschaut 🙁
    Leider endet nun abrupt Dein Howto :-/
    Gruss,
    Jepp

      • tdeuling
      • November 7th, 2011

      Das gibt es bei Dir bestimmt auch 😉
      Und es steht auch genau da wie Du da hinkommst: Links im Menü-> Abschnitt WEB -> auf List klicken -> dann im Baum die Wurzelseite anklicken..

    • Jepp
    • November 8th, 2011

    Hallo Tdeuling,

    ich habe das Howto mit einem leeren Typo3 4.5.7 begonnen.
    Ich habe in List einen Baum mit “New TYPO3 site” und darunter
    die im Howto angelegte “Meine_seite”. Und wenn ich auf eins von
    beiden klicke, kommt im rechten Fenster ein Template Tabelle,
    eine Checkbox: ExtendeD View, Show clipboard, Localization view
    und ein Search-Form. Mehr leider nicht :-/

    Viele Gruesse

      • tdeuling
      • November 10th, 2011

      Naja, hast du denn dann auch oben auf das grüne Plus gedrückt… Auf neuen Content anlegen?
      Wenn das noch nicht hilft, schreib mir mal in einer Mail deinen Skypenamen, dann bekommen wir das schon in den Griff 😉

    • Sebastian
    • November 14th, 2011

    Hi, hab gerade dein Template durchgearbeitet, funzt alles prima, nur das er mir aus igend einem grund für jedes content element massenweise überflüsside -Tags erstellt


      

    xxxxxxXXXXXXXxxXXXXXXxxx

     

    waran kann das liegen?
    grüße
    Sebastian

      • tdeuling
      • November 15th, 2011

      Hallo Sebastian,
      das Problem liegt am Fluid-Template.
      Da muss eine parseFuncTSPath eingefügt werden, ich muss wohl mal bei Gelegenheit das Tutorial überarbeiten 😉

      Um die HTML-Tags zu entfernen verwendest du:
      parseFuncTSPath=”lib.parseFunc”

      Wenn Du HTML-Tags (HTML-Content) eingefügt hast, die nicht escaped werden sollen verwendest Du:
      parseFuncTSPath=””

      Beispiel:

      {content_left}
      {content}
      {content_right}

        • palianah
        • January 24th, 2012

        wo genau muss dieser parseFuncTSPath reingeschrieben werden?
        Ich habe das Problem nämlich auch..

  2. Hallo,

    vielen Dank für diese geniale Tutorial-Serie!
    Sie hat mir durchaus weitergeholfen und macht mir Mut, weiter mit Typo3 zu arbeiten 🙂

    vG René

    • demonkoryu
    • January 23rd, 2012

    Ist es möglich, die Backend-Layouts in externe Dateien auszulagern, ähnlich wie man das mit TypoScript-Templates via INCLUDE_TYPOSCRIPT machen kann?

    Ich würde die Layouts gerne in meiner Versionskontrolle speichern, das geht aber nicht mit datenbankbasierten Datensätzen.

      • tdeuling
      • January 23rd, 2012

      Das ist eine gute Idee. Ich habe es noch nicht probiert..
      Aber wenn Du herausfindest ob und wie es geht würde ich mich freuen wenn Du mir schreibst wie Du es geschafft hast 🙂

  3. Awesome, this just saved me the usage of fluidpage extension!

  4. Great Tutorial….
    Thanks a lot for all slides…

    • Christian Kirchhoff
    • October 4th, 2012

    Hallo,

    vielen Dank für das Tutorial. Ich habe alles schrittweise ausgeführt, wobei ich TYPO3 Ver. 4.7.4 mit dem Introduction Package verwendet habe. Dort gibt es bereits eine Menge TypoScript-Templates, aber ich müsst es in Schritt 11 eigentlich in der korrekten Datei und an der korrekten Stellen eingebaut haben.

    Dennoch werden mir die backend-Templates nicht angeboten, wenn ich eine vorhandene oder neue Seite editiere und auf das Appearance-Tab wechsele.

    Kann es sein, dass noch irgendwo etwas gecached wird? Ich habe den Cache mittels “Clear all cahces” geleert.

    Meta description und keywords sind bei dem Introduction Package ebenfalls in TypoScript-Templates als Konstanten definiert. Diese habe ich in den Templates geändert, und auch sie werden, wenn ich das Frontend neu lade, nicht angazeigt, sondern noch die alten Werte.

    Ich wäre für jeglichen Hinweis dankbar.

    • Sjoerd
    • February 16th, 2013

    Hi Thomas,

    First of all, great write-up! This must have helped a great number of Typo3 developers, including me 🙂

    Can’t read much of the german comments tho (a general problem for the international T3 developer)..

    Anyway, there is one thing I’m not fully understanding, and that is the relation between the Frontend Layout and the Backend Layout.. It seems that this Backend Layouy as described in this article makes FrontEnd layouts obsolete???

    best,
    Sjoerd

    • ssolg
    • May 6th, 2013

    hi. very useful tutorial. but i’ve some problem: in WEB-> Page i have “no edit access” (left and right column) and “not assigned” (center).

      • tdeuling
      • May 6th, 2013

      Hi,
      i don’t understand the problem. Maybe you can describe it more in detail, as possible with an additional image or link?

    • avand
    • August 28th, 2013

    Thanks for the tutorial. It’s help me clarify FLUID.

    If I have a diffrent layouts example I dont’t want some div to my others tempate. How can I achive that. Can I use if condition then?

      • tdeuling
      • August 28th, 2013

      Hi, you can do many great things with the Fluid Layout/Templates/Partials. You are able to nest them, branch them in if/then/else or writing your own conditional-viewhelper. Near by everything is possible, but the solution relates always on your current requirements or target of functionality.

        • avand
        • August 28th, 2013

        tdeuling, thank you for you last answer. In this tutorial is still one of the messy part for me.

        I followed you tutorial step-by-step. But everywhere in my front is still three columns even my subpages where in backend is one full size column. I want in my front have three columns and subpages have one column. I just don’t undesrtstand how browse front and subpages sections diffrently. Could you explain me that?

          • tdeuling
          • August 28th, 2013

          Hi, maybe you have used the wrong uid’s in the TYPOScript.
          Take a look at part 11, the second TYPOScript code-section.
          The important code is:
          3 = TEXT
          3.value = fileadmin/templates/fullSize.html
          The number (in this case 3) before the statement must equal with the uid of the backend-layout. You will find the uid at the right bottom corner of the backend-layout edit view (looks like ‘Backend Layout [2]‘).

          If there’s a non existing number, the system will use the default as fallback and use your threecolumn layout.