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?

Solution

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.