Flexible-Content-Elements (FCE) sind eine feine Sache. Innerhalb von TemplaVoilá kann man so einzelne Blöcke definieren. Zum Beispiel kann man dann in seinem normalen Template einfach ein 2-Spalten-Block auswählen, um frei definierbare Inhalte nebeneinader darstellen zu können. Ohne irgendwelche zusätzliche Extensions!
Ich gehe davon aus, dass ihr bereits eine funktionstüchtige Seite mit TemplaVoilá zum laufen gebracht habt. Auf Wunsch kann ich dazu natürlich auch nochmal ein kleines Tutorial schreiben.
FCE-Template erstellen
Was wir als erstes brauchen, ist eine HTML-Datei, die als FCE dient. Dazu erstellen wir jetzt einfach eine HTML-Datei und nennen sie “2-Spalten.html“.
Hier der Inhalt:
<div class="col_wrap">
<div class="col1"></div>
<div class="col2"></div>
<br style="clear:both;" />
</div>
Diese Datei speichern wir und schieben sie dann in den Ordner “fileadmin” -> “templates“.
Dies war schon im groben der erste Teil. Nun müssen wir das FCE in TYPO3 einrichten.
FCE in TYPO3 einrichten
Liste-Ansicht des Template-Ordner
In TYPO3 wechseln wir zunächst in die “Liste“-Ansicht und klicken dann den Sysfolder an, in welchen unser TemplaVoilá-Template installiert ist.
Dort fügen wir dann unter “TemplaVoilá-Datenstruktur” ein neuen Datensatz hinzu, indem wir auf das Icon mit dem Plus klicken.
In dem nun erscheinenden Formular geben wir als Titel “2-Spalter” ein, unter Kategorie wählen wir “Flexibles Inhaltselement” aus und lassen den Rest leer. Wir speichern nun das Formular ab und kehren zur Listen-Ansicht zurück.
Nun fügen wir noch ein “TemplaVoilá-Datenobjekt” hinzu. Dazu geben wir als Titel wieder “2-Spalter” ein, unter Dateireferenz klicken wir auf die Weltkugel, wählen dann im PopUp den Reiter “Datei” aus und Browsen uns durch die Ordner “fileadmin” -> “templates“. Dort wählen wir dann die Datei “2-Spalter.html” aus. Der Pfad sollte dann übernommen werden und im Formular stehen. Als nächstes wählen wir bei Datenstruktur die eben angelegte aus. Der Name müsste “2-Spalter” sein. Den Rest können wir leer lassen und unser Formular abspeichern.
So sollte das Formular dann in etwa bei euch ausschauen
Als nächstes gehen wir auf das Modul “TemplaVoilá” und wählen danach unser Template aus. Danch sollten wir oben den Reiter “Flexible CE” auswählen und ein Eintrag mit namen “2-Spalter” vorfinden. Dort klicken wir auf “remap” und dann auf “Modify DS / TO“.
Dieser Teil sollte einen eigentlich bekannt sein, ich reiße ihn trotzdem nochmal kurz an.
Template Mappen
Zunächst müssen wir den “Root“-Punkt mappen. Dazu klicken wir in dem “Root“-Objekt ganz rechts auf “Map” und wählen dann das erste DIV aus unserem Template aus. Als Mode setzen wir es als “INNER” und klicken dann auf “Set“.
Mapping der ersten Spalte
Nun fehlen noch 2 Elemente. Für jede Spalte ein Element. Deshalb legen wir nun erstmal 2-Elemente an. Das erste Element nennen wir “field_col1” und das zweite Element einfach “field_col2“. Als Titel jeweils “Spalte 1″ und “Spalte 2″. Unter Editing Type wählen wir “Content Elements” aus.
Natürlich müssen wir die 2 Felder dann auch Mappen. Dazu klicken wir jeweils nachdem wir eines angelegt haben auf “Map” und dort wählen wir dann das jeweilige DIV aus. Für Spalte 1 das DIV mit der Class “col1” und für die zweite Spalte das DIV mit der Class “col2“. Den Mode dabei wieder auf “INNER“.
So sollte dann die Übersicht ausschauen
Sollte alles passen, klicken wir nun auf “Save as“, wählen danach unter “Update existing Data Structure / Template Object” das Element “Template/2-Spalter” aus und klicken auf “Update TO (and DS)“.
2-Spalter als Inhalt einfügen
Wir gehen nun normal auf unser “Web“-Modul und wählen eine Seite aus, in welcher wir unseren 2-Spalter platzieren möchten. Wir legen nun ein neues Element an und wählen in der Liste unter “Flexibler Inhalt” unseren “2-Spalter” aus.
Eine Überschrift können wir, müssen wir aber nicht vergeben. Einfach das Element speichern und zurück in die Übersicht des “Web“-Moduls gehen.
So sollte es dann in etwa ausschauen
Ihr solltet nun ein 2-Spalter in eurer Übersicht sehen (siehe Screenshot).
Ihr könnt nun dort gewohnt beliebig Inhalte hinzufügen und verwalten. Egal ob es Extensions sind oder normale Texte.
Das einzige was jetzt noch fehlt ist, dass ihr in eurer CSS-Datei die Klassen “col_wrap“, “col1” und “col2” definieren müsst.
In dieser fügen wir einfach folgendes hinzu:
.col_wrap {
border:1px solid #ddd;
padding:5px;
}
.col1 { float:left; width:48%; padding:5px; }
.col2 { float:left; width:48%; padding:5px; }
Nun sollten unsere Spalten nebeneinander sein. Das ganze könnt ihr natürlich noch weiter verschönern oder es so lassen 
Viel Spaß damit!
FCE einfach in TYPO3 anlegen…
Flexible-Content-Elements (FCE) sind eine feine Sache. Innerhalb von TemplaVoilá kann man so einzelne Blöcke definieren. Zum Beispiel kann man dann in seinem normalen Template einfach ein 2-Spalten-Block auswählen, um frei definierbare Inhalte neben…
Hallo Martin,
ein sehr aufwendiges und gut verständliches Tutorial! Dazu die vielen Screenshots, damit auch der intuitive Designer (der so gar nicht programmieren kann) alles nachvollziehen kann, Danke!
man kann auch redakteuren mit Flexible-Content-Elements einzelne boxen vordefinieren! sehr sinnvoll wenn das design nicht zerstört werden soll
gruss
Danke ConnyLo, freut mich!
@Markus, stimmt! Sollte ich darauf noch eingehen? Ich überleg mir mal evtl. ein Abschnitt noch.
Das CSS ist nich valide! .2col geht nicht – es dürfen keine Zahlen am Anfang stehen.
Gruß, Sven
[...] bestücken. Eines der großen Vorteile von TemplaVoilà. Auch verschachtelte Boxen sind möglich, Flexible-Content-Elements (FCE) genannt. Mit FCE lassen sich verschachelte Blöcke in das Template [...]
@maddesigns, korrigiert – Danke!
Hallo.
Das Tutorial hat mir sehr geholfen und war selbst für mich als Neuling sehr verständlich erklärt. Vielen lieben Dank.
Danke! Freut mich.
Da mir die bisherigen Tutorials sehr gefallen haben werde ich diese Seite im Auge behalten. Die wenigsten Tutorials-Ersteller gehen wirklich auf einen Neuling ein, auch wenn sie es behaupten. Somit freue ich mich schon auf das Community Tut. Ich bin nämlich auch am überlegen ein Forum einzuplanen.
Danke für die nette Anleitung. Die TemplaVoila Doku ist nicht wirklich verständlich geschrieben. Mit deinem Tutorial habe ich Ruck-Zuck das Prinzip begriffen. Hätte ich das schon gestern gefunden, wären mir einige Umwege erspart geblieben…
Jetzt habe ich begriffen worin die wahre Stärke von TV liegt.
Ich hab zu danken Steffen! Freut mich das es dir geholfen hat.
Vielen Dank für das Tutorial – sehr anschaulich. Mehr davon bitte!
Danke dafür!
Ich habe das so gemacht (schon vor dem Tutorial) – allerdings tut Typ “Content Elements” nicht. Ab einem bestimmten Zeitpunkt war das, den ich leider nicht mehr nachvollziehen kann. Vorher ging.
Ich habe nach Einfügen des 2-Spalters dann keine Buttons zum anlegen von beinhaltene Content-Elements.
Kannst Du dazu was sagen / kennt das jemand auch?
Gruß, Sam
erstklassiges Tutorial – aber man sollte die Leser nicht überschätzen. Zumindest krieg ich den letzten Schritt nicht hin. Ich weiss nicht wie ich das FCE dann meiner Seite zuordne. Muss ich in meinem Haupttemplate noch etwas zusätzlich mappen? Ich sehe zwar das Angelegte unter “Seiteninhalt” aber wenn ich die Webseite aufrufe ist nichts zu sehen.
Hallo,
nein .. eigtl. sind alle Schritte beschrieben die nötig sind. Hast du mal den Cache gelöscht? Oder dir mal den Quelltext im FE angeschaut, ob es eventuell doch eingebaut ist und nur eventuell was nicht mit dem CSS passt?
Gruß,
Martin
@Sam, mit welcher Version von TYPO3 und von TV? Alles mal aktualisiert? Auch mal die Datenstruktur komplett neu angelegt?! Bisher konnte ich diesen Fehler noch nicht reproduzieren …
Hallo und danke für die schnelle Antwort. Am Cache-Löschen liegt es nicht, ich tue fast nichts anderes seit ich mit Typo3 arbeite. Im Quelltext war nichts zu finden. Ich bin nochmal alles durchgegangen, ich hatte beim Mappen die beiden Cols nicht auf Content Elements gestellt. Ich hatte das vorher mit dem “Root” gemacht, dann war alles ausgegraut.
sorry. es geht immer noch nicht.
Ich wähle im Webmodus eine angelegte Seite aus, gehe im Kontext auf “Neu”.
Dann wähle ich Seiteninhalt (Im Tutorial steht neues Element?) und Typ: flexibler Inhalt, die Datenstruktur, das Objekt. Beim Inhalt kann ich auf einen Ordner klicken und einen Seiteninhalt zuordnen. Speichern.
Web->Liste steht mein angelegtes flexibler Inhalt als Seiteninhalt
gehe ich im Kontext der Seite auf Bearbeiten steht es als “Nicht verwendetes Element” darüber. Da steht was von verknüpfen, aber ich wüsste nicht wie und wo.
Hi,
richte mir doch mal ein BackEnd-Zugang ein, dann schau ich mal fix drüber. Am besten schickst du mir die Daten per Kontaktformular oder so. Weil so kann ich mir gerade nichts drunter vorstellen wo das Problem sein könnte.
Was mir noch einfällt, du sollst ja dann in der Übersicht nicht das Element selber bearbeiten sondern einfach da drinnen dann dein Content einbauen. Da sind ja dann auch so Plus-Grafiken für Inhalte hinzufügen (Siehe Grafik 5) und so.
Unfassbar ! Ein kurzes und verständliches Tutorial im t3 Umfeld ! Ich habe schon an mir gezweifelt, nachdem ich alles, was ich zu TV finden konnte, gelesen hatte und es dennoch nicht gerafft habe.
Und hier ? Da findet man ein kleines, gut und nett gemachtes Tutorial, welches man liest und sofort tritt der Aha Effekt ein. Dann probiert man es aus und es funktioniert auch so.
Das hat Potential ! Du musst bitte mehr davon machen !
Vielen, vielen Dank !
Grüsse ToKi
Hallo ToKi,
freut mich das ich helfen konnte. Mit der Zeit wird man ziemlich “betriebsblind”. Ich würde mich sehr freuen wenn ich Vorschläge bekomme, über was es sich so schreiben lässt. Falls du mal irgendwo hängen solltest, schreib mir doch mal ne Mail? Vielleicht lässt sich dann was darüebr schreiben. Manchmal sind es die kleinen Dinge, die einem doch enorm weiterhelfen.
Schönen Gruß zurück,
Martin
Super Beitrag. Immer wenn ich lange kein FCE mehr erstellt habe, komme ich dankend auf Deine Seite um mich zu erinnern. Super Beitrag!
Gruß Björn
Hallo,
dieses FCE funktioniert nur in Verbindung mit TemplaVoila, falls ich das richtig verstanden habe, oder? Es geht es auch ohne TV?
Super Anleitung, vielen herzlichen Dank! Ausführlich, gut erklärt und mit vielen Screenshots. Genau nach sowas suche ich schon seit Tagen.
absolut genial einfaches tutorial. vorallem dass man keine NEUE ext. installieren muss oder ähliches.. einfach nur tv. meine evtl. “blöde” frage wäre noch.. kann ich dann in diesen spalten wiederum ein FCE einfügen.. also nicht nur die normalen typo3-ce’s. vielen dank für eine kurze antwort, gruss flo
und nochmals bravo!
Hallo Flo,
Danke für die Blumen!
Klar kannst du das FCE noch beliebig verschacheln. Einfach drauf los bauen.
Viel Spaß!
dein tutorial hat mir inzwischen echt sehr geholfen.
ich habe bei einem FCE einige titel geändert und auch ein neues field_… hinzugefügt..
wenn ich dann die neue vorlage verwenden will, sind diese änderungen nicht sichtbar und auch bei dem contentelementen die ich mit dem fce angelegt habe sehe ich kein neues feld..
muss ich noch einen anderen cache ausser dem normalen löschen?
hast du evtl. einen tipp für mich? gruss flo
Hallo Flo,
danke für dein Kommentar.
Hast du das FCE selber (beim Prozess des Mappings) gespeichert? Du hast ja dann unten am Fuß so eine “Toolbar” mit den ganzen Buttons. Dort kannst du das Template bzw. die DS nochmal speichern.
Gruß,
Martin
Hey ich hätte da eine Frage, und zwar möchte ich ein zusätzliches FCE einbauen, sodass ich zB.: einen 2 Spalter, nen 4 Spalter & nen 3 Spalter habe. Nun habe ich es so probiert:
im css – einfach col3 col4 col5 geaddet.
extra template names 3-Spalter hochgeladen (col3-col5 benutzt)
ebenso eingebunden wie das erste FCE.
funzt aber nicht – jmd ne hilfe?
Eigentlich sollte dies so funktionieren. Du hast bestimmt irgendwo etwas vergessen!
Die Schritte (auch wenn ich TV nicht auf deutsch ans Laufen kriege) sind gut und einfach nachzuvollziehen.
Trotzdem muss irgendwo noch ein Haken sein (Grundtemplate mit Wizard aufgesetzt). Die Eingabemaske zeigt nur eine Spalte an und Ausgabe im FE ist ein gelber Kasten: TemplaVoila ERROR:
Couldn’t find a Data Structure set for table/row “tt_content:50″.
Please select a Data Structure and Template Object first.
Im BE zeigt das System unter Content:
Data Structure ERROR: Line 1: Invalid document end
Scheinbar bin ich zu doof oder habe zu lange gearbeitet………
Doof trifft es eher… Hab den Fehler gefunden… *schäm*
Hi, und an was lag es? Ich muss das Tutorial aber eh nochmal neu schreiben irgendwann. Mittlerweile hat sich ja ein wenig was an TV geändert. Zumindest oberflächlich.
Hallo Martin,
gutes Tutorial, allerdings – die Erzeugung von Datenstruktur und Vorlagenobjekt klappt offenbar so nicht, bzw. nicht mehr (TemplaVoilà 1.4.4). Wenn man im Storage Folder von TemplaVoilà einen neuen Datensatz und ein neues Vorlagenobjekt anlegt, wie du es beschreibst, dann ist die Datenstruktur leer. Man müsste händisch die benötigte XML-Datenstruktur einfügen, dann könnte man mit dem Mapping beginnen. Die meisten, die dieses Tutorial lesen, werden aber vermutlich keine entsprechende XML-Datenstruktur zuvor zusammenbauen, um sie dann hier einzufügen.
Der einfachere Vorgang ist dieser: Dateiliste (oder Datei, wenn DAM installiert ist) – HTML-Template auswählen – auf das Icon des Templates klicken – im PopUp-Kontextmenü TemplaVoila auswählen.
Hier werden nun die Datenstruktur und das Vorlagenobjekt erstellt, die benötigten Felder angelegt und gemappt. Danach kann das FCE als Inhaltselement verwendet werden.
Gruß,
Michael
Hi Michael,
nicht ganz korrekt. Die Datenstrukur wird automatisch generiert wenn du das Mapping beginnst.
Gruß,
Martin
Hallo Martin,
hast du das mit der aktuellen TV-Version versucht? Ich hab’s probiert, und es ist mir nicht gelungen. Vielleicht hab ich ja was übersehen. Den Weg übers Template finde ich persönlich jedenfalls einfacher und übersichtlicher.
Gruß
Michael
Hallo,
super Tutorial, ich habe nur folgendes Problem. Habe auf einem Typo 4.3.0 mit TV gearbeitet und dabei das problem dass nun sporadisch in 2/3 der Fällen das Problem auftritt, dass ich wenn auf einer Seite ein Content-Elemt hinzufügen möchte die Auswahlt an Content-Elementen nicht kommt. Das ganze kam das erste Mal nachdem ich zum x-ten mal ein FCE-geupdated hatte. Es könnte auch sein, dass ich zu schnell weitergearbeitet habe und er nicht 100%ig gespeichert hat. Das entfernen des entsprchenden DS und TO und neuanlegen hilft auch nicht weiter. mal kann cih 3 Content Elemente anlegen, dann wieder 5 mal nicht…
Hat jemand eine Idee, möchte das ganze so ungerne meinem Kunden so übergeben.
Gruß
Christoph
Hallo Christoph,
ich habe genau das gleiche Problem mit TYPO3 4.4. Hast du eine Lösung gefunden?
Gruß
Michael
Ich werde schauen das ich am Wochenende das Tutorial mal auf den aktuellen Stand bringe. Bis dahin bitte noch etwas Geduld!
Gruß
Martin