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>

Bedingungen

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>

Mehrere Modelle in einem View ausgeben (verknüpfte Daten auflisten)

Im Controller steht wegen der strikten Trennung der Modelle erstmal das Repository (Die Datenstruktur) des Models zur Verfügung. Die verknüpften Daten (hier im Beispiels die Genres, gibt der View zwar über die Verknüpfung aus, das sind aber nur die mit dem jeweiligen Datensatz verknüpften Daten. Z.B. die Genres einer Band. Will man z.B. alle Genres im Listview der Bands ausgeben braucht man ein Repository der Genres und muß den Genre Controller in den Band Controller injecten. Dann kann man auf alle Funktionen des Genre Controllers auch aus dem Band Controller zugreifen. So bleibt auch alles sauber getrennt.

• eigenes Repository für verknüpfte Daten erstellen (z.B. Genre)

	/**
	 * genreRepository
	 *
	 * @var \Geobit\Gbbandpass\Domain\Repository\GenreRepository
	 * @inject
	 */
	protected $genreRepository = NULL;

• in gewünschten Controller (Hauptcontroller) injecten dazu innerhalb der Klasse folgendes hinzufügen:

You can inject every repository of every installed extbase extension. Just add the dependency injection code to your controller. Depending on your TYPO3 version ist either:

TYPO3 >= 6.0:

/**
 * @var \Vendor\Extension\Domain\Repository\SomeRepository
 * @inject
 */
protected $someRepository;
'''TYPO3 = 4.7:'''
<pre>
/**
 * @var Tx_MyExtension_Domain_Repository_SomeRepository
 * @inject
 */
 protected $someRepository;

TYPO3 < 4.7

/**
 * @var Tx_MyExtension_Domain_Repository_SomeRepository
 */
 protected $someRepository;

/**
 * Inject SomeRepository
 * @param Tx_MyExtension_Domain_Repository_SomeRepository $someRepository
 * @return void
 */
public function injectSomeRepository(Tx_MyExtension_Domain_Repository_SomeRepository $someRepository) {
  $this->someRepository = $someRepository;
}

Jetzt kann man $this->someRepository mit all seinen Methoden auch in diesem Controller nutzen.

Hinweis: Nach Änderung System Cache löschen !

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>