TYPO3: Gridelements mit Fluid-Templates und Flexforms
Mit Fluid-Templates machen die Gridelements erst richtig Spaß.
Dazu ist es auch noch kinderleicht – das kann wirklich jeder zu Hause nachmachen.
Was ist zu tun?
1. Ein Gridelement anlegen
backend_layout {
colCount = 2
rowCount = 1
rows {
1 {
columns {
1 {
name = Links
colPos = 21
}
2 {
name = Rechts
colPos = 22
}
}
}
}
}
2. Flexform erstellen
… und als Datei im Gridelement einbinden
<?xml version="1.0" encoding="UTF-8"?>
<T3DataStructure>
<ROOT type="array">
<type>array</type>
<el type="array">
<shadow>
<TCEforms type="array">
<label>Schatten anzeigen</label>
<config>
<type>check</type>
</config>
</TCEforms>
</shadow>
<bgcolor>
<TCEforms>
<label>Hintergrundfarbe</label>
<config>
<type>select</type>
<items type="array">
<numIndex index="0" type="array">
<numIndex index="0">keins</numIndex>
<numIndex index="1"></numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">gelb</numIndex>
<numIndex index="1">yellow-bg</numIndex>
</numIndex>
<numIndex index="1" type="array">
<numIndex index="0">grau</numIndex>
<numIndex index="1">grey-bg</numIndex>
</numIndex>
</items>
<maxitems>1</maxitems>
<size>1</size>
</config>
</TCEforms>
</bgcolor>
</el>
</ROOT>
</T3DataStructure>
3. Typoscript erstellen
# Überschrift des Inhaltselements ausgeben (optional)
tt_content.gridelements_pi1.10 =< lib.stdheader
# Fluid-Template zuweisen
tt_content.gridelements_pi1.20.10.setup {
# GRID_ID ist die ID des entsprechenden Gridelements
GRID_ID < lib.gridelements.defaultGridSetup
GRID_ID {
cObject = FLUIDTEMPLATE
cObject {
file = fileadmin/tmpl/gridelements/zweispaltig.html
}
}
}
4. Fluid-Template erstellen
<div class="<f:if condition="{data.flexform_shadow}==1">shadow</f:if><f:if condition="{data.flexform_bgcolor}!=''"> {data.flexform_bgcolor}</f:if>">
<div class="row">
<div class="col-md-6 col-xs-12">
{data.tx_gridelements_view_column_21->f:format.raw()}
</div>
<div class="col-md-6 col-xs-12">
{data.tx_gridelements_view_column_22->f:format.raw()}
</div>
</div>
</div>
Das wars schon. Viel Spaß damit.
Uff … Danke! Sowas hatte ich gesucht ^^
… Durch anlegen einer Variable (kein Array!) in der Flexform ist das Auslesen in Fluid viel einfacher, und die Variable mit data.flexform_name anzusprechen erspart einem weitere Änderungen des TS-Setups. Sehr praktisch!
{data.tx_gridelements_view_column_21->f:format.raw()}
Danke für den Tipp Alex, ich habe es gleich mit eingebaut.
Bei mir wird offenbar das Fluid-Template nicht eingelesene und auf der Seite ausgegeben. Was mache ich falsch?
Hallo Frank, ich bräuchte mehr Informationen um das sagen zu können. So kann ich nur raten. Ist evtl. der Pfad zum FLUID-Template im Typoscript nicht korrekt angegeben?
Das Problem hat sich jetzt gelöst. Ich hatte das Beispiel noch einmal neu gebaut.
Hallo Steffen,
vielen Dank für das kurze Tutorial. Das klappt super für fast alle Felder. Hast du einen Tipp für die Bilder? Ich bekomme in Fluid mit data.flexform_… immer nur die Reference file:81 ausgegeben aber leider nicht den kompletten Bildpfad.
Danke und Gruß
Hans
Ist das nicht ein wenig doppelt raw?
{data.tx_gridelements_view_column_21->f:format.raw()}
… oh – tags werden entfernt … mal sehen ob es mit ‚code‘ geht…
<f:format.raw> {data.tx_gridelements_view_column_22->f:format.raw()} </f:format.raw>Ich wollte ganz sicher sein dass die Daten wirklich raw sind. 😉
Danke für den Hinweis, ist geändert.
😉 Hostenträger und Gürtel. Verstehe. Sehr vernünftig!
😀