Fluid - Snippets
Links
http://wiki.typo3.org/Category:De:fluid
Debugging
<f:debug title="band">{band}</f:debug>
<f:debug>{_all}</f:debug>
Lokalisierung - Mehrsprachigkeit
<f:translate key="tx_gbbandpass_domain_model_band.name" /> Tool zum erstellen der Lokalisierungsdateien (Sprachdateien): http://lbrmedia.net/tools/xliff_translation_file_erstellen/xlfC/Pi1/
Links erzeugen
http://wiki.typo3.org/De:ViewHelper/Link
Link auf Action Controller z.B. Einzelansicht (show) - f:link.action
<f:link.action action="show">action link</f:link.action>
<f:link.action action="show" arguments="{band : band}"> {band.name}</f:link.action>
E-Mail Link - f:link.email
<f:link.email email="foo@bar.tld" />
Externer Link - f:link.external
Standard Scheme ist http es gehen aber auch andere z.B. ftp:
<f:link.external uri="typo3.org" defaultScheme="ftp">external ftp link</f:link.external>
Seitenlink - f:link.page
<f:link.page pageUid="1" additionalParams="{foo: 'bar'}">page link</f:link.page>
Bilder
<f:image src="EXT:myext/Resources/Public/typo3_logo.png" alt="alt text" maxWidth="200"/>
Beispiele für Bilder einer eigenen Extension in Fluid
Beispiel (Quelle: http://keinerweiss.de/755-typo3-fal-in-einer-eigenen-extbasefluid-extension-einsetzen.html 2014/11)
Hier nutzt man den File Abstraction Layer (FAL). Ausgehend von einer mit dem Extension Builder erzeugtem Modell mit Typ Image ein paar Schnipsel für die Ausgabe im template (list.html)
Mein Model: root
Das FileReference Model: root.image
Der sys_file_reference Datensatz: root.image.originalResource
Der sys_file Datensatz: root.image.originalResource.originalFile
<f:for each="{roots}" as="root">
Orginal-Attribute:<br />
Dateiname: {root.image.originalResource.originalFile.name}<br />
Titel: {root.image.originalResource.originalFile.title}<br />
Beschreibung: {root.image.originalResource.originalFile.description}<br />
Alt-Text: {root.image.originalResource.originalFile.alternative}<br />
UID: {root.image.originalResource.originalFile.uid}<br />
Pfad: {root.image.originalResource.publicUrl}<br /><br />
Referenz-Attribute:<br />
Titel: {root.image.originalResource.title}<br />
Beschreibung: {root.image.originalResource.name}<br /><br />
Ausgabe als Bild:<br />
<f:image src="{root.image.originalResource.originalFile.uid}" alt="" /><br />
<f:image src="{root.image.uid}" alt="" treatIdAsReference="TRUE" /><br /><br />
Als Link:<br />
<a href="{file.originalResource.publicUrl}">{file.originalResource.title}</a><br /><br />
<f:for each="{root.files}" as="file">
<p>{file.originalResource.originalFile.title}</p>
</f:for>
</f:for>
If-Else-Bedingungen in Fluid Templates
http://www.extbasefluid.com/fluid/bedingungen-ifelse/
Template Variable mit String vergleichen
http://www.typo3lexikon.de/typo3-tutorials/extensions/fluid/fluid-tipps-und-tricks.html
Funktioniert im Moment (2014) noch nicht:
<f:if condition="{data.ctype} == 'table'">
{data.bodytext}
</f:if>
So geht's:
Über einen Alias
<f:alias map="{myText: 'table'}">
<f:if condition="{data.ctype} == {myText}">
{data.bodytext}
</f:if>
</f:alias>
Über ein Array (die beiden Operatoren werden in ein Array konvertiert, welches Fluid interpretieren kann)
<f:if condition="{0:data.ctype} == {0:'table'}">
{data.bodytext}
</f:if>
Die Array-Lösung hat auch noch den Vorteil, dass man mehrere Werte gleichzeitig überprüfen kann:
<f:if condition="{0:data.ctype,1:data.hidden,2:data.deleted} == {0:'table',1:'0',2:'0'}">
{data.bodytext}
</f:if>
RTE Inhalte Rendern
<f:format.html>{content.bodytext}</f:format.html>
Funktioniert aber nicht bei allen CTypes, weil die entsprechenden CSS_Styled_Content Funktionen nicht ausgeführt werden
<f:if condition="{content.ctype}">
<f:cObject typoscriptObjectPath="tt_content.{content.ctype}.20" data="{content}" />
</f:if>
Beachtet aber, dass Ihr für diese Lösung auch alle benötigten tt_content-Felder in Eurem Model definiert habt.
CSS und JS einbinden
Eventuell wäre hier TypoScript vorzuziehen.
CSS und JS Dateien über Fluid
<link rel="stylesheet" href="{f:uri.resource(path:'Css/bootstrap.css')}">
<script type="text/javascript" src="{f:uri.resource(path:'Js/jquery.shuffle.js')}"></script>
Funktioniert nicht für Dateien in fileadmin. Der Pfad bezieht sich auf
typo3conf/ext/myExtKey/Resources/Public/
Inline JS über Fluid
Wrap über CData:
<![CDATA[ ... ]]>
Wrap über Fluid cdata ViewHelper
<f:format.cdata>
<script type="text/javascript">
var myLayout;
$(document).ready(function() {
myLayout = $('body').layout({
north__size: 27,
north__initClosed: false,
north__initHidden: false,
center__maskContents: true // IMPORTANT - enable iframe masking
});
});
</script>
</f:format.cdata>
Schleifen
4 Spalten mit Modulo
<f:for each="{images}" as="image" iteration="iteration">
<f:image src="upload/tx_myextension/{image.source}" width="200" height="150" alt="Mein Bild {image.caption}" />
<f:if condition="{iteration.cycle}%4==0"><br/></f:if>
</f:for>
Anderes
Beispiele
Quellen:
http://itype3.blogspot.de/2013/03/fluid-template.html
Unix Timestamp for Humans
<f:format.date = format="d.m.Y - H:i:s">@1362784580</f:format.date>
Text auf eine gewisse Länge abschneiden append wird dem abgekürztem Text am Ende eingefügt, wie z.B. ein Leerzeichen und drei Punkte um zu symbolisieren, dass der Text abgekürzt wurde.
<f:format.corp maxCharacters="50" append=" ...">Hier folgt der TEXT</f:format.corp>
Texte direkt aus dem TypoScript Objekt holen TypoScript
inhaltSpalteNormal < styles.content.get
HTML
<f:cObject typoscriptObjectPath="inhaltSpalteNormal" />
Texte direkt aus dem TypoScript Objekt holen kombiniert TypoScript
meinText = TEXT
meinText {
wrap = <p>Hier steht der Text aus dem Template: <b>"|"</b></p>
# Ohne diese Einstellung würde die | nicht
# mit dem Text aus dem Template ersezt werden
current = 1
}
Template (View-Helper) Hier gibt es zwei Varianten. Die eine per data-Attribut den Text übergeben und die Andere zwischen den f:cObject-Tags.
<f:cObject typoscriptObjectPath="meinText" data="Das ist der Text aus dem Template"/>
oder
<f:cObject typoscriptObjectPath="meinText"> Das ist der Text aus dem Template </f:cObject>
Querverweise auf interne Seiten, externe Adressen, E-Mail-Adressen oder Anchor
Springen zu einem Anchor-Punkt Section entspricht der ID eines Divs
<f:link.page section="frame">Top</f:link.page>
Link auf eine interne Seite
<f:link.page pageUid="3">Kontakt</f:link.page>
...wir können auch Parameter übergeben:
<f:link.page pageUid="3" additionalParams="{name: 'wert'}">Kontakt</f:link.page>
Link auf eine externe Adresse
<f:link.external url="http://www.typo3.org" target="_blank">Link zy TYPO3</f:link.external>
Link auf eine E-Mail-Adresse
<f:link.email email="adresse@domain.com" />
Conditions
TypoScript
partialAuswahl = TEXT
partialAuswahl.value = 1
# FLUID Template definieren
fluidTemplate = FLUIDTEMPLATE
fluidTemplate {
...
variables {
partial < partialAuswahl
}
}
Template (view-helper) Fluid kann im Moment nur nummerische Werte überprüfen, deswegen partialAuswahl.value = 1 und {partial} == 1
<f:if condition="{partial} == 1">
<f:then>
Partial {partial} ausgegeben.
</f:then>
<f:else>
Keine Partial-Angabe gefunden
</f:else>
</f:if>
Comment-View-Helper Man kann im Fluid-Template Kommentare hinterlassen, ohne dass diese im Frontend ausgegeben werden.
<f:comment>
Das ist ein Comment für den Entwickler, der im Quelltext
im Gegensatz zum HTML-Comment nicht zu sehen ist
</f:comment>
Inline Notation
TypoScript
anredeHerr = TEXT
anredeHerr.value = 1
# FLUID Template definieren
fluidTemplate = FLUIDTEMPLATE
fluidTemplate {
...
variables {
anredeHerr < anredeHerr
}
}
Template (View-Helper)
<p>
Sehr geehrte{f:if(condition: '{anredeHerr}', then: 'r Herr', else: ' Frau')} XY, <br />
wir möchten Ihnen mitteilen, dass...
</p>
Doctype auf HTML 5 umstellen
page = PAGE
page {
config{
# HTML 5
doctype = <!DOCTYPE html>
}
}
TEXT Object
Naviagtion 2. Stufe direkt anzeigen
# Navigation als Content Object Array (COA)
nav = COA
nav {
wrap = <ul>|</ul>
10 = TEXT
10 {
value = Home
stdWrap.typolink.parameter = 1
wrap = <li>|</li>
}
20 = HMENU
20 {
1 = TMENU
# Hauptmenü 1. Stufe
1 {
NO = 1
# stdwrap wendet die Eigenschaften auf den Text and
# stdWrap2 wendet die Eigenschaften auf den kompletten a-Tag an
NO.stdWrap2.wrap = <li>|</li>
CUR = 1
CUR < .NO
CUR.ATagParams = class="active"
ACT = 1
ACT < .CUR
}
# Untermenü 2. Stufe
/*
2 = TMENU
# Alle Eigenschaften der Normal und Current Zustände übernommen
2 < .1
2 {
NO.stdWrap2.wrap = <li> |</li>
ACT < .NO
CUR.ATagParams = class="active"
CUR < .ACT
}
*/
}
# Wenn die 2. Stufe direkt angezeigt werden soll
# ohne dass man zuerst auf den parent (1. Stufe) klikt
30 = HMENU
30 {
special = directory
value = 26
1 = TMENU
1 {
NO = 1
NO.stdWrap2.wrap = <li> |</li>
ACT < .NO
ACT.ATagParams = class="act"
CUR < .ACT
}
}
}
OPTION SPLIT
Im folgenden sehen wir mit dem Option Split jedem Link noch einen Parameter übergeben
Dem ersten hängen wir den Buchstaben A vorne , dann folgen zwei Pipe zeichen || gefolgt von noch einem
# Untermenü 2. Stufe
2 = TMENU
# Alle Eigenschaften der Normal und Current Zustände übernommen
2 < .1
2 {
NO.stdWrap2.wrap = <li>A |</li> || <li>B </li>
ACT < .NO
CUR.ATagParams = class="active"
CUR < .ACT
}
}
Navigation So würde dann die Navigation im Frontend aussehen
Home Über uns Kontakt A Seite 1 B Seite 2 B Seite 3
TypoScript
Hier noch ein Beispiel wie man nur die ersten zwei Links berücksichtigen kann. Nach dem 2. LI-Tag folgen nochmals zwei Pipe Zeichen, welche den 3 und die folgende Links anspricht diese werden nicht formatiert nur der 1. und 2.
# Untermenü 2. Stufe
2 = TMENU
# Alle Eigenschaften der Normal und Current Zustände übernommen
2 < .1
2 {
NO.stdWrap2.wrap = <li>A |</li> || <li>B </li> ||
ACT < .NO
CUR.ATagParams = class="active"
CUR < .ACT
}
}
Navigation Das sind nun die Auswirkungen der Navigation im Frontend
Home Über uns Kontakt A Seite 1 B Seite 2 Seite 3
Weitere Informationen sind unter der Typo3 Referenz nachlesbar http://wiki.typo3.org/De:TSref/optionSplit
Konstanten
Für wiederkehrende Bezeichner wie Grafiken oder Textpassagen verwendet man im TypoScript am besten Konstanten
Oberhalb der des Templates > setup klikt man auf Kostanten, darin definiert man:
logoDatei = logo.png
Im Template (setup) greift man wie folgt auf die Konstanten zu
file = fileadmin/template_fluid/public/img/{$logoDatei}
TypoScript Refferenz
http://www.tsref.de/ http://typo3.org/documentation/document-library/core-documentation/doc_core_tsref/current/view/
