Configure the Fluid TypoScript and create Backend-Templates

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