Seiten-Templates mit Fluid

|
Mitarbeiter sitzen mit Laptops im Schulungsraum. Der Schulungsleiter hilft einer Mitarbeiterin

In unserem aktuellen Kundenmagazin erklärt Mittwald Mitarbeiter und TYPO3-Experte Martin Helmich, wie Ihr mit Hilfe von Fluid Seiten-Templates erstellen könnt. Den Artikel gibt es nun hier im Blog als kleine Leseprobe.

Bereits seit der TYPO3-Version 4.3 können Extension-Entwickler die neue Template-Engine Fluid für ihre Erweiterungen verwenden. Bedeutend weniger Aufmerksamkeit wurde – völlig unverdient – dem FLUIDTEMPLATE-Inhaltsobjekt zuteil, mit dessen Hilfe ab TYPO3 4.5 auch komplette Seitenlayouts mit Fluid umgesetzt werden können.

Ein Template erstellen

Das Template kann zunächst als reguläre HTML-Datei erstellt werden, vorzugsweise im fileadmin/-Ordner. Innerhalb des Templates steht die komplette Fluid-Syntax zur Verfügung: Auf Variablen, die über das TypoScript-Setup zugewiesen wurden, kann über die übliche Notation mit zugegriffen werden. Darüber hinaus kann etwa mit dem cObject-ViewHelper auch direkt auf TypoScript-Objekte zugegriffen werden, ohne dass diese explizit als Variable zugewiesen werden müssen. Ein solches Fluid-Template könnte also beispielsweise aussehen wie folgt:

<div id=“header“>
  {siteName}
</div>
<div id=“navigation“>
  <f:cObject typoscriptObjectPath=“lib.mysite.navigation“ />
</div>
<div>
  <f:escape value=“{content}“ type=“raw“ />
</div>

Die Variable muss hier zwingenderweise in einem <f:escape>-ViewHelper verpackt werden, da Fluid ansonsten HTML-Sonderzeichen innerhalb dieser Variable codieren würde – grundsätzlich ein sinnvoller Sicherheitsmechanismus, der hier allerdings umgangen werden muss.

Das Template einbinden

Im Anschluss kann das Fluid-Template in das TypoScript-Setup der Seite eingebunden werden:

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
  file = fileadmin/template.html
  layoutRootPath = fileadmin/layouts/
  partialRootPath = fileadmin/partials/

  variables {
    siteName = TEXT
    siteName.value = Meine Seite

    content < styles.content.get
  }
}

Eine vollständige Referenz aller Eigenschaften des FLUIDTEMPLATE-Objekts findet sich übrigens hier.

Layouts und Partials

Falls das Template sich wiederholende oder besonders komplexe Elemente enthält, können diese in ein sogenanntes Partial ausgelagert werden. Diese müssen in eigenen HTML-Dateien in dem Ordner liegen, der im FLUIDTEMPLATE-Objekt mit dem partialRootPath-Attribut beschrieben wurde. Ein solches Partial kann im eigentlichen Template mit dem <f:render>-ViewHelper angesprochen werden (wichtig: Das Partial muss ohne Dateiendung angegeben werden):

<div id=“search“>
  <f:render partial=“search“ />
</div>

Über den <f:render>-ViewHelper können auch Layouts angesprochen werden; deren Verwendung macht allerdings nur Sinn, wenn innerhalb derselben Seite mehrere Fluid-Templates zum Einsatz kommen sollen.

Ähnliche Artikel:

Webentwicklung

TYPO3 v13 LTS: Einfacher und flexibler mit Site Sets & Content Blocks

CMS Pro Philipp stellt im Beitrag seine Highlights zur neuen LTS-Version TYPO3 13.4 vor. Dazu gehören Site Sets und Content Blocks.

Webentwicklung

Best Practices für responsive Bilder in TYPO3

Wie du Ladezeiten, Benutzererfahrung und SEO-Position durch moderne Bildformate wie AVIF und WebP verbessern kannst, erklärt Richard im Blog.

Webentwicklung

Lieber mit Agentur: TYPO3 Upgrade oder Relaunch?

Wer TYPO3 nicht regelmäßig aktualisiert, tut sich keinen Gefallen. Erfahrt hier, warum Agenturen bei großen Versionssprüngen unterstützen sollten.

Webentwicklung

TYPO3 12 LTS – die wichtigsten neuen Features

Du fragst dich, ob du ein Update auf die neue TYPO3 12 LTS machen sollst? Im Blog geben TYPO3 CTO Frank Nägler und wir dir gute Gründe dafür!

Kommentare

Reinhardt Hartl am

Hallo Annika.
Habe mein Anliegen bereits im Forum gepostet. Anscheinend ist das ein seltenes Anliegen ;)

Beste Grüße

Annika Schwanitz am

Hallo Reinhardt,

hierfür ist ebenfalls die Verarbeitung über Typoscript nötig. Weitere Informationen dazu findest du z. B. unter

Viele Grüße
Annika

Reinhardt Hartl am

Hallo Annika.
Vielen Dank für deine Antwort.
Jetzt habe ich dazu noch eine Frage:
Wenn ich mit Fluid eine dreispaltige Seitenstruktur aufbaue und in der mittleren (pluginMiddle) und der rechten Spalte (pluginRight) jeweils ein Plugin hinzufüge, wie kann ich dann in beiden Plugins die selben View-Parameter verwenden?
zB möchte ich in pluginMiddle und pluginRight auf einen View-Parameter zugreifen, den ich im Controller der View zugewiesen habe.

Beste Grüße und vielen Dank!

Annika Schwanitz am

Hallo Reinhardt,

ich versuche gern, die Frage zu klären, muss aber erst Rücksprache mit den technisch versierten Kollegen halten ;) Ich würde dich daher gern noch einmal auf unser Forum typo3.net aufmerksam machen, dort gibt es viele User, die dir auch sehr gerne weiterhelfen.

Viele Grüße
Annika

Reinhardt Hartl am

Hallo zusammen.
Ich habe dazu noch eine Frage:
Ich habe eine Action. Im Controller weise ich der View einen Parameter hinzu:
$this->view->assign(„testView“, 1);
Im dazugeöhrigen Layout bzw. Partial kann problemlos darau zugreifen.
Wie kann ich aber im Template (fileadmin/template.html) auf diesen Parameter zugreifen? Muss ich diesen mit TypoScript an das Template übergeben oder gibt es da mit Fluid eine andere Möglichkeit?
Vielen Dank!

Annika Schwanitz am

Hallo Reinhardt,

tatsächlich müsstest du die Variable für das Fluid-Template im TypoScript deklarieren.
Im oben genannten Beispiel wäre dies mit foglendem TypoScript umsetzbar:

page = PAGE
page.10 = FLUIDTEMPLATE
page.10 {
file = fileadmin/template.html
layoutRootPath = fileadmin/layouts/
partialRootPath = fileadmin/partials/

variables {
siteName = TEXT
siteName.value = Meine Seite
content < styles.content.get testView = TEXT testView.value = 1 } } Das FLUID-Template sollte daher nur für die Grundstruktur verwendet werden. Beispielsweise für die Umsetzung von einseitigen oder zweiseitigen Seitenstrukturen. Dynamische Seitenbereiche sollten entsprechend daher in des Layouts, Views (ebenfalls "Templates" genannt) und Partials verarbeitet werden. Übrigens: Fragen zu TYPO3 werden auch sehr gern von der Community auf unserem Forum typo3.net beantwortet. Hier kannst du dich mit vielen Gleichgesinnten austauschen. Ich hoffe, ich konnte dir weiterhelfen. Viele Grüße Annika

Kall am

@steffen
etwas spät, wurde aber auch bereits gesagt:

-> gridelements
-> multicolumn

gridelements hat den nachteil, ist nicht ad hoc einsatzfähig.
musst erst das rad neu definieren (die gridelements). dafür sehr flexibel.

Armin am

Guck Dir mal die DCE Extension an. typo3.org/extensions/repository/view/dce

Hauke Hain am

Als FCE Ersatz (TV) scheinen sich zwei Extensions zu eignen, ich habe mir aber noch keine genauer angesehen:

Joscha Krug am

Hallo Steffen,
dazu gab es einen Vortrag auf dem Münchner Camp, der auf gezeichnet wurde und bei Youtube steht. Such mal nach t3cm11.

Gruß Joscha

Sebastian am

Die Frage von Steffen Thierock stelle ich mir auch!

Gibt es da eine Lösung?

Josef Florian Glatz am

@Steffen: Sieh dir mal ext:fed an ;-) Die bietet schon recht gute Features. Ist noch beta, aber funktioniert wunderprächtig!