Attention

TYPO3 v9 has reached its end-of-life September 30th, 2021 and is not maintained by the community anymore. Looking for a stable version? Use the version switch on the top left.

You can order Extended Long Term Support (ELTS) here: TYPO3 ELTS.

Using FAL in the Frontend

TypoScript

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

Fluid

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 have a file reference and want to get its properties like Metadata, you have to access "originalResource" first. Example:

{filereference.originalResource.title}
{filereference.originalResource.description}
{filereference.originalResource.publicUrl}

Note: 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.

FLUIDTEMPLATE

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 up the \TYPO3\CMS\Frontend\DataProcessing\FilesProcessor class, whose task it 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: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}" />
        </div>
</f:for>