Using the layout field in normal content elements and in pages

Submitting your vote...
Rating: 4.6 of 5. 14 vote(s).
Click the rating bar to rate this item.

The layout field in defined the pages table and the field header_layout defined in the tt_content table can be used to provide different templates for content elements and pages.

 

The first example shows how to customize the contents of the layout/header_layout field in the backend.

Following typoscript has to be put in the page TSConfig:

 

# Content of the layout select box for pages
TCEFORM.pages {
  layout.altLabels.2 = 3 columns
  layout.altLabels.1 = 2 columns
  layout.altLabels.0 = Normal (1 column)
}

# Content of the layout select box for content elments
TCEFORM.tt_content {
  header_layout.altLabels.2 = Grey background
  header_layout.altLabels.1 = Green background
  header_layout.altLabels.0 = Normal(white)
}

 

Thanks to this snippet you can select 3 different designs for pages and content elments.

 

Now the typoscript setup for the new layouts has to be done:

For pages it works like that:

 

[globalVar=TSFE:page|layout=1] 
page.10.template.file= fileadmin/templates/template_2column.html
[global]

[globalVar=TSFE:page|layout=2] 
page.10.template.file= fileadmin/templates/template_3column.html
[global]

 

In this example the html template is switched depending on the selected layout.

 

Certainly we could also change the css file depending on the layout:

 

[globalVar=TSFE:page|layout=1] 
page.includeCSS.layout= fileadmin/templates/style_2.css
[global]

[globalVar=TSFE:page|layout=2] 
page.includeCSS.layout= fileadmin/templates/style_3.css
[global]

 

 

The layout for the content elements is defined this way:

 

page.10=TEMPLATE
page.10{
  template = FILE
    # include the template (html file with subparts)
  template.file = fileadmin/templates/template.html
    # subpart on wich we work
  workOnSubpart = DOCUMENT
  subparts{
    CONTENT<styles.content.get
    CONTENT.renderObj.stdWrap.innerWrap.cObject=CASE
    CONTENT.renderObj.stdWrap.innerWrap.cObject{
      key.field = header_layout
      default=TEXT
      default.value=<div class="white">|</div>
      1=TEXT
      1.value=<div class="green">|</div>
      2=TEXT
      2.value=<div class="grey">|</div>
    }
  }
}



Comments


Corvinus, 19-06-07 14:44:
Great info, thanks!
But what to do if I'd like more than 4 Layout presets? Must be very simple, and undocumented,as usual...

thanks in advance

Corvinus
Corvinus, 19-06-07 14:45:
What about ENCRYPTING my EMAIL ADDRESS ON THIS SITE?
Helmuth, 20-06-07 10:34:
Hi,
We will put in that feature, when we relaunch the site.
There is no need that you fill, the email field.
For now i changed your email to the same email as in your last post.

peter, 22-01-08 18:36:
Can I use the layout field of the Table tt_content? For example to make a different wrapper for a Text element.
Marcus, 10-01-09 11:40:
Corvinus, it IS documented as usual. You can use in TSconfig, to add or remove positions:

TCEFORM.pages.layout.addItems
TCEFORM.pages.layout.removeItems

As described in TSconfig Quick reference - click on the icon with TS book beside the TSconfig field and go to:
TCEFORM.[tablename].[field].types.[type]

Add comment

* - required field

*



*
*

Top 10 Updates

Nice fonts using Google font API geändert am  20-May-2010 16:36:47
TS-based Searchbox for Indexed Search  geändert am  18-May-2010 18:27:15
TYPO3 SEO geändert am  30-Apr-2010 09:44:22
Search engine friendly graphical headers in TYPO3 geändert am  30-Apr-2010 09:33:44
Creating a simple Infocenter using TYPO3 geändert am  17-Nov-2009 12:12:52
Making the Section Menu work correctly with TemplaVoila geändert am  05-May-2009 12:27:17
Show pages with type "Not in Menu" in a sitemap geändert am  05-May-2009 12:11:17
Implementation of the DHTML menu from brainjar.com  geändert am  01-Feb-2009 14:02:48
Sample DHTML menu geändert am  01-Feb-2009 13:51:25
A introduction to the CONTENT object geändert am  26-Jan-2009 13:20:39

Latest comments

20-Aug-2010 16:31:13
pritam schrieb: Hello, Can any body tell me how to add the realurl in the typo3.
Articles
17-Aug-2010 15:25:30
Graham Solomon schrieb: I have developed a nice extension for using this Google Font API with TYPO3, along with their web...
Nice Fonts using Google font API
12-Aug-2010 17:39:44
Ritesh Jaiswal schrieb: I have added the above code into page template but it is not working. It only index the page into...
Index search
Deutsch
Search: