Zum Inhalt springen

TYPO3 6.2.3 : Slider mit Fluid(Flux)

Erstellt am 17. Juni 2014 · 3 Antworten · letzte Antwort am 26. Juni 2014

Tags: Fluid, FlexForms, Frage

Unbekannter Benutzer ·

Hallo Zusammen,

ich möchte einen Slider bauen, bei dem man beliebig viele Slides hinzufügen und entfernen kann.

Zunächst ist die frage was ich von folgendem Code brauche?

{namespace v=Tx_Vhs_ViewHelpers}
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
     xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"

     flux:schemaLocation="http://fluidtypo3.org/schemas/flux-7.0.0.xsd"
     v:schemaLocation="http://fluidtypo3.org/schemas/vhs-1.8.5.xsd">

---

Ich arbeite mit folgender Doku: http://fluidtypo3.org/

Ich habe auch eine grundsätzliche Frage, da ich gerade mit dem Thema Fluid anfange.

Wann benutzt man "flux:form", "f:form", "flux:flexform"???

	<flux:form wizardTab="FCE" id="slider" label="Slider" icon="Icons/icon.gif">

		<flux:form.sheet name="slides">	
			<flux:form.section name="slides">
				<flux:form.object name="slide">
					<flux:field.file name="image" allowed="jpg, jpeg, png, gif" maxItems="1" showThumbnails="1" />
				</flux:form.object>
			</flux:form.section>
		</flux:form.sheet>

	</flux:form>

---

Hier erfolgt die Ausgabe:

<flux:field.file name="image" allowed="jpg, jpeg, png, gif" maxItems="1" showThumbnails="1" />

Ergebnis:
Oops, an error occurred!

File /fileadmin%2Fmedia%2Fimg%2Fstart%2Fstartseite_bg_01.jpg/ does not exist.

%2F = Leerzeichen

Hier der Gesamte Code
---

{namespace v=Tx_Vhs_ViewHelpers}
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
     xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"

     flux:schemaLocation="http://fluidtypo3.org/schemas/flux-7.0.0.xsd"
     v:schemaLocation="http://fluidtypo3.org/schemas/vhs-1.8.5.xsd">

<f:layout name="ContentElements/Slider" />

<f:section name="Configuration">
	<flux:form wizardTab="FCE" id="slider" label="Slider" icon="Icons/icon.gif">

		<flux:form.sheet name="slides">	
			<flux:form.section name="slides">
				<flux:form.object name="slide">
					<flux:field.file name="image" allowed="jpg, jpeg, png, gif" maxItems="1" showThumbnails="1" />
				</flux:form.object>
			</flux:form.section>
		</flux:form.sheet>

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

<f:section name="Preview">
<!--<flux:widget.grid />-->
</f:section>


<f:section name="Main">
	<f:if condition="{slides}">
		<div class="hidden">
			<div id="superslides">
				<ul class="superslides-container">
					<f:for each="{slides -> v:var.convert(type:'array')}" as="slide" iteration="iteration">
						<li>
  							<f:image src="../../../{f:uri.image(src: '{image}')}" />
						</li>
					</f:for>
				</ul>
			</div>
		</div>
	</f:if>
</f:section>

</div>

Vielen Dank, Alex

Unbekannter Benutzer ·

Hallo ToBe,

folgender Code habe ich gefunden, dieser funktioniert einwandfrei.

{namespace flux=FluidTYPO3\Flux\ViewHelpers}
{namespace v=Tx_Vhs_ViewHelpers}
<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
     xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
     xmlns:v="http://fedext.net/ns/vhs/ViewHelpers">

<f:layout name="ContentElements/Slider" />

<!-- Backend configuration -->
<f:section name="Configuration">
	<flux:form wizardTab="FCE" id="slider" label="Slider" icon="Icons/icon.gif">
		
		<flux:form.sheet name="slides">	
			<flux:form.section name="slides">
				<flux:form.object name="slide">
					<flux:field.file name="image" allowed="jpg, jpeg, png, gif" maxItems="1" showThumbnails="1" />			
				</flux:form.object>
			</flux:form.section>
		</flux:form.sheet>
		

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

<!-- Display in the page backend module -->
<f:section name="Preview">
	<p>Elements: {hallo -> f:count()}</p>
	<flux:widget.grid />
</f:section>

<!-- Frontend rendering -->
<f:section name="Main">

	<f:if condition="{slides}">
		<div class="flexslider">
			<ul class="slides">
				<f:for each="{slides}" as="slide" iteration="iteration">
					<li>
						<f:image src="{slide.slide.image}" />
					</li>
				</f:for>
			</ul>
		</div>
	</f:if>

</f:section>
</div>

Folgendes Problem:

Wenn ich hier "slides" an den entsprechenden Stellen in "banner" umbenenne funktioniert nichts mehr...

Es muss doch möglich sein... kann mir das jemand erklären?

Vielen Dank

ToBe ·

Du musst in den Flux-Tags und in den Fluid-Tags die Sachen entsprechend umbenennen.
Dabei ist zu beachten, dass du dann im BE die SLides auch neu anlgen musst, weil dann die Felder anders heißen (also neu angelegt werden) und dem entsprechend leer sind.