Adding configuration fields to a typo3 page with fluid / flux

I have setup a site to use flux / FLUIDCONTENT for templates and have it working using the tutorial here: http://thomas.deuling.org/2011/06/create-base-html-fluid-templates-for-typo3-4-5/

It's all working well but now I want to be able to choose an image per page and use it to build a big header. With templavoila I could create fields that were available in the page properties but can't seem to get it working with FLUIDCONTENT.

I am using Typo3 6.1 and here is my inside page flex template:

{namespace v=Tx_Vhs_ViewHelpers}
{namespace flux=Tx_Flux_ViewHelpers}
<f:layout name="main" />

<f:section name="content">
                    <f:format.raw>{content_header}</f:format.raw>
    <div id="content">
        <div class="container">
           <div class="row">
                <div class="col-md-3">
                    <f:format.raw>{content_left}</f:format.raw>
                </div>
                <div class="col-md-9">
                    <f:format.raw>{content}</f:format.raw>
                </div>
            </div>
        </div>
    </div>
</f:section>

How can I add form fields to page properties and use them in my templates?

I am afraid, you mix things up a bit.

flux, fluidcontent and (especially important for you) fluidpages play together to extend the default capabilities of creating fluid templates for TYPO3.

• flux Is the base technology for parsing and reconstituting TYPO3 form fields.
• fluidcontent utilizes flux to allow Flexible Content Elements
• fluidpages utilizes flux to allow Page Layouts in pure fluid with custom fields

To summarize: You have read a tutorial concerning basic fluid page templating, but not fluidpages templating. To get you started quickly, there are some examples and documentation resources available:

• The quickstart from the documentation repository
• The speciality provider extension from the bootstrap package (please use with caution-this is an example, not your next project template)
• the extensions fluidcontent_bootstrap and fluidpages_bootstrap

When you are through those resources, you know how to register a provider extension, so that you can select it in the page properties in the backend.

Your template might look something like this (it's actually taken from the aforementioned speciality extension):

 <!-- Note that the namespace declaration depends on which version of flux you are actually using -->
{namespace v=Tx_Vhs_ViewHelpers}
{namespace flux=FluidTYPO3\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://typo3.org/ns/fluid/ViewHelpers">

    <f:section name="Configuration">

        <flux:form id="1column" label="1 column layout">

            <!-- Options visible in page property -->
            <flux:field.input name="settings.carousel.categories" eval="trim" default="4" />
            <flux:field.input name="settings.carousel.width" eval="trim" default="1200"/>
            <flux:field.input name="settings.carousel.height" eval="trim" default="340"/>
            <flux:field.checkbox name="settings.carousel.caption" default="1"/>

            <!-- Grid displayed in the page module -->
            <flux:grid>
                <flux:grid.row>
                    <flux:grid.column colPos="0" label="Main Content"/>
                </flux:grid.row>
            </flux:grid>
        </flux:form>
    </f:section>

    <f:section name="Content">
        <div class="row" role="main">
            <div class="col-md-12" role="section">
                <v:page.content.render column="0"/>
                <f:if condition="{v:var.typoscript(path: 'lib.addthis.display')}">
                    <f:render section="AddThis" partial="AddThis" optional="TRUE" arguments="{_all}"/>
                </f:if>
            </div>
        </div>
    </f:section>

</div>

Most flux templates (regardless wether fluidpages or fluidcontent) are split up into (at least) 3 f:section fluid sections:

• Configuration takes your form fields
• Preview influences how your template is being previewed in the backend
• Usually Content or Main (you can influence the naming, in your Layout files but should stick to the conventions we spread accross the example extensions) renders your FCE/Page template

The field items are usable by accessing them via their name attribute as getter. To illustrate this, you could access {settings.carousel.caption} from inside the page template above.