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
}
}