Using FAL in the frontend


Using FAL relations in the frontend via TypoScript is achieved using the FILES content object, which is described in detail in the TypoScript Reference.


The ImageViewHelper

If you have the uid of a file reference, you can use it directly in the \TYPO3\CMS\Fluid\ViewHelpers\ImageViewHelper:

<f:image image="{image}" />

Here {image} is an object of one of the following types:

  • \TYPO3\CMS\Core\Resource\File

  • \TYPO3\CMS\Core\Resource\FileReference

  • \TYPO3\CMS\Extbase\Domain\Model\FileReference

Get file properties




If you are in Extbase context, you usually have a \TYPO3\CMS\Extbase\Domain\Model\FileReference domain model instead of a "pure" \TYPO3\CMS\Core\Resource\FileReference object. In order to get the meta data, you need to resolve the \TYPO3\CMS\Core\Resource\FileReference first by accessing the originalResource property:



The system extension filemetadata (if installed) provides some additional meta data fields for files, for example creator, publisher, copyright and others. To access those fields in the frontend, you have to use a proxy method named properties:



The additional fields provided by the "filemetadata" extension are not listed as properties when you use <f:debug> on a \TYPO3\CMS\Core\Resource\FileReference object.

Some metadata fields, like title and description, can be entered either in the referenced file itself or in the reference or both. TYPO3 automatically merges both sources when you access originalResource in Fluid. So originalResource returns the merged value. Values which are entered in the reference will override values from the file itself.


More often the file reference information will not be available explicitly. The FLUIDTEMPLATE content object has a dataProcessing property which can be used to call the \TYPO3\CMS\Frontend\DataProcessing\FilesProcessor class, whose task is to load all media referenced for the current database record being processed.

This requires first a bit of TypoScript:

lib.carousel = FLUIDTEMPLATE
lib.carousel {
  file = EXT:my_extension/Resources/Private/Templates/Carousel.html
  dataProcessing.10 = TYPO3\CMS\Frontend\DataProcessing\FilesProcessor
  dataProcessing.10 {
    references {
      table = tt_content
      fieldName = image
    as = images

This will fetch all files related to the content element being rendered (referenced in the image field) and make them available in a variable called images. This can then be used in the Fluid template:

<f:for each="{images}" as="image">
    <div class="slide">
        <f:image image="{image.originalFile}" />