TYPO3Buddy is on FacebookTYPO3Buddy is on Twitter

TYPO3 Fluid: Create a Fluid layout

Next step is to create a website layout, and make sure that the content part of this layout will use the content template that you've just created, or one of the new content templates you'll create later. That's the power of a layout; you will be able to switch between templates for each page of your website, while maintaining the parent layout. In this example, most pages will have a side menu, but some pages have not, because you need the full width of a page or that page just doesn't have any sub pages. Or you just don't like a side menu.

To add a website layout, first create a file called "main_layout.html" and put it in the fileadmin/templates/layouts folder. Edit this file and put the following in it:

<div id="container">
    <div id="container_header_bg">
        <div id="container_header_top">
            <f:render partial="header_top" arguments="{_all}" />
        </div><!-- container_header_top -->
        <div id="header_mobile">
            <img src="/fileadmin/templates/images/mobile-menu_white.png" id="mobile_menu" alt="menu" title="menu" />
        <div id="container_header_menu">
            <div id="header_menu">
                <f:cObject typoscriptObjectPath="lib.header_menu" />
            </div><!-- header_menu -->
        </div><!-- container_header_menu -->
    </div><!-- container_header_bg -->
    <div id="container_header_image">
        <div id="header_image">

        </div><!-- header_image -->
    </div><!-- container_header_image -->
    <div id="container_breadcrumb">
        <div id="breadcrumb">
            <f:cObject typoscriptObjectPath="lib.breadcrumb" />
        </div><!-- breadcrumb -->
    </div><!-- container_breadcrumb -->
    <div id="container_content">
        <f:render section="content" />
    </div><!-- container_content -->
    <div id="container_footer">
        <f:render partial="footer" arguments="{_all}" />
    </div><!-- container_footer -->
</div><!-- container -->

When you click Filelist and look into the layouts folder, you should see this:

TYPO3 Fluid tutorial: main layout - TYPO3Buddy website tutorial

This layout contains several Fluid elements (which are called Viewhelpers in Fluid-land), the f:cObject viewhelper you already know. The f:render renders the content of a section or a partial. The arguments="{_all}" attribute makes sure that all available variables from the main template are also available in the partial. The TYPO3Buddy partials don't use variables. Furthermore, the content section will contain the content of one of our content templates. Other viewhelpers can be found here: http://wiki.typo3.org/Fluid

Next step: create Fluid partials ->

The TYPO3Buddy website is a tutorial to rebuild the TYPO3Buddy website from scratch. You can choose from a TYPO3 Fluid tutorial and a TYPO3 Templavoila tutorial. You'll build TYPO3 websites like you've done so for years!

Kind reminder! This tutorial has been tested with and updated for TYPO3 v10. Please keep in mind that the tutorial has once been set up for TYPO3 v6. It follows some deprecated conventions. If so, this will be mentioned in the tutorial.