Under construction - work in progress

TS condition frontEndLayout for versatile pages

Be users may already choose which type of page they want to display in FE, using "'layout" option when editing pages.

But this option is not sufficient by itself, if it is not surrounded by real possibilities to handle wanted pages.

So, we added a new TS condition, frontEndLayout, which permits to manage display of versatile pages.

What is a versatile page

We call "versatile", just to introduce a nice new word, a FE page which is able to change skin and behaviour according to "layout" option set in BE.

Usually, composition of a FE page needs a dedicated TS template, together with a dedicated HTML template.

In this case, a general TS template is used for composing the various "layouts" available in page editing, and the frontEndLayout condition permits to build pages accordingly to each layout.

With this option, it is possible to design pages which may have radically different looks.

frontEndLayout condition

frontEndLayout is a standard condition, which returns TRUE if parameters satisfy the condition. 

[frontEndLayout = <this_layout>: <default_layout>: <force>: <layouts_list>]
.........
page management for this specific page layout
.........
[global]

Where:

  • <this_layout>: number of layout to be processed
  • <default_layout>: number of default layout
  • <force>: 1 if default layout must be forced, 0 otherwise
  • <layouts_list>: list of permitted layouts

Requested layout for this page, as set in in BE, is automatically detected within frontEndLayout evaluation.

When this condition is evaluated, it returns TRUE if one of this combinations is satisfied:

  • this_layout = requested layout AND force = 0 AND this_layout is inside layouts_list
  • this_layout = default_layout AND requested layout not in layouts_list
  • this_layout = default_layout AND force = 1

Every other combinations return FALSE.

Practical example

First, define your available layouts in Page TSConfig of root page (this is what BE user will be able to select): 

TCEFORM.pages.layout {
 altLabels.0 = Default page
 altLabels.1 = Full width page
 altLabels.2 = Section menu on the left
 altLabels.3 = Special for photos
 addItems.4 = Landing page
 addItems.5 = For internal use
 addItems.6 = Forums page
}

Then, set some CONSTANTS which will be valid for all the site (usually in the top level TS template, CONSTANT section) 

# default layout
versatile.template.default = 2
# 0 => do not force default layout
versatile.template.force = 0
# list of permitted layouts
versatile.template.list = 1,2,3,4,5,6

repeat this CONSTANT configuration any time a site section needs a different configuration.

Finally, work on TS template which manages display of pages (SETUP section): 

[frontEndLayout = 1: {$versatile.template.default}: {$versatile.template.force}: {$versatile.template.list}]
.... specific typoscript for page layout of type 1
[global]
[frontEndLayout = 2: {$versatile.template.default}: {$versatile.template.force}: {$versatile.template.list}]
.... specific typoscript for page layout of type 2
[global]
[frontEndLayout = 3: {$versatile.template.default}: {$versatile.template.force}: {$versatile.template.list}]
.... specific typoscript for page layout of type 3
[global]
[frontEndLayout = 4: {$versatile.template.default}: {$versatile.template.force}: {$versatile.template.list}]
.... specific typoscript for page layout of type 4
[global]
[frontEndLayout = 5: {$versatile.template.default}: {$versatile.template.force}: {$versatile.template.list}]
.... specific typoscript for page layout of type 5
[global]
[frontEndLayout = 6: {$versatile.template.default}: {$versatile.template.force}: {$versatile.template.list}]
.... specific typoscript for page layout of type 6
[global]

Use this template for all site pages, and you're done.

Of course this is an example template, but you may adapt or optimize it easily for your needs.

Note: layout 0 does not exist in this last code, because it is mapped to the default layout.

Addition practical tricks

When a section of site needs different layout options, you may customize BE layout options by adding or deleting some layouts.

For adding layout, see previus example.

For deleting some layouts, you may just add this line to your Page TSConfig: 

TCEFORM.pages.layout {
	removeItems = 1,2,3
}

and update the CONSTANT section: 

versatile.template.default = 4
versatile.template.list = 4,5,6

In case you want to force usage of a specific layout, it would be sufficient to force it in CONSTANT section: 

versatile.template.default = 4
versatile.template.force = 1

Done!