gistfile1.txt

{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=FluidTYPO3\Vhs\ViewHelpers}
<f:layout name="Content" />

<f:section name="Configuration">
	<flux:form wizardTab="Inhaltselemente" id="textWithImage" label="Text mit Bild">
		<flux:field.file name="file" label="Bild"/>
		<flux:field.text name="header" label="Überschrift" rows="2"/>
		<flux:field.text name="description" label="Beschreibung" rows="5" enableRichText="TRUE" />
		<flux:field.input name="target" label="Verknüpfung">
			<flux:wizard.link />
		</flux:field.input>
		<flux:field.select name="imageOrientation" items="{left: 'Links', right: 'Rechts'}" label="Bildausrichtung" size="1" maxItems="1" />
	</flux:form>
</f:section>

<f:section name="Preview">
	<div style="overflow: hidden;">
		<strong style="margin-top: 5px;margin-bottom: 8px;display: block;">{header}</strong>
		<div style="width: 200px; height: 140px; margin-right: 10px; border: 1px solid #ccc; background: #eee; overflow: hidden; position: relative">
			<img src="{v:uri.image(src: file, width: '200c', height: '140c', relative: false)}" alt="{header}" style="width: 100%;position: absolute; top: 0px;left: 0px;" />
		</div>
	</div>
</f:section>

<f:section name="Main">
	<div class="row bottom-spacer content-text-with-image">
		<f:if condition="{imageOrientation} == 'left'">
			<div class="col-sm-6 nopadding">
				<f:image src="{file}" alt="{header}" class="img-responsive" width="585c" height="585c"/>
			</div>
		</f:if>
		<div class="col-sm-6">
			<span class="imgSpan content-text-with-image-artwork">
				<img class="img-responsive" src="{f:uri.resource(path: 'art/img-span-1.jpg', extensionName: 'template')}">
			</span>
			<h2>{header -> f:format.nl2br()}</h2>

			{description -> f:format.html()}

			<f:if condition="{target}">
				<a href="{v:uri.typolink(configuration: '{parameter: elementData.target}')}" type="button" class="trigger btn btn-default inverted" >Mehr</a>
			</f:if>
		</div>
		<f:if condition="{imageOrientation} == 'right'">
			<div class="col-sm-6 nopadding">
				<f:image src="{file}" alt="{header}" class="img-responsive" width="585c" height="585c"/>
			</div>
		</f:if>
	</div>
</f:section>