A website with a teaser image or a slideshow above, including a single,two-or three-column layout – that you can now display in the TYPO3 backend (without TemplaVoilá) easy. Ever since the TYPO3 Verion 4.5. Can now assign each page the property back layout.

Steps to create backend layout …follow screenshots from 1-4

For creating the backend layouts , take list page.

1.

Backend Layout from List page

Backend Layout from List page

2.

Create the Grid View Wizard

Create the Grid View Wizard

3.

Here in this example we creating two layouts, 3 column and 1 column with single row.

Create layout columns and rows

Create layout columns and rows

4.

Select backend layout during page creation

Select backend layout during page creation

So if we creates more than one backend layouts, it will appear in 4th screenshot drop down. From there we can decide the required layout for each page.

Now in typoscript with a case statement we can decide which layout need load…

temp.3col = COA
temp.3col {
10 = COA
10 < styles.content.get
10.select.where = colPos=0
10.slide = -1
10.wrap = <section id="leftContent">|</section>

20 = COA
20 < styles.content.get
20.select.where = colPos=1
20.wrap = <section id="middleContent">|</section>

30 = COA
30 < styles.content.get
30.select.where = colPos=2
30.slide = -1
30.wrap = <section id="rightContent">|</section>

}

temp.1col = COA
temp.1col < temp.3col
temp.1col.10 >  // remove left part
temp.1col.20.wrap = |  // write center part
temp.1col.30 > // remove right part

// creating the page with a case statement
// case statement checking the backend layout selected for each page
// Here 1,2 are IDs of backend layouts. It can select from List->Backend Layout

page {
20 = COA
20 {
10 < temp.header
20 = CASE
20 {
// Find page back to root with TO defined
key.data = levelfield:-1,backend_layout_next_level,slide
key.override.field = backend_layout

default = 1
default < temp.3col
// 1 is the id of backend layout three column
1 < temp.3col
// 2 is the id of backend layout one column
2 < temp.1col

}
wrap = <div id="container">|</div>
}

}

By adding proper element id or class we can manage the styles…

 

 

 Leave a Reply

(required)

(required)


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

   
© 2014 Developers Corner Suffusion theme by Sayontan Sinha