Referenzen.html

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

<f:section name="Configuration">
<flux:form wizardTab="Inhaltselemente" id="references" label="Referenzen">
	<flux:grid>
		<f:for each="{elements}" as="element" iteration="iteration">
			<f:for each="{element}" key="elementType" as="elementData">
				<f:if condition="{0: elementType} == {0: 'content'}">
					<flux:grid.row>
						<flux:grid.column label="Referenz {elementData.header}">
							<flux:form.content name="{elementData.id}" label="Content: {elementData.id}" />
						</flux:grid.column>
					</flux:grid.row>
				</f:if>
			</f:for>
		</f:for>
	</flux:grid>
	<flux:form.section name="elements">
		<flux:form.object name="reference" label="Referenz {elementData.header}">
			<flux:field.file name="file" />
			<flux:field.input name="header" label="Überschrift"/>
			<flux:field.text name="description" label="Beschreibung" rows="5" enableRichText="TRUE" />
		</flux:form.object>
	</flux:form.section>
</flux:form>
</f:section>

<f:section name="Preview">
<div style="overflow: hidden;">
<f:for each="{elements}" as="element" iteration="iteration">
	<f:for each="{element}" key="elementType" as="elementData">
		<div style="float: left; width: 200px; height: 140px; margin-right: 10px; border: 1px solid #ccc; background: #eee; overflow: hidden; position: relative">
			<b style="margin-bottom: 10px; font-size: 10px; width: 100%;display: block;position: absolute; top: 0px; z-index: 1; padding: 5px 8px; background: white; opacity: 0.9;">{elementData.header}</b>
			<img src="{v:uri.image(src: elementData.file, width: '200c', height: '140c', relative: false)}" alt="{elementData.header}" style="width: 100%;position: absolute; top: 0px;left: 0px;" />
		</div>
	</f:for>
</f:for>
</div>
<p>Elemente: {elements -> f:count()}</p>
</f:section>

<f:section name="Main">
<t:arraySplit items="{elements}" max="4">
	<f:for each="{groups}" as="groupElements">
		<div class="row content-references">
    	<div class="rowspacer hidden-xs">&nbsp;</div>
			<f:for each="{groupElements}" as="element" iteration="iteration">
				<f:for each="{element}" key="elementType" as="elementData">
					<div class="col-xs-12 col-sm-3">
		                <div class="row">
		                    <div class="col-xs-12 ">
		                        <a href="#">
		                        	<f:image src="{elementData.file}" alt="{elementData.header}" class="img-responsive"/>
		                        </a>
		                    </div>
		                </div>
        			<div class="row">
            			<div class="col-xs-12 ">
            				<h2>{elementData.header}</h2>
	                        	{elementData.description -> f:format.raw()}
            			</div>
            		</div>
            	</div>
				</f:for>
			</f:for>
	</div>
	</f:for>
</t:arraySplit>
</f:section>

Slider.html

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

<f:section name="Configuration">
<flux:form wizardTab="Inhaltselemente" id="slider" label="Slider">
<flux:grid>
	<f:for each="{elements}" as="element" iteration="iteration">
		<f:for each="{element}" key="elementType" as="elementData">
			<f:if condition="{0: elementType} == {0: 'content'}">
				<flux:grid.row>
					<flux:grid.column>
						<flux:form.content name="{elementData.id}" label="Content: {elementData.id}" />
					</flux:grid.column>
				</flux:grid.row>
			</f:if>
		</f:for>
	</f:for>
</flux:grid>
<flux:form.section name="elements">
	<flux:form.object name="image" label="Bild">
		<flux:field.file name="file" />
		<flux:field.text name="header" label="Überschrift" rows="2"/>
		<flux:field.text name="description" label="Beschreibung" rows="2"/>
		<flux:field.input name="target" label="Verknüpfung">
			<flux:wizard.link />
		</flux:field.input>
		<flux:field.select name="fontcolor" items="{bluetext: 'Blau', whitetext: 'Weiß'}" label="Textfarbe" size="1" maxItems="1" />
	</flux:form.object>
</flux:form.section>
</flux:form>
</f:section>

<f:section name="Preview">
<div style="overflow: hidden;">
<f:for each="{elements}" as="element" iteration="iteration">
<f:for each="{element}" key="elementType" as="elementData">
	<div style="float: left; width: 200px; height: 140px; margin-right: 10px; border: 1px solid #ccc; background: #eee; overflow: hidden; position: relative">
		<b style="margin-bottom: 10px; font-size: 10px; width: 100%;display: block;position: absolute; top: 0px; z-index: 1; padding: 5px 8px; background: white; opacity: 0.9;">{elementData.header}</b>
		<img src="{v:uri.image(src: elementData.file, width: '200c', height: '140c', relative: false)}" alt="{elementData.header}" style="width: 100%;position: absolute; top: 0px;left: 0px;" />
	</div>
</f:for>
</f:for>
</div>
<p>Elemente: {elements -> f:count()}</p>
</f:section>

<f:section name="Main">
<!--
----------------------------------------------------------
Flexslider
-->
<div class="flex-wrapper fullwidth">

	<div id="flexslider-big" class="flexslider">
		<ul class="slides">
			<f:for each="{elements}" as="element" iteration="iteration">
				<f:for each="{element}" key="elementType" as="elementData">
					<li class="item">
						<!-- CTA auf gesamtbild des Sliders | Link auf Unterseite im Bereich News-->
						<f:if condition="{elementData.target}">
							<a class="full-sensitive-cta" href="{v:uri.typolink(configuration: '{parameter: elementData.target}')}">&nbsp;</a>
						</f:if>

						<div>
							<div class="text">
								<div class="container">
									<div class="row">
										<div class="col-xs-12">
											<h1 class="{elementData.fontcolor}"><f:format.nl2br>{elementData.header}</f:format.nl2br></h1>
											<h4 class="{elementData.fontcolor}" class="hidden-xs"><f:format.nl2br>{elementData.description}</f:format.nl2br></h4>
										</div>
									</div>
									<div class="row">
										<div class="col-xs-10 col-sm-3 col-sm-offset-9">
											<f:if condition="{elementData.target}">
												<a href="{v:uri.typolink(configuration: '{parameter: elementData.target}')}" type="button" class="{elementData.fontcolor} trigger btn btn-default" >Weiter</a>
											</f:if>
										</div>
									</div>
								</div>
							</div>

							<f:image src="{elementData.file}" alt="{elementData.header}" class="auto-height" />
						</div>
					</li>
				</f:for>
			</f:for>
		</ul>
	</div>


</div>
<!--
	----------------------------------------------------------
	ENDE - Flexslider
-->
</f:section>

TextWithImage.html

{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-right">
				<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-left">
				<f:image src="{file}" alt="{header}" class="img-responsive" width="585c" height="585c"/>
			</div>
		</f:if>
	</div>
</f:section>