FLUID: FCE for teaser with image, title, text and link button

FCE for teaser with image, title, text and link button

{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=Tx_Vhs_ViewHelpers}
<f:layout name="Content" />
<div xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

<f:section name="Configuration">
	<flux:form wizardTab="FCE" id="teasersmall" icon="{v:extension.path.resources(path: 'Thumbnails/module_teasersmall.png')}">

		<flux:form.sheet name="text">
			<flux:field.input name="title" required="1"/>
			<flux:field.input name="text" maxCharacters="110"/>
			<flux:field.input name="link">
				<flux:wizard.link activeTab="Page" />
			</flux:field.input>
			<flux:field.input name="linktext" maxCharacters="32" required="1"/>
		</flux:form.sheet>
		<flux:form.sheet name="image">
			<flux:field.inline.fal name="image" required="1" allowedExtensions="jpg,jpeg,png" collapseAll="true" maxItems="1" minItems="1" multiple="false" showAllLocalizationLink="true" showPossibleLocalizationRecords="true" showRemovedLocalizationRecords="true" showThumbs="true"/>
		</flux:form.sheet>

	</flux:form>
</f:section>

<f:section name="Preview">
	<p>{title}</p>
	<v:var.set name="falImage" value="{v:content.resources.fal(field: 'image') -> v:iterator.first()}"/>
    <v:resource.image
        identifier="{falImage.id}"
        width="120c"
        height="100"
		alt="{falImage.alternative}"
		title="{falImage.title}"
		/>
</f:section>

<f:section name="Main">

	<div class="module teaser small" id="c{tt_content_uid}">
		<v:var.set name="falImage" value="{v:content.resources.fal(field: 'image') -> v:iterator.first()}"/>
	    <v:resource.image
	        identifier="{falImage.id}"
	        width="328c"
	        height="273"
			alt="{falImage.alternative}"
			title="{falImage.title}"
			/>
		<div class="body">
			<f:if condition="{title}"><h3>{title}</h3></f:if>
			<p class="teaser-text"><f:format.crop maxCharacters="110">{text}</f:format.crop></p>
			<f:if condition="{linktext}">
				<footer>
					<f:link.page pageUid="{link}" class="button more"><f:format.crop maxCharacters="32">{linktext}</f:format.crop></f:link.page>
				</footer>
			</f:if>
		</div>
	</div>

</f:section>

</div>