TYPO3 Fluid: What is the best way to set up footer and header?

Question

I'm working with the TYPO3 6.1 and Fluid templates, using the fedext.net set of tools. I want to have a header with auto-generated content, like menu, and also some admin-defined content, like copyrights. It make sense to define this in some common place of TYPO3 backend.

Currently I have a page layout like this:

{namespace v=Tx_Vhs_ViewHelpers}
<f:layout name="Page"/>
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
     xmlns:f="http://fedext.net/ns/fluid/ViewHelpers">

    <div class="grid-container">
        <f:cObject typoscriptObjectPath="lib.my_custom_header" />

        <f:render section="Content"/>

        <f:cObject typoscriptObjectPath="lib.my_custom_footer" />
    </div>
</div>

And in Typoscript I'm doing the following to grab and render the header content:

lib.my_custom_header = COA
lib.my_custom_header {
    10 = CONTENT
    10 {
        table = tt_content
        select.where = colPos = 0
        select.languageField = sys_language_uid
        select.orderBy = sorting
        select.pidInList = {$config.my_site.header_page_id}
    }
    20 = CONTENT 
    20 {
        table = tt_content
        select.where = colPos = 1
        select.languageField = sys_language_uid
        select.orderBy = sorting
        select.pidInList = {$config.my_site.header_page_id}
    }
}

here is my FooterPage fluid template

{namespace v=Tx_Vhs_ViewHelpers}
{namespace flux=Tx_Flux_ViewHelpers}
<f:layout name="Page"/>
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
     xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
     xmlns:f="http://fedext.net/ns/fluid/ViewHelpers">

    <f:section name="Configuration">

        <flux:flexform id="mypageheader" label="Page Header">

            <!-- Grid displayed in the page module -->
            <flux:flexform.grid>
                <flux:flexform.grid.row>
                    <flux:flexform.grid.column colPos="0" name="Header Logo" />
                    <flux:flexform.grid.column colPos="1" name="Header Links" />
                </flux:flexform.grid.row>
            </flux:flexform.grid>
        </flux:flexform>
    </f:section>

    <f:section name="Resources"></f:section>

    <f:section name="Content">
        <div class="grid-100 mobile-grid-100 grid-parent header">
            <v:page.content.render column="0"/>
            <v:page.content.render column="1"/>
        </div>
    </f:section>
</div>

Footer code is almost the same (except the variable names). This approach works, header and footer are coming from their pages, but if feels a bit ugly to me. Since I can only render content elements from the footer page and not the whole page. Therefore I can not specify some custom wrapper for my header/footer data.

Alternatively I can define that wrapper inside TypoScript, but this will spread header template code across typoscript code. I can also define it in the page layout file (see above), but in such case it will still be separated from the rest of header template code (which I want to place inside header/footer fluid page template).

So how to do it the best way?

P.S. In this sample project http://bootstrap.typo3cms.demo.typo3.org/ footer is configured to go from some shared backend element, but I can not open that element in TYPO3 backend, TYPO3 shows empty screen when I try to open it. The same happens in my local copy of that project.

Answer 1

Despite the fact that I found solution by myself, I'm still open for better one. Feel free to add new answers to this thread, voting will show the better approach. My current solution is below:

I defined the partial to render the whole header layout like this:

<f:section name="Header">
    <div id="header" class="some">
        <div class="custom">
            <div class="wrappers">
                <f:cObject typoscriptObjectPath="lib.my_header_links" />
            </div>
        </div>
        <div class="more">
            <div class="wrappers">
                <f:cObject typoscriptObjectPath="lib.my_main_menu" />
            </div>
            <div class="one-more">
                <f:cObject typoscriptObjectPath="lib.my_header_logo" />
            </div>
        </div>
    </div>
</f:section>

Then I created special template for hidden back-end page:

<f:section name="Configuration">
    <flux:flexform id="myPageHeader" label="My Page Header">

        <!-- Grid displayed in the page module -->
        <flux:flexform.grid>
            <flux:flexform.grid.row>
                <flux:flexform.grid.column colPos="0" name="Header Links" />
                <flux:flexform.grid.column colPos="1" name="Header Logo" />
            </flux:flexform.grid.row>
        </flux:flexform.grid>
    </flux:flexform>
</f:section>

<f:section name="Content">
    <f:render partial="Header" section="Header" />
</f:section>

And created a hidden page in the back-end. Which has the template above assigned to it in the appearance settings.

Then in my TypoScript:

lib.my_header_links = CONTENT
lib.my_header_links {
    table = tt_content
    select.where = colPos = 0
    select.languageField = sys_language_uid
    select.orderBy = sorting
    select.pidInList = #here goes my hidden page id, which feeds the content for header
}
lib.my_header_logo < lib.my_header_links
lib.my_header_logo {
    select.where = colPos = 1
}
lib.my_main_menu = HMENU
lib.my_main_menu {
    # here goes main menu config
}

And finally I adjusted the page template to render the Header partial. This template is supposed to be assigned to every normal page, which renders site content:

<f:section name="Content">
    <f:render partial="Header" section="Header" />

    <div id="content">
        <v:page.content.render column="0" />
    </div>
</f:section>

Now my backend users can customize header content on the header page in the backend and this content is being populated across all pages which uses my page template. The solution is a bit complex, but provides advanced flexibility for back-end users.