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.