Flexible Inhalte mit Fluid in TYPO3

Letztes Jahr haben wir in unserem Blogeintrag Gridelements professionell nutzen die versionierbare Nutzung der Extension erklärt. Wir nutzen Gridelements überwiegend zur Realisierung verschachtelter Inhaltselemente. Für individuelle Inhalte mit vorgegebenen Eingabemöglichkeiten, zum Beispiel eine Teaser-Box, haben wir auf Basis eines kleinen PHP Helpers eine Fluid-Lösung entwickelt.

Ein großer Vorteil dieses Vorgehens ist die fast ausschließliche Verwendung von TYPO3 Core-Funktionen. Theoretisch wäre auch eine Nutzung des TypoScript Objekts FLUIDTEMPLATE möglich, wodurch der PHP Helper entfallen könnte.

Fluid Renderer

Der Fluid Renderer ist der PHP-Teil und wir haben diesen in Form einer dokumentierten Extension ins TER gestellt: Fluid FCE

Wir haben diesen entwickelt um ein paar erweiterte Funktionen zu nutzen und Flexform-Inhalte auszugeben. Zur Verwendung des Renderers ist ein kleines TypoScript-Snippet erforderlich:

lib.fceRenderer = USER
lib.fceRenderer {
    userFunc = Tx_MyExtKey_Content_FceRenderer->render
    extbase.pluginName = MyExtKey
    flexformFields = pi_flexform
    partialRootPath = EXT: my_ext_key/Resources/Private/Partials
    layoutRootPath = EXT: my_ext_key/Resources/Private/Layouts
}

TsConfig

mod.wizards.newContentElement.renderMode = tabs
mod.wizards.newContentElement.wizardItems.common {
    elements.myextkey_teaserBox {
        icon = ../../../../typo3conf/ext/my_ext_key/Resources/Public/Icons/standard-fce.png
        title = Teaser Box
        description = Box mit Bild, Überschrift, Fließtext und optionalem Link
        tt_content_defValues {
            CType = myextkey_teaserBox
        }
    }
    show := addToList(myextkey_teaserBox)
}

In diesem Fall wurde das FCE für das Projekt my_ext_key erstellt. Für jedes weitere FCE wird jeweils ein Block startend ab der Zeile elements.myextkey_teaserBox erstellt und innerhalb der letzten Zeile der zugehörige Key mit einem Komma getrennt in die runden Klammern eingefügt.

TypoScript-Definition des Inhalts-Elements

Zu jedem FCE gehört ein kleiner Schnippsel TypoScript, welcher dem Element das Basis-TypoScript für das Rendering über den PHP Helper zuweist und den Pfad des Fluid Templates definiert.

tt_content.myextkey_teaserBox < lib.fceRenderer
tt_content.myextkey_teaserBox {
    file = EXT: my_ext_key/Resources/Private/Templates/Elements/TeaserBox.html
}

TCA-Konfiguration

Pro Inhaltselement muss in der ext_tables.php oder einer vergleichbaren Datei die TCA-Konfiguration der benötigen Datenbankfelder hinterlegt werden. Ohne die Nutzung von Flexforms kann das wie folgt aussehen:

# Add backend element
t3lib_extMgm::addPlugin(array('Teaser Box', 'my_ext_key'), 'CType');

# Configure fields for teaser box
$TCA['tt_content']['types']['my_ext_key_teaserBox']['showitem'] = '
	--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.general;general,
	header;LLL:EXT:cms/locallang_ttc.xml:palette.header,
	bodytext;;9;richtext:rte_transform[flag=rte_enabled|mode=ts_css];,
	image,
	header_link,
	--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.appearance,
	--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.frames;frames,
	--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.access,
	--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.visibility;visibility,
	--palette--;LLL:EXT:cms/locallang_ttc.xml:palette.access;access,
	--div--;LLL:EXT:cms/locallang_ttc.xml:tabs.extended,
	tx_gridelements_container,
	tx_gridelements_columns,
	--div--;sys_language_uid,
	l18n_parent
';

Aufbau der Fluid-Templates

Für jedes FCE wird abschließend das passende Fluid-Template erstellt. Innerhalb des Templates kann auf jedes Feld zugegriffen werden, welches über das TCA definiert wurde.

Fluid Template

<div class="box">
	<f:if condition="{header_link}">
		<f:then>
			<f:link.page parameter="{header_link}">
				<f:render partial="FluidContentElements/TeaserBox" arguments="{_all}" />
			</f:link.page>
		</f:then>
		<f:else>
			<f:render partial="FluidContentElements/TeaserBox" arguments="{_all}" />
		</f:else>
	</f:if>
</div>

Fluid Partial

<div class="box-content">
	<hgroup>
		<f:if condition="{header}">
			<h2><f:format.nl2br>{header}</f:format.nl2br></h2>
		</f:if>
	</hgroup>
	<f:if condition="{bodytext}">
		<f:format.html>{bodytext}</f:format.html>
	</f:if>
</div>

Fazit

Für uns sind die Fluid FCEs zusammen mit der Nutzung der Extension gridelements eine ideale Kombination zum Aufbau von Webseiten die anspruchsvoll gestaltet aber dennoch redaktionell einfach zu pflegen sind.

Wir nutzen sie in jedem Projekt und haben bereits eine Sammlung an FCEs zusammen gestellt, die eine gute Basis bilden. Insbesondere die vollständige Versionierbarkeit stellt für uns einen großen Vorteil dar, denn sowohl für neue Projekte als auch für Deployment-Prozesse oder das Aufsetzen von Entwicklungs-Systemen fällt kein zusätzlicher Aufwand mehr an.

In einem zweiten Blog-Artikel werden wir auf die Nutzung von Flexforms und die Section/Container-Logik eingehen.