More columns in Typo3 7.2 (Bootstrap)

Question

I need to make a 4 column website with Bootstrap but in typo3 the default setting is to have 2 cols max. To be able to edit each column in backend I have created a layout following this tutorial: http://blog.sebastiaandejonge.com/articles/2012/july/26/implementing-typo3s-backend-layouts/

I cannot display content of the columns on frontend though.

In the template section for a page that uses this layout I have added

agptop1 < styles.content.get
agptop1.select.where = colPos = 20
agptop2 < styles.content.get
agptop2.select.where = colPos = 21

etc which are the positions set in the layout manager. Now I should specify the variable like agptop1 so I created a template file among the other bootstrap templates in typo3conf\ext\bootstrap_package\Resources\Private\Templates\Page

It is a copy of the default template with some things changed like...

    <f:layout name="Default"/>
    <f:section name="Main">

    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '3'}"/>
    <div class="container">
     <div class="row">

    <div class="col-sm-3">
     <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '20'}"/>
     <f:format.raw>{agptop1}</f:format.raw>
    </div>

...like the line

  <f:format.raw> 

and the colPos. I suppose this is correct? I have found this somewhere here on SO.

But when I use this as a template directly in template editor of the page I need it for I only get blank page. I cannot find out how are the default bootstrap templates linked to the Default.html and to manu configuration and how is this all linked to Backend Layout. I need to pick a backend layout, fill in the content, then something1 must tell something2 that I want to load standart page, standart menu but a specific template with the variables defined. How can this be done?

I'm sorry if it's too basic but it's my first day in typo3 and there is no manual for the new version.

Answer 1

The spaces on colPos = 20 are a problem in Typoscript. Using this should help:

agptop1.select.where = colPos=20

Answer 2

From your answer I assume, that your are using the plugin bootstrap_package. This plugin comes with some new predefined templates and you want to add one more, right?

Step 1 adding a new backendlayout

To add another option to your backend page-options, have a look into BackendLayouts Each file contains the description of one backend layout and each file is built the same way:
1. Defining a title (no need of using a language file here)
2. Defining the alignment (rows cols) of the content-container in the backend
3. Defining a icon

Just copy one of these files and modify it. These files have to be included in the page-layout and bootstrap_package does it automatically when it is installed. You can turn of this behaviour in the extension setting and include all backend layouts by your own. Therefor copy the file BackendLayouts.txt from bootstrap_package to your fileadmin, add your custom new layout and include the file in you pagets-config like so:

<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/template/typoscript/BackendLayouts.txt">

Note 1: For single files use 'FILE:' for Directories use 'DIR:'
Note 2: For pagets-config go to your root-page, edit it, got to resources and scroll down. Here it is. Enter code here.

If you have done it right you could now select your new layout from backend.

Step 2 Creating your own template

Copy one of the bootstrap_package template files and modify it, by only adding new cObject elements and what you need for your alignment.

<f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '2'}"/>

In addition copy the hole dir /typo3conf/ext/bootstrap_package/Resources/Private to the fileadmin and put your own template in the subdir 'Templates'

Step 3 Bring it together

As the last step you have to modify the typoscript-setup. I recommend to copy the bootstrap setup-files and include it manually rather then import it by static template. So remove your static template "Boostrap Package (bootstrap_package)" copy the setup.txt and constant.txt from

/typo3conf/ext/bootstrap_package/Configuration/TypoScript/

to your fileadmin dir and include it like so:

Constants:

<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/template/typoscript/constants.txt">

Setup:

<INCLUDE_TYPOSCRIPT: source="FILE:fileadmin/template/typoscript/setup.txt">

After all you have to open your custom constant.txt file and add your own paths:

page {
...
    fluidtemplate {
        # cat=bootstrap package: advanced/100/100; type=string; label=Layout Root Path: Path to layouts
        layoutRootPath = fileadmin/template/Private/Layouts/Page/
        # cat=bootstrap package: advanced/100/110; type=string; label=Partial Root Path: Path to partials
        partialRootPath = fileadmin/template/Private/Partials/Page/
        # cat=bootstrap package: advanced/100/120; type=string; label=Template Root Path: Path to templates
        templateRootPath = fileadmin/template/Private/Templates/Page/
    }
...
}

And for the last step add your new template in the config.txt into the fluidtemplate-part 'page.10.templateName ...' doing some pattern-matching =)

10 = FLUIDTEMPLATE
10 {
    templateName = TEXT
    templateName.stdWrap.cObject = CASE
    templateName.stdWrap.cObject {
        key.data = levelfield:-1, backend_layout_next_level, slide
        key.override.field = backend_layout

        pagets__default_clean = TEXT
        pagets__default_clean.value = DefaultClean

        pagets__default_2_columns = TEXT
        pagets__default_2_columns.value = Default2Columns
        ...

I hope, that i have described everything important. If you have trouble, have deep look into bootrack_package's source code. You can learn everything by miming what they have done.

Good luck