typoscript - How to integrate a html template to typo3

Question

I'am new to typo3 and I want to integrate my HTML template in it. but I can't add my content to the pages threw the dashboard all I get is a blank page.

I'am using TYPO3 v8

Greetings!

Answer 1

The steps you need to do for template integration in TYPO3 8

TYPOSCRIPT

Tell TYPO3 by where the templates should be get.

page = PAGE
page.10 {
    templateRootPaths {
       10 = PATH TO YOUR TEMPLATES
    }
    layoutRootPaths {
       10 = PATH TO YOUR LAYOUTS
    }
    partialRootPaths {
       10 = PATH TO YOUR PARTIALS
    }
    templateName = TEXT
    templateName.stdWrap {
        cObject = TEXT
        cObject {
            data = levelfield:-2,backend_layout_next_level,slide
            override.field = backend_layout
            split {
                token = pagets__
                1.current = 1
                1.wrap = |
            }
        }
        ifEmpty = Home
     }
}

LAYOUTS

It's not required to create a layout, but i suggest to do it, also if you have just one type of template.

The layouts ( in TYPO3 called Backend Layouts ) can be created in TYPO3 backend and the backend layouts are saved in database. But you can save the backend layouts configuration in a file.

Hint: Try save the backend layouts configuration in files so you can add to git

Example of backend layout configuration:

mod.web_layout.BackendLayouts {
    Home # identified by this name { 
        title = Home # this is shown in backend when you select the layout
        icon = EXT:example_extension/Resources/Public/Images/BackendLayouts/default.gif
        config {
            backend_layout {
                colCount = 1
                rowCount = 1
                rows {
                    1 {
                        columns {
                            1 {
                                name = Content
                                colPos = 1 # this is important, i'm talking about colPos below
                            }
                        }
                    }
                }
            }
        }
    }
}

ColPos meaning: you can have multiple columns in a layout, and the colPos is used to render the content in frontend. This is what will be used later in template <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: 1}" />

The above configuration should be included in PageTs. This is found if you edit a page and go to Resources tab.

Typoscript configuration of lib.dynamicContent

lib.dynamicContent = COA
lib.dynamicContent {
    5 = LOAD_REGISTER
    5 {
        colPos.cObject = TEXT
        colPos.cObject {
            field = colPos
            ifEmpty.cObject = TEXT
            ifEmpty.cObject {
                value.current = 1
                ifEmpty = 0
            }
        }
        pageUid.cObject = TEXT
        pageUid.cObject {
            field = pageUid
            ifEmpty.data = TSFE:id
        }
        contentFromPid.cObject = TEXT
        contentFromPid.cObject {
            data = DB:pages:{register:pageUid}:content_from_pid
            data.insertData = 1
        }
        wrap.cObject = TEXT
        wrap.cObject {
            field = wrap
        }
        maxItems.cObject = TEXT
        maxItems.cObject {
            field = maxItems
            ifEmpty =
        }
    }
    20 = CONTENT
    20 {
        table = tt_content
        select {
            includeRecordsWithoutDefaultTranslation = 1
            orderBy = sorting
            where = {#colPos}={register:colPos}
            where.insertData = 1
            pidInList.data = register:pageUid
            pidInList.override.data = register:contentFromPid
            max.data = register:maxItems
            // select.languageField setting is needed if you use this typoscript in TYPO3 < v7
            // languageField = sys_language_uid
        }
        stdWrap {
            dataWrap = {register:wrap}
            required = 1
        }
    }
    90 = RESTORE_REGISTER
}
lib.dynamicContentSlide < lib.dynamicContent
lib.dynamicContentSlide.20.slide = -1

lib.dynamicContentFirst < lib.dynamicContent
lib.dynamicContentFirst.20.select.max = 1

Home layout html integration

<f:render section="main" />

Home template integration

<f:layout name="Home" />
<f:section name="content">
  // content
  <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{colPos: 1}" />
</f:section>

Now we have the setup of layouts and templates. Hope that you have a basic setup of TYPO3 ( a root page at least and a template setup )

If you don't have this setup already, follow the next steps:

1. Create a root page
2. Go with list on root page
3. Create a Template record - go in Options tab and check Clear -> Constants and Clear -> setup and check also Rootlevel
4. Go in Includes tab and select from the multiple selectbox fluid_styled_content
5. Paste the TYPOSCRIPT configuration in the created template ( check General Tab )

Edit Root page and go to the Appearance tab to select the Backend Layout.