Typo3 Fluid implement different frontend layouts

Question

I need different Frontend Layouts in my Typo3 Backend. So I have created new html files in

template\Resources\Private\Layouts\Page

So beside Default.html, there is now Layout1.html and Layout2.html

After that I tried to declare those files in my setup.typoscript

[globalVar = TSFE:page | layout=1]
page.10.template.file = FILE:EXT:template/Resources/Private/Layouts/Page/Layout1.html
[global]

[globalVar = TSFE:Page | layout=2]
page.10.template.file = FILE:EXT:template/Resources/Private/Layouts/Page/Layout2.html
[global]

When I switch the frontend layout from default to layout1 or layout2 nothing changes in my frontend.

What is missing, or what am I doing wrong?

Answer 1

The safe ways:

• Have multiple Layout files located next to each other
• Name alternative layouts with suffixes, e.g. MyLayoutSpecial.html as alternative to MyLayout.html
• Assign a template variable that contains the "type" of Layout to use and have that variable contain either nothing or a string like Special
• In the template, use <f:layout name="MyLayout{layoutType}" /> to refer to your layout

The result is a safe resolving of layout files, assuming you check the values always correspond to a physical layout file. If you don't assign {layoutType} your layout name is MyLayout and if you assign it with a value of Special your layout name is MyLayoutSpecial.

Please note that you cannot have multiple f:layout in the same template as only the first will be used. The only way to give multiple possible layout options is to make the name property value dynamic, for example with a simple variable as part of the name.

Second option - template wrapping and contentAs:

Fluid also allows you to render a section for example from a partial template, but pass a variable that you can fill by using tag contents of f:render. This causes the rendered tag content to be passed as a variable that you can then wrap.

Combining this with dynamic partial names or dynamic section names (see above for how to make that safe) means you can refer to any type of dynamic wrapping without having a huge set of conditions. For example:

<!-- In the template that renders the partial -->
<f:render partial="Wrap{specialWrap}" arguments="{_all}" contentAs="content">
    <div>The thing that needs to be wrapped with dynamic wrapping</div>
</f:render>

<!-- In the partial template, for example called `WrapDiv.html` -->
<div class="foo">
    <f:format.raw>{content}</f:format.raw>
</div>

Answer 2

multiple aspects why you should not work in this way:

1. prefer .templateName instead of .template.file
   it is more flexible as you can have multiple outputs (.html, .xml, .json, ...)

2. the layout field is by default not inherited.
   you need to define the field value for each page

3. TS-conditions result in multiple cached versions of the typoscript

4. the backend does not represent the frontend layout for your editors

Alternative:

use the fields backend_layout and backend_layout_next_level like this:

    templateName = TEXT
    templateName.cObject = CASE
    templateName.cObject {
        key.data = levelfield:-1, backend_layout_next_level, slide
        key.override.field = backend_layout

        #Default Template
        default = TEXT
        default.value = Default

        pagets__startpage = TEXT
        pagets__startpage.value = Startpage

        pagets__simple = TEXT
        pagets__simple.value = Simple

    }

or you use the value direct:

templateName = TEXT
templateName {
    value = default
    override.cObject = TEXT
    override.cObject {
        data = levelfield:-1, backend_layout_next_level, slide
        override.field = backend_layout
    }
}

The backend layouts are defines in page TSconfig (deployable from EXT:my_site_ext/Configuration/TSconfig/page.tsconfig)

## define backend-layouts
mod.web_layout.BackendLayouts {
    startpage {
        title = Startpage Layout
        config {
            backend_layout {
                colCount = 4
                rowCount = 4
                rows {
                     :
                }
            }
        }
    }
    simple {
        title = Simple Layout
        config {
            backend_layout {
                colCount = 2
                rowCount = 2
                rows {
                     :
                }
            }
        }
    }
    default {
        title = Default Layout
        config {
            backend_layout {
                colCount = 4
                rowCount = 3
                rows {
                     :
                }
            }
        }
    }
}

if you want the layout field to adapt the general frontend template you need to transfer this information into the fluid-template:

variables {
    :
    layout = TEXT
    layout.field = layout
    :
}

Then you can consider the layout in your template (or layout) files:

<f:if condition="{layout} == 1">
    <then><f:render partial="header1" /></then>
    <else><f:if condition="{layout} == 2">
        <then><f:render partial="header2" /></then>
        <else><f:render partial="header0" /></else></fi>
    </else>
</fi>

and also here you can use the value immediatly (be sure to have all partials available):

<f:render partial="header{layout}" />

---

In general you can use these two fields in multiple ways, here some other usages:

typoscript:

page.10.template {
    templateName = Default

    variables {
        beLayout = TEXT
        beLayout.data = levelfield:-1, backend_layout_next_level, slide
        beLayout.override.field = backend_layout

        feLayout = TEXT
        feLayout.field = layout

        :
    }
}

1.

you use a static template, and the BE- and FE-layout fields are fluid variables which decide further rendering in fluid:

in Templates/Default.html:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
  data-namespace-typo3-fluid="true">
<f:layout name="{beLayout}" />

<f:section name="Main">
    <f:if condition="{feLayout} == 1">
          <div class="col-visual">{content_visual->f:format.raw()}</div>
    </f:if>

    <div class="col-main">{content_main->f:format.raw()}</div>

    <f:if condition="{feLayout} == 2">
         <div class="col-infobox">{content_infobox->f:format.raw()}</div>
    </f:if>
</f:section>

2.

in Templates/Default.html:

<f:render partial="{beLayout}" section="{feLayout}" arguments="{_all}" />

3.

in Templates/Default.html: