TYPO3 FLUID blank page TYPO3

1
votes

I try to create my first FLUIDTEMPLATE. But the Methode

f:layout

dont get activated.

My structure:

/fileadmin/
/fileadmin/layouts/layout.html
/fileadmin/partials/
/fileadmin/styles/
/fileadmin/templates/template.html
/fileadmin/typoscript/
/fileadmin/typoscript/01_script/setup.ts
/fileadmin/typoscript/02_object/

setup.ts:

page = PAGE
page.typeNum = 0

page.10 = FLUIDTEMPLATE
page.10 {
    format = html
    file = fileadmin/templates/layouts/layout.html
    partialRootPath = fileadmin/templates/partials/
    layoutRootPath = fileadmin/templates/layouts/
    variables {
        content_main < styles.content.get
        content_main.select.where = colPos = 0
    }
}
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

    default = TEXT
    default.value = fileadmin/templates/template.html
}

Layout.html:

<div id="wrapper">
      <div id="header">
      header
      </div>

      <div id="top_nav">
      top_nav
      </div>

      <div id="left">
      left
      </div>      

      <div id="right">
      right
      </div>

      <div id="center">
          center
      </div>

      <div id="footer">
       footer
      </div>
</div>

template.html:

<f:layout name = "Layout" />

template setup: 

<INCLUDE_TYPOSCRIPT: source ="DIR:fileadmin/typoscript/">

Now, if i view the webpage i only see a blank page. If i look on the code i get that: 

<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="utf-8">
    <!-- 
        This website is powered by TYPO3 - inspiring people to share!
        TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
        TYPO3 is copyright 1998-2017 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
        Information and contribution at https://typo3.org/
    -->



    <title>Fluid</title>
    <meta name="generator" content="TYPO3 CMS">


    <link rel="stylesheet" type="text/css" href="typo3temp/Assets/b9db200ac9.css?1491821607" media="all">

    </head>
    <body>
    <f:layout name = "Layout" />

    </body>
    </html>

I am using TYPO3 v7.6.16.

3
typo3fluidtypo3-7.6.x
<f:layouts... > is a typo? (no pun intended) AFAIK in fluid you should use files that begins with capital letter – Riccardo De Contardi
But it dont change nothing. – thenewOne1234567890
Here is the step by step guid thomas.deuling.org/2011/06/…. Hope this will help you! – GNB
i already try it it dont help me! – thenewOne1234567890
in your typoscript you should use *Paths instead of *Path, also you should define templateRootPaths.0 and furthermore use only templateName instead of file. – Bernd Wilke πφ

3 Answers

2
votes

There are several issues with your example code. Lets go through them:

  1. You should not put your templates in the fileadmin where they are (by default) accessable by web requests and editable by editors. Instead put them inside an extension under Resources/Private/.

  2. You should not specify the layout file as your template. You have

    file = fileadmin/templates/layouts/layout.html

Instead of the layout.html you should point to a template like your Template.html inside Resources/Private/Templates

  1. In your template you then may include a layout file. But remove the whitespaces: <f:layout name="Layout" />.
  2. Use UpperCase names for your template, layout and partial files (Template.html instead of template.html).
  3. Use templateRootPaths and layourRootPaths and partialRootpaths instead.

So your TypoScript could look like this:

page.10 = FLUIDTEMPLATE
page.10 {
    format = html
    file = EXT:my_ext/Resources/Private/Templates/Template.html
    partialRootPaths {
        10 = EXT:my_ext/Resources/Private/Partials/
    }
    layoutRootPaths {
        10 = EXT:my_ext/Resources/Private/Layouts/
    }
    templateRootPaths
        10 = EXT:my_ext/Resources/Private/Templates/
    }
    variables {
        content_main < styles.content.get
        content_main.select.where = colPos = 0
    }
}
2
votes

Templates: Startseite.html

<f:layout name="Default" />

<f:section name="body">
    <div id="wrapper">
        <div id="header">
            {header->f:format.raw()}
        </div>

        <div id="top_nav">
            {top_nav->f:format.raw()}
        </div>

       <div id="left">
            {left->f:format.raw()}
       </div>      

       <div id="right">
            {right->f:format.raw()}
       </div>

       <div id="center">
            {center->f:format.raw()}
       </div>

       <div id="footer">
            {footer->f:format.raw()}
       </div>
   </div>
</f:section>

you can configure same for inner page(Inhaltsseite) layout.

Layouts: Default.html

<f:render section="body" />

Typoscript: (setup.ts)

lib.pageTemplate = FLUIDTEMPLATE
lib.pageTemplate {

    templateName = TEXT
    templateName.stdWrap.cObject = CASE
    templateName.stdWrap.cObject { 
        key.field = backend_layout

        # @todo: setup all page templates
        default = TEXT
        default.value = Startseite

        1 = TEXT
        1.value = Inhaltsseite

    }

    templateRootPaths {
        10 = fileadmin/templates/Resources/Private/Templates/
    }    
    partialRootPaths {
        10 = fileadmin/templates/Resources/Private/Partials/
    }
    layoutRootPaths {
        10 = fileadmin/templates/Resources/Private/Layouts/
    }

    variables {
        content = CONTENT
        content {
            table = tt_content
            select.orderBy = sorting
            slide = -1
            select.where = colPos=0
        }
    }
}

# Page setup Configuration
page = PAGE
page {
    # Your TypeNum
    typeNum = 0

    #Include header data if any
    headerData{
    }

    #Include website meta
    meta{
    }

    #Include stylesheet
    includeCSS {
    }

    #Include Js files(In the header)
    includeJS {
    }

    #Include Js in footer
    includeJSFooter {
    }

    # assign template (copy fluid template object)
    10 < lib.pageTemplate
}

Include setup.ts in the template->include->setup.ts from the BE.

<INCLUDE_TYPOSCRIPT:source="FILE:fileadmin/templates/Configuration/TypoScript/setup.ts" />

Greetings!

0
votes

you first have to create a page object in typoscript (which is missing in the typoscript above): page = PAGE this should be the first line in your typoscript.