Developer corner

How to add a layout

A layout can be added via TSConfig:

TCEFORM {
    sys_template {
        tx_w4communitynet_layout {
            addItems {
                your_extension/Configuration/TypoScript/MyLayout = LLL:EXT:your_extension/Resources/Private/Language/locallang_be.xlf:sys_template.tx_w4communitynet_layout.my_template
                your_extension/Configuration/TypoScript/MyLayout.icon = EXT:your_extension/Resources/Public/Images/layout.png
            }
        }
    }
}

The icon for the layout has to have the dimensions 75x55 px.

your_extension/Configuration/TypoScript/MyLayout is the path where the setup, constants and TSConfig files for the layout are located. The folder MyLayout has to have the subfolders:

Constants (files with the extension .typoscript) Setup (files with the extension .typoscript) TSConfig (files with the extension .tsconfig)

For instance, a setup.typoscript file in the folder your_extension/Configuration/TypoScript/MyLayout/Setup could be something like:

page {
    includeCSS {
        100 = your_extension/Resources/Public/MyLayout/Css/vendor.min.css
        105 = your_extension/Resources/Public/MyLayout/JavaScript/lightbox/css/lightbox.min.css
        110 = your_extension/Resources/Public/MyLayout/Css/style.min.css
        font_awesome = your_extension/Resources/Public/MyLayout/assets/plugins/font-awesome/css/font-awesome.css
    }
    includeJSFooter {
        10  = your_extension/Resources/Public/MyLayout/JavaScript/jquery-3.6.0.min.js
        20  = your_extension/Resources/Public/MyLayout/JavaScript/bootstrap/bootstrap.bundle.min.js
        30  = your_extension/Resources/Public/MyLayout/JavaScript/lightbox/js/lightbox.js
        40  = your_extension/Resources/Public/MyLayout/JavaScript/datatables.min.js
        100 = your_extension/Resources/Public/MyLayout/JavaScript/main.js
    }
    10 {
        layoutRootPaths.30 = your_extension/Resources/Private/MyLayout/Layouts/Page
        templateRootPaths.30 = your_extension/Resources/Private/MyLayout/Templates/Page
        partialRootPaths.30 = your_extension/Resources/Private/MyLayout/Partials/Page
    }
}