Slideshow mittels Fluid

Hallo liebe Community,

ich bin relativer Typo3-Neuling und habe es gerade so geschafft eine eigene Extension für mein Template und alles zu erstellen.
Jetzt möchte ich Fluidcontent/Flux/Extbase - oder wie man das nennt - nutzen um eine Slideshow zu erstellen. Leider habe ich so meine Schwierigkeiten mit dem Ganzen und weiß nicht welche Einstellungen noch fehlen, damit im Backend ein neuer Reiter erscheint.

Folgendes habe ich gemacht:
• Flux, VHS, Fluidcontent installiert
• in meiner Extension im Private/Template-Ordner eine Slideshow angelegt

So wirklich passiert aber nichts, muss ich da irgendwas über Typoscript einstellen damit im Backend ein Reiter erscheint und mir die Slideshow im Frontend angezeigt wird?

Meine Template-Code (derzeit ein Teaser-Beispiel aus dem Internet, habe auch einen anderen Code der etwas älter ist):

<div xmlns="http://www.w3.org/1999/xhtml" lang="de"
      xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
      xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">

<f:layout name="Content" />
<f:section name="Configuration">
	
    <flux:form id="teaser">
        <flux:field.file name="image" allowed="jpg" uploadFolder="uploads" minItems="1" maxItems="1" size="1" />
        <flux:field.input name="headline" />
        <flux:field.text name="teasertext" rows="5" cols="30" required="TRUE" />
        <flux:field.input name="link">
            <flux:wizard.link activeTab="page"/>
        </flux:field.input>
    </flux:form>
    
</f:section>

<f:section name="Preview">

	<table width="100%">
        <tr>
            <td width="50%"><v:media.image src="uploads/{image}" alt="{headline}" width="100" /></td>
            <td width="50%">
                <f:format.crop maxCharacters="50">{teasertext}</f:format.crop>
                <f:if condition="{link}">
                    <strong>Link:</strong> {link}
                </f:if>
            </td>
        </tr>
    </table>
    
</f:section>
    

<f:section name="Main">

	<div class="quickstart-teaser">
        <article>
        <h1>{headline}</h1>
        <div class="image-wrapper">
            <v:media.image src="uploads/{image}" alt="{headline}" width="200" />
        </div>
        <div class="text-wrapper">
            <f:format.nl2br>{teasertext}</f:format.nl2br>
            <f:if condition="{link}">
                <f:link.page pageUid="{link}" title="{headline}" class="readmore">read more</f:link.page>
            </f:if>
        </div>
        </article>
    </div>
    
</f:section>

</div>

Meine Hoffnung war, wenn ich ein Ergebnis sehe kann ich es selbst anpassen und eine Slideshow aus dem Beispiel machen 😃

Ich hoffe meine Frage ist nicht zu wage oder nervig, nur ich habe keine Ahnung was ich eigentlich tue und finde keine Lösung.

Vielen, vielen Dank für eure Hilfe 🙂

Ich glaube in deinem <flux:form>-Tag fehlen ein paar Attribute:

<flux:form wizardTab="Tabname"
id="deineId"
label="dein Label"
description="Deine description"
icon="dein/pfad/zum/icon.jpg">

Poste auch mal den genauen Pfad zu deinem Template. Das muss zwingend im richtigen Ordner liegen, damit es auch automatisch als Seitentemplate erkannt und geladen wird.

Hallo,

danke für die Antwort ich habe jetzt die Flux:Flexform angepasst, das sieht jetzt so aus:

<f:section name="Configuration">
	
    <flux:form id="teaser">
    	<flux:form wizardTab="FCE" id="slider" label="Slider" icon="typo3conf/ext/meine_extension/Resources/Public/images/list-img.gif">
        <flux:field.file name="image" allowed="jpg" uploadFolder="uploads/meine_extension" minItems="1" maxItems="1" size="1" />
        <flux:field.input name="headline" />
        <flux:field.text name="teasertext" rows="5" cols="30" required="TRUE" />
        <flux:field.input name="link">
            <flux:wizard.link activeTab="page"/>
        </flux:field.input>
    </flux:form>
    
</f:section>

Die Datei liegt hier:
typo3conf ▸ ext ▸ meine_extension ▸ Resources ▸ Private ▸ Template/slideshow.html

In dem Ordner habe ich neben dem Template-Ordner noch:
▸ Layouts
▸ Partials

Sorry falls ich mich sehr doof anstelle, mit Fluidcontent bin ich ein bissi überfordert aber ich möchte das die Slideshow im Backend eingestellt wird und nicht hardcoden 🙂

Hast du den template Pfad von fluidcontent angepasst auf deinen Ordner? Wenn nicht, müsstest du das tun oder die templates entsprechend in dem Fluidcontent Ordner ablegen.

Außerdem hast du jetzt in deinem Template zwei <flux:form> Tags und schließt davon nur eins.
Du brauchst aber nur eins, lösch das erste in Zeile 3 und übertrage das ID-Attribut in das zweite Tag.

Dann wie gesagt musst du nur noch den Template Path korrigieren und dann dürfte das ganze auch funktionieren (und gelegentlich mal den Cache leeren 😉)

Außerdem schadet es nicht, die namespaces für die ViewHelper zu importieren, damit das auch alles vernünftig läuft 😉

Ah, Dankeschön diese <flux:from>-Tags verwirren mich noch ziemlich. Im Praktikum musste ich nur bestehende Dateien anpassen, ist was anderes wenn man das selbst erstellen soll #deadbeat#

Eine dumme Frage habe ich noch:
Wo muss ich die neuen Pfade angeben und wie sieht der Code dafür aus?
So in etwa:

plugin.fce.meine_extensionn {
	label = Fluid Content Elements
	templateRootPath = EXT:meine_extension/Resources/Private/Template/
	partialRootPath = EXT:flux/Resources/Private/Partials/
	layoutRootPath = EXT:fluidcontent/Resources/Private/Layouts/
}

oder eher so:

FluidTemplate = FLUIDTEMPLATE
FluidTemplate {
	templateRootPath = EXT:meine_extension/Resources/Private/Template/
	layoutRootPath = EXT:fluidcontent/Resources/Private/Layouts/
	partialRootPath = EXT:flux/Resources/Private/Partials/
}

Danke, Danke, Danke hoffe ich nerve nicht zu sehr ;-(

Bei mir sieht das so aus:

plugin.tx_fed.fce.dm_tmpl {
	label = Custom Elements
	templateRootPath = EXT:m_ext/Resources/Private/Templates/
	partialRootPath = EXT:my_ext/Resources/Private/Partials/
	layoutRootPath = EXT:my_ext/Resources/Private/Layouts/
}

Kann sein, dass du dafür noch deine eigene Extension als Provider Extension für fluidcontetn registrieren musst. Das machst du in der ext_tables.php deiner extension:

Tx_Flux_Core::registerProviderExtensionKey('my_ext', 'Page');
Tx_Flux_Core::registerProviderExtensionKey('my_ext', 'Content');

Und ich glaube, du musst in deinem Template Ordner noch einen Ordner "Content" anlegen, in dem dann deine Content-Templates liegen. Wenn du die Pfade anpasst, vergiss nicht ein Default Layout im Layout ordner anzulegen (analog zur Struktur in fluidcontent)

Ok jetzt ist es offiziell ich bin zu doof dafür o.O

Also zuerst installiert man VHS, Flux und Fluidcontent. Dann passt man die Pfade an:

label = Custom Elements
templateRootPath = EXT:meine_extension/Resources/Private/Template/
partialRootPath = EXT:meine_extension/Resources/Private/Partials/
layoutRootPath = EXT:meine_extension/Resources/Private/Layouts/

Erweitert die ext_tables.php:

Tx_Flux_Core::registerProviderExtensionKey('meine_extension', 'Page');
Tx_Flux_Core::registerProviderExtensionKey('meine_extension', 'Content');

Danach erstellt man die gewollte Datei:

    {namespace flux=FluidTYPO3\Flux\ViewHelpers}
    {namespace v=Tx_Vhs_ViewHelpers}

<div xmlns="http://www.w3.org/1999/xhtml" lang="de"
      xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
      xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">

<f:layout name="Content" />
<f:section name="Configuration">
	
   	<flux:form wizardTab="FCE" id="teaser" label="Slider" icon="typo3conf/ext/meine_extension/Resources/Public/images/list-img.gif">
        <flux:field.file name="image" allowed="jpg" uploadFolder="uploads/meine_extension" minItems="1" maxItems="1" size="1" />
        <flux:field.input name="headline" />
        <flux:field.text name="teasertext" rows="5" cols="30" required="TRUE" />
        <flux:field.input name="link">
            <flux:wizard.link activeTab="page"/>
        </flux:field.input>
    </flux:form>
    
</f:section>

<f:section name="Preview">

	<table width="100%">
        <tr>
            <td width="50%"><v:media.image src="uploads/meine_extension/{image}" alt="{headline}" width="100" /></td>
            <td width="50%">
                <f:format.crop maxCharacters="50">{teasertext}</f:format.crop>
                <f:if condition="{link}">
                    <strong>Link:</strong> {link}
                </f:if>
            </td>
        </tr>
    </table>
    
</f:section>
    

<f:section name="Main">

	<div class="quickstart-teaser">
        <article>
        <h1>{headline}</h1>
        <div class="image-wrapper">
            <v:media.image src="uploads/meine_extension/{image}" alt="{headline}" width="200" />
        </div>
        <div class="text-wrapper">
            <f:format.nl2br>{teasertext}</f:format.nl2br>
            <f:if condition="{link}">
                <f:link.page pageUid="{link}" title="{headline}" class="readmore">read more</f:link.page>
            </f:if>
        </div>
        </article>
    </div>
    
</f:section>

</div>

Natürlich löscht man 5x den Cache und dann sollte im Backend ein neuer Reiter auftauchen, wenn man ein neues Contentelement einfügt.
Habe ich irgendwas vergessen? Bei mir taucht der Reiter einfach nicht auf 😢
Kann doch nicht so schwer sein, sorry

Du kannst auch nochmal probieren, deine Extension im ExtensionManager aus- und wieder einzuschalten. Hilft auch manchmal 😉

Ansonsten weiß ich gerade auch nicht... in welcher Datei hast du die TypoScript Settings (1. Codeblock in deinem Post) vorgenommen? ( Da ist bei mir übrigens ein Fehler drin.. das muss heißen: plugin.tx_fed.fce.meine_extension statt "dm_tmpl" ).

Ansonsten wäre noch gut zu wissen, ob du innerhalb deines Template Ordners nun auch einen Ordner "Content" hast, in dem das Template deiner Slideshow liegen sollte?