{namespace flux=Tx_Flux_ViewHelpers}
{namespace v=Tx_Vhs_ViewHelpers}
<f:layout name="Content" />
<div xmlns="http://www.w3.org/1999/xhtml"
     xmlns:flux="http://fedext.net/ns/flux/ViewHelpers"
     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
     xmlns:m="http://typo3.org/ns/TYPO3/CMS/Media/ViewHelpers">

<f:section name="Configuration">
    <flux:flexform wizardTab="Speciality" id="imageTextOverlay" label="Indaver Image with Text Overlay">
        <flux:flexform.field.file name="image" allowed="PNG,JPG,GIF" />
        <flux:flexform.field.input name="text" eval="trim" label="Text overlay:" />
    </flux:flexform>
</f:section>

<f:section name="Preview">
    <flux:widget.grid/>
    <table>
        <tr>
            <td>
                <v:resource.image identifier="{image}" style="max-width: 100%; height: auto;" />
            </td>
        </tr>
        <tr>
            <td>
                {text}
            </td>
        </tr>
    </table>
</f:section>

<f:section name="Main">
    <v:resource.image identifier="{image}" style="width: 100%; height: 300px;" />
    <span class="image-text-overlay">{text}</span>
</f:section>

</div>