TYPO3 Fluid - Snippets
Links
http://docs.typo3.org/typo3cms/ExtbaseGuide/Fluid/Index.html
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/
