How to have Frontend Layout determine columns and backend layout?

Question

Is there a way to have the Frontend layout determine the Backend layout, template file and columns?

At the moment I have the following code that allows you to set the Backend layout and it uses the appropriate template file. But this gets very messy when there are different column positions for each layout.

page.10 = FLUIDTEMPLATE
page.10 {
    #format = html
    file= fileadmin/templates/example/partials/example_home.html    
    partialRootPath = fileadmin/templates/example/partials/
    layoutRootPath = fileadmin/templates/example/layouts/
    variables {

      # Assign the Columns
      main < styles.content.get
      main.select.where = colPos = 0

      news < styles.content.get
      news.select.where = colPos = 1
      }
    }
}


# 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
  default = TEXT
  default.value = fileadmin/templates/example/partials/example_home.html

  # Set a second Template
  23 = TEXT
  23.value = fileadmin/templates/example/partials/example_internal.html


}

Answer 1

Programmatically,

$backendLayout=$GLOBALS['TSFE']->cObj->getData('pageLayout');

If None was selected in the backend [-1], it will output 'none'. If nothing was selected it will output 'default'. Otherwise it will output the correct backend layout prefixed with your extension, taking into account subpage layouts up the page ancestry chain.

Answer 2

Not messy at all, here's a real world example:

page.10 = FLUIDTEMPLATE
page.10 {
  file.stdWrap.cObject = CASE
  file.stdWrap.cObject {
    key.data = pagelayout

    default = TEXT
    default.value = {$customPagesTemplatePath}/Standard.html

    1 = TEXT
    1.value = {$customPagesTemplatePath}/Home.html

    2 = TEXT
    2.value = {$customPagesTemplatePath}/Landing.html

    10 = TEXT
    10.value = {$customPagesTemplatePath}/NewsDetail.html

    11 = TEXT
    11.value = {$customPagesTemplatePath}/LandingMini.html

    12 = TEXT
    12.value = {$customPagesTemplatePath}/FullWidth.html
  }
  layoutRootPath = {$customPagesLayoutPath}
  partialRootPath = {$customPagesPartialPath}

}

Think about it like this:

• As you say, forget about frontend layout. That's legacy; be layout serves for BE and FE.

• If a page was a city, the colPos would be the street. Or rather, imagine the Backend is a map you're drawing, and the frontend is a LEGO City you build according tho that map :-)) If it's OK, I'll stick with that metaphor.

ColPos is a determined part of a page where a record lives. If you can, take a look at the tt_content table in the database: you'll see that colPos is just a column with a number. So in the city "Page 1", there's a street called "colPos 7", and it contains some records (those would be houses). With the be_layout wizard in TYPO3 you'll create an administrative map of that city: how the editor should see these streets.

In the FLUIDTEMPLATE you call depending on the selected be_layout, you will create the city itself; the rendered frontend.

Here's another real world example for such a fluid template (Home.html):

<f:render partial="Mobilenav" />
<f:render partial="Header"/>

<div class="row">
<f:cObject typoscriptObjectPath="lib.home-teaser" />
</div>

<aside>
  <div class="row">
    <div class="columns">
      <div class="row">
        <div class="fp-teaser-outer small-48 medium-24 large-12 columns">
          <div class="fp-teaser-box-wrapper">
            <f:cObject typoscriptObjectPath="lib.home-something" />
          </div>
        </div>
        <div class="fp-teaser-outer small-48 medium-24 large-12 columns">
          <div class="fp-teaser-box-wrapper">
            <f:cObject typoscriptObjectPath="lib.home-somethingelse" />
          </div>
        </div>
        <div class="fp-teaser-outer small-48 medium-24 large-12 columns">
          <div class="fp-teaser-box-wrapper">
            <div class="fp-teaser-box">
              <f:cObject typoscriptObjectPath="lib.home-news-plugin-title" />
              <div class="fp-teaser-hr"></div>
              <div class="fp-teaser-content">
                <f:cObject typoscriptObjectPath="lib.home-news" />
              </div>
            </div>
          </div>
        </div>
        <div class="fp-teaser-outer small-48 medium-24 large-12 columns">
          <div class="fp-teaser-box-wrapper">
            <div class="fp-teaser-box">
              <f:cObject typoscriptObjectPath="lib.home-blog-plugin-title" />
              <div class="fp-teaser-hr"></div>
              <div class="fp-teaser-content">
                <f:cObject typoscriptObjectPath="lib.home-blog" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</aside>

<f:render partial="Footer"/>

... well, but where's the correlation with the colPos? Nowhere yet! I (while being positive that there are other approaches) do this in TypoScript:

lib.home-something < styles.content.get
lib.home-something {
  select.where = colPos = 7
}

So by this we prepare content for the fluid template: get all content of that page's column 7 (using the extension fluid_styled_content) and put it into a "lib" content object.

That's then inserted into the page via the f:cObject viewhelper:

<f:cObject typoscriptObjectPath="lib.home-something" />

Like this, all houses in 7th street are put into the city in exactly this location – and thus rendered in your page.