define Frontend Layouts for page trees

3
votes

I'm using the field Frontend-Layout at my TYPO3 7.6-Backend. Because my website will have four different departments with different colours in frontend.

pages frontend choose layout

So I'm using:

TCEFORM {
    pages {
        layout {
            altLabels {
                0 =  [ blue]
                1 =  [ orange ]
                2 =  [ green]
                3 =  [ yellow]
            }
        }
    }

} ### TCEFORM

At my FLUIDTEMPLATE I'll wrap an <div>-wrapper, to set my different languages globally at my stylesheet. f.e. div.wrap.blue { background-color:blue;}

<div class="wrap 
{f:if(condition:'{data.layout} == 0',then:'blue')}
{f:if(condition:'{data.layout} == 1',then:'orange')}
{f:if(condition:'{data.layout} == 2',then:'green')}
{f:if(condition:'{data.layout} == 3',then:'yellow')}">
...

This works perfect for me. But how can I slide (or inherit) the frontend-layout-info from my parent-page to the subpages on my pagetree? I don't want to choose the frontend layout in page properties everytime, if I will add a new page into my pagetree. This must be working automatically. Is this possible? With slide?

For example

*ROOT
  + parent blue
    ~~ sub blue 1 /* these pages also have frontend layout 0 */
    ~~ sub blue 2
  + parent orange
    ~~ sub orange 1
  + parent green
    ...
  + parent yellow
  ...

Thebks for your opinion or tips ..

2
layouttypo3slidetyposcripttypo3-7.6.x
I am not sure you can set that layout recursively. To workaround your problem, I would create four different page templates that you can easily configure to be used for subpages. - The F
Do you mean four different backend layouts? then you'll can select the backend layout for the parent and the subpages. I thought about it, but try to use frontend layouts. maybe it will be better to use backend layouts (fluid). Thanks for your advise. - user2310852
That's exactly what I mean. I like the layout select for very specific conditions in content elements. - The F

2 Answers

1
votes

I don't think it's dead simple to set the {data.layout} layout recursively without manipulating the database. I have three 'solutions' coming to mind to solve your problem:

1) Create four Backend Layouts that you can select for your current and childpages. (Basically rinse and repeat what you have done for your first backend layout)

2) Using your layout modes you could try setting a body class using typoscript like so (i did not test this):

page.bodyTag >
page.bodyTagCObject = TEXT
page.bodyTagCObject.field = data.layout
page.bodyTagCObject.wrap = <body class="color-|">

3) Use a similar typoscript but update the value using typoscript conditions such as [pidInRootline]

page.bodyTag >
page.bodyTagCObject = TEXT
page.bodyTagCObject.wrap = <body class="blue">

[PIDinRootline = 1]
page.bodyTagCObject.wrap = <body class="orange">
[global]

[PIDinRootline = 2]
page.bodyTagCObject.wrap = <body class="green">
[global]
# and so on
1
votes

I had your same problem and this typoscript worked fine for me, the result is what you wanted to reach.

as you can see the 20.10 object is used when frontend layout is set on the page, while the 20.20 object is used when frontend layout is not set and takes it in slide mode:

page {
    bodyTagCObject >
    bodyTagCObject = COA
    bodyTagCObject {
        stdWrap.noTrimWrap = |<body |>|
        20 = COA
        20 {
            wrap = class="|"
            10 = TEXT
            10 {
              if.isTrue.data = page:layout
              data = page:layout
              noTrimWrap = |page-layout-| |
            }
            20 = TEXT
            20 {
             if.isFalse.data = page:layout
             data = levelfield:-2, layout, slide
             noTrimWrap = |page-layout-|
            }
        }
    }
}

I hope I have been helpfull.