Backend layout configurations for Fluid & TWIG

Example 1

Standard config for backend layouts with associated Fluid templates.

Setup

# Define the backend layouts
mod.web_layout.BackendLayouts {
    layout1 {
        title = Layout 1
        icon = EXT:my_extension/Resources/Public/Icons/layout1.svg
        config.backend_layout {
            colCount = 1
            rowCount = 1
            rows {
                1 {
                    columns {
                        1 {
                            name = Content
                            colPos = 0
                        }
                    }
                }
            }
            name = layout1
        }
        # Fluid template for Layout 1
        templateName = FILE:EXT:my_extension/Resources/Private/Templates/Layouts/Layout1.html
    }
    layout2 {
        title = Layout 2
        icon = EXT:my_extension/Resources/Public/Icons/layout2.svg
        config.backend_layout {
            colCount = 2
            rowCount = 1
            rows {
                1 {
                    columns {
                        1 {
                            name = Main content
                            colPos = 0
                        }
                        2 {
                            name = Sidebar
                            colPos = 1
                        }
                    }
                }
            }
            name = layout2
        }
        # Fluid template for Layout 2
        templateName = FILE:EXT:my_extension/Resources/Private/Templates/Layouts/Layout2.html
    }
    layout3 {
        title = Layout 3
        icon = EXT:my_extension/Resources/Public/Icons/layout3.svg
        config.backend_layout {
            colCount = 1
            rowCount = 2
            rows {
                1 {
                    columns {
                        1 {
                            name = Header
                            colPos = 0
                        }
                    }
                }
                2 {
                    columns {
                        1 {
                            name = Content
                            colPos = 0
                        }
                    }
                }
            }
            name = layout3
        }
        # Fluid template for Layout 3
        templateName = FILE:EXT:my_extension/Resources/Private/Templates/Layouts/Layout3.html
    }
}

Example 2

Switchable layouts using twig template engine and ext_localconf.php.

Setup TypoScript

# Layout 1 - Header, Content, Footer
page = PAGE
page {
    10 = FLUIDTEMPLATE
    10 {
        file = EXT:your_extension/Resources/Private/Layouts/layout1.html
        layoutRootPaths {
            10 = EXT:your_extension/Resources/Private/Layouts/
        }
        partialRootPaths {
            10 = EXT:your_extension/Resources/Private/Partials/
        }
        variables {
            content < styles.content.get
        }
    }
}
# Layout 2 - Header, Content, Footer
pageTwo = PAGE
pageTwo {
    10 < page.10
    10.file = EXT:your_extension/Resources/Private/Layouts/layout2.html
}
# Layout 3 - Header, Content, Footer
pageThree = PAGE
pageThree {
    10 < page.10
    10.file = EXT:your_extension/Resources/Private/Layouts/layout3.html
}

TsConfig

TCEFORM.tt_content.layout.types.standard.addItems {
    10 = Layout 1
    20 = Layout 2
    30 = Layout 3
}

Create Twig template files for the header, content, and footer in the specified paths (e.g., `Resources/Private/Layouts/layout1.html`, `Resources/Private/Partials/header.html`, `Resources/Private/Partials/footer.html`).

ext_localconf.php

$GLOBALS['TYPO3_CONF_VARS']['SYS']['fluid']['namespaces']['twig'] = [
    'EXT:your_extension/Resources/Private/Twig/',
];
$GLOBALS['TYPO3_CONF_VARS']['SYS']['template']['templateRootPaths'][] = 'EXT:your_extension/Resources/Private/Twig/';
$GLOBALS['TYPO3_CONF_VARS']['SYS']['template']['partialRootPaths'][] = 'EXT:your_extension/Resources/Private/Twig/Partials/';
$GLOBALS['TYPO3_CONF_VARS']['SYS']['template']['layoutRootPaths'][] = 'EXT:your_extension/Resources/Private/Twig/Layouts/';

Example 3

Layouts using twig template engine using include parameter

header.html.twig

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Website</title>
</head>
<body>
    <header>
        <h1>Welcome</h1>
    </header>

content.html.twig

<div class="content">
        {{ content|raw }}
    </div>

footer.html.twig

<footer>
    <p>© 2024 My Website</p>
</footer>
</body>
</html>

main.html

{% include 'header.html.twig' %}
{% include 'content.html.twig' with {'content': content} %}
{% include 'footer.html.twig' %}