The Stage: Fall back to content of parent page (sliding)

Page Layout with slide mode

The page layout contains a definition for the stage area in lines 10-19:

packages/my_site_package/Configuration/Sets/SitePackage/PageTsConfig/BackendLayouts/default.tsconfig
mod.web_layout.BackendLayouts {
  Default {
    title = Standard
    icon = EXT:my_site_package/Resources/Public/Icons/BackendLayouts/default.svg
    config {
      backend_layout {
        colCount = 1
        rowCount = 3
        rows {
          1 {
            columns {
              1 {
                name = Stage
                colPos = 1
                identifier = stage
                slideMode = slide
              }
            }
          }

          2 {
            columns {
              1 {
                name = Main Content
                colPos = 0
                identifier = main
              }
            }
          }
        }
      }
    }
  }
}
Copied!

The definition is similar to the one we have seen for the main content area in section Create a default page layout with page TSconfig.

There are some key differences:

  • The stage has the colPos 1, therefore all content elements in the stage area will automatically have a 1 instead of a 0 in field "Column" / database column colPos.
  • The identifier is stage therefore the content of the content area is available as variable {content.stage.records} in the partial template.
  • The slideMode is set to slide therefore if no content is found in the content area on the current page, TYPO3 will look one page up etc until content is found or the page root is reached.

Using a content area with slide mode

The content elements will be automatically found and provided to your template. Therefore the template for the area "Stage" looks no different from the one for the main area except that is uses the corresponding variable of course:

packages/my_site_package/Resources/Private/PageView/Partials/Stage.html
<f:for each="{content.stage.records}" as="record">
    <div class="container">
        <f:cObject
            typoscriptObjectPath="{record.mainType}"
            data="{record}"
            table="{record.mainType}"
        />
    </div>
</f:for>
Copied!