For anyone who has ever used Typo3 as a CMS, they would be well aware of the limitations associated with the layout of a page (backend layout) in the administration area.

Without hacking or using third party extensions such as TemplaVoila, it was pretty difficult to get anything more than the Left, Normal, Right & Border columns to add content elements to your website. For someone familiar with Typo3, it wasn’t a major problem, but as soon as you put the administration system in front of someone who was about to use it for the first time, it created nothing but confusion.

With the release of Typo3 4.5, Typo3 developers now have the ability to make a more user friendly admin page for content editors through their new core feature Grid View (Backend Layout).

With ease, we can now give the Typo3 user a more user friendly and intuitive admin page just by creating a few simple backend layout views that only helps people make a better association with the websites design.

I found it very hard to find any decent information online about how to implement the Backend Layout feature, so I’ve decided to put together this little tutorial on how you can get started.

Step 1 : Create Backend Layout
The first thing you need to do is create a system folder to store your backend layout templates.

Once you’ve created the new system folder, choose List (on LHS) > the System Folder > Click the “Create Record” button at the top of the RHS page. Then from there, you should choose “Backend Layout”.

On the next screen that loads, enter your Title (used to easily identify the layout) and click the Grid Wizard icon (pencil and notepad) beside the Config field. It is also a good idea to associate a simple graphical icon to help you identify the layout visually.

 

The Grid Wizard allows you to design a layout, in our simple example we use a Top Left, Top Right and Bottom style layout.

 

One thing to note here is that you MUST enter a Name and Column number for each column of the layout grid. If you don’t do this, you will get a “not assigned” error in the admin page.

The Grid View wizard creates the config code required to make it all work!

E.g.

backend_layout {
colCount = 2
rowCount = 2
rows {
1 {
columns {
1 {
name = TopLeft
colPos = 1
}
2 {
name = TopRight
colPos = 2
}
}
}
2 {
columns {
1 {
name = Bottom
colspan = 2
colPos = 3
}
}
}
}
}

Once you are happy with your layout, you can now begin to apply the layout to the backend page.

 

Step 2 : Apply Layout to Backend Page
This step is very simple, all you need to do is access the page properties of the page you would like the Backend Layout applied to. Choose the “Options” tab and at the bottom of this page, you should see the icons (if you’ve applied one to the layout) of the layout options you have available. If not, you can simply choose your layout from the drop down menu.

 

Step 3 : Apply to Front End Template
Nothing hugely changes much from a front end perspective. We all have our own ways of doing this I’m sure. But here’s a simple example of what we would do:

Layout.html File

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”>

<html>
<head>
<title>Untitled</title>
</head>

<body>

<!– ###DOCUMENT_BODY### –>
<div id=”topLeft”>
<!– ###TOPLEFT### –>
TOPLEFT of page
<!– ###TOPLEFT### –>
</div>
<div id=”topRight”>
<!– ###TOPRIGHT### –>
TOPRIGHT of page
<!– ###TOPRIGHT### –>
</div>

<div id=”bottom”>
<!– ###BOTTOM### –>
BOTTOM of page
<!– ###BOTTOM### –>
</div>

<!– ###DOCUMENT_BODY### –>

</body>
</html>

 

TypoScript Set Up
page = PAGE
page.typeNum = 0

page.10 = TEMPLATE
page.10.template = FILE
page.10.template.file = fileadmin/layout.html

page.10 {
workOnSubpart = DOCUMENT_BODY
subparts.TOPLEFT< styles.content.get
subparts.TOPLEFT.select.where = colPos = 1

subparts.TOPRIGHT< styles.content.get
subparts.TOPRIGHT.select.where = colPos = 2

subparts.BOTTOM < styles.content.get
subparts.BOTTOM.select.where = colPos = 3

}

One final thing to do is make sure that you have included the CSS Styled Content in your statics!

That should be enough to get you started with this great new feature! Enjoy!!

Be Sociable, Share!