Combining Fluid ViewHelpers and TypoScript in TYPO3 - 5 basic examples

By Steffen Müller. Licensed under the Creative Commons License

Here comes another blog article about TYPO3 after a long time of absence. This time I introduce the Fluid cObject ViewHelper, which brings together the power of TypoScript and Fluid. I will demonstrate the usage of this ViewHelper in five basic examples.

1. Simple usage of the cObject ViewHelper: A breadcrumb menu

Any website with hierarchical pages should have a breadcrumb menu.
The TypoScript in this example creates a breadcrumb menu by using a HMENU of type rootline. The Fluid ViewHelper gets the result from this cObject and displays it in the template.

Fluid:

<f:cObject typoscriptObjectPath="lib.breadcrumb" />

TypoScript:

lib.breadcrumb = HMENU
lib.breadcrumb {
  special = rootline
  special.range = 0|-1
  1 = TMENU
  1 {
    NO.linkWrap = | >>
    CUR = 1
    CUR.doNotLinkIt = 1
  }
}

Result:

Home >> Learning TYPO3 >> Fluid examples

2. Passing static values from Fluid to TypoScript: Let TypoScript calculate some numbers

Let's assume that you have some math homework and need to calculate some numbers.
All we need to do is to tell Fluid our arithmetic problem in the "data" parameter. This value is passed to TypoScript as the current value, where we do the calculation. The result of this calculation is returned to the template.

Fluid:

20 + 22 = <f:cObject typoscriptObjectPath="lib.math" data="20+22" />

TypoScript:

lib.math = TEXT
lib.math {
  current = 1
  prioriCalc = 1
}

Result:

20 + 22 = 42

This is a very simple demonstration. To make this more comfortable, you would probably use the form ViewHelper to have a form field to enter the calculation task.

3. Passing dynamic values from Fluid to TypoScript: Render a video with flashplayer, using an URL from an object property.

In this example we have a website with a video podcast. We want to show the video of each podcast episode using a flashplayer (like youtube does for example). The videos itself are stored as mp4 files somewhere in the cloud. So all we need to have is the URL of the video as a property of the episode object.

Fluid:

<f:cObject typoscriptObjectPath="lib.flashPlayer" data="{episode.url}" />

TypoScript:

lib.flashPlayer = SWFOBJECT
lib.flashPlayer {
  file.current = 1
  width = 400
  height = 300
  type = video
  layout = ###SWFOBJECT###
  video.player = typo3/contrib/flashmedia/flvplayer.swf
  forcePlayer = 1
}

Result:

 

4. Alternative notations for passing dynamic data: Again a Flash video of a podcast

We use the same example like above, but introduce some alternative notations. This should help to get an idea about how Fluid notation can look like.

Fluid:

A. <f:cObject typoscriptObjectPath="lib.flashPlayer" data="{episode.url}" />

B. {episode.url -> f:cObject(typoscriptObjectPath: 'lib.flashPlayer')}

C. <f:cObject typoscriptObjectPath="lib.flashPlayer">{episode.url}</f:cObject>

D. <f:cObject typoscriptObjectPath="lib.flashPlayer"><f:cObject typoscriptObjectPath="lib.alternativeVideoUrl" /></f:cObject>

TypoScript:

lib.flashPlayer = SWFOBJECT
lib.flashPlayer {
  file.current = 1
  width = 400
  height = 300
  type = video
  layout = ###SWFOBJECT###
  video.player = typo3/contrib/flashmedia/flvplayer.swf
  forcePlayer = 1
}

lib.alternativeVideoUrl = TEXT
lib.alternativeVideoUrl.value = www.example.com/my_video.mp4

Explanation of the Fluid notation:

A. The first Fluid notation is taken from the above example. It represents the shorthand XML notation.

B. The second one looks a bit complicated on the first sight. But it should give you an impression that you can "chain" multiple ViewHelpers.

C. The third example represents the XML notation with starttag and endtag and the value in between.

D. The forth notation points to the fact, that you can pass nested ViewHelpers as data. (refered as the renderChildren feature). In our case, the data which is passed to the lib.flashPlayer TS object is taken from another TS object. Take into account, that any spaces and linebreaks also get passed and could cause unwanted effects.

5. Passing whole objects to TypoScript: Show the price of a product only when the product is available.

In the last example, we have a product object with a some properties like price, availability, description etc. The two properties which are of interest here are price and availability. We only want to show the price, if the product is available.

Fluid:

<f:cObject typoscriptObjectPath="lib.productPrice" data="{product}" />

TypoScript:

lib.productPrice = TEXT
lib.productPrice {
  field = price
  fieldRequired = available
  wrap = Price: |
}

Result:

Price: 99,- $

What we do here is to pass the full object to the cObject ViewHelper instead of only one property. This makes it possible to use all properties of the product object in the TypoScript cObject. In the above example we check if there's a value in the "product.available" property. Only if this condition is true, we show the product.price. Of course this task could also be solved by using the if/then/else ViewHelper.

Summary

The cObject Viewhelper combines the power of Fluid with TypoScript. Before you think about writing your own ViewHelper to solve a task, you should think about solving this task with TypoScript. Especially if you york with people which are new to Fluid, but TypoScript gurus. Not to forget that TypoScript Objects are far more configurable for admins than PHP code of Fluid ViewHelpers are. If you know some more tricks with TypoScript and Fluid, please share it with us and write a comment.

--> Back to the list of articles