---
title: "Using FAL in the frontend"
manual: "TYPO3 Explained"
version: "13.4"
permalink: "https://docs.typo3.org/permalink/t3coreapi:fal-using-fal-frontend@13.4"
source: "ApiOverview/Fal/UsingFal/Frontend.rst"
rendered: "2026-09-18T05:52:58+00:00"
---

# Using FAL in the frontend {#using-fal-in-the-frontend}

-   [TypoScript](https://docs.typo3.org/permalink/t3coreapi:typoscript@13.4)
-   [Fluid](https://docs.typo3.org/permalink/t3coreapi:fluid@13.4)

## TypoScript {#typoscript}

Using FAL relations in the frontend via
TypoScript is achieved using the `FILES` content object, which is
described in detail in the [TypoScript Reference](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/ContentObjects/Files/Index.html#cobj-files).

## Fluid {#fluid}

### The ImageViewHelper {#the-imageviewhelper}

If you have the uid of a file reference, you can use it directly in the
[\\TYPO3\\CMS\\Fluid\\ViewHelpers\\ImageViewHelper](https://docs.typo3.org/other/typo3/view-helper-reference/13.4/en-us/Global/Image.html#typo3-fluid-image):

```html
<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 {#get-file-properties}

Example:

```html
{fileReference.title}
{fileReference.description}
{fileReference.publicUrl}
```

> [!TIP]
> If you are in [Extbase](https://docs.typo3.org/permalink/t3coreapi:extbase@13.4) context, you usually have a
> `\TYPO3\CMS\Extbase\Domain\Model\FileReference`
> [domain model](https://docs.typo3.org/permalink/t3coreapi:extbase-model@13.4) 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:

```html
{fileReference.originalResource.title}
{fileReference.originalResource.description}
{fileReference.originalResource.publicUrl}
```

> [!NOTE]
> The system extension [filemetadata](https://packagist.org/packages/typo3/cms-filemetadata) (if installed) provides some additional
> meta data fields for files, for example `creator`, `publisher`,
> `copyright` and others. To access those fields
> [(see list)](https://docs.typo3.org/permalink/t3coreapi:fal-architecture-database-sys-file-metadata@13.4) in the frontend, you
> have to use the `getProperties()` proxy method, which makes all keys
> available via `fileReference.properties.XXX`:

```html
{fileReference.properties.copyright}
{fileReference.properties.creator}
```

> [!TIP]
> **Hint**
>
> 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.

### FLUIDTEMPLATE {#fluidtemplate}

More often the file reference information will not be available explicitly. The
[FLUIDTEMPLATE](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/ContentObjects/Fluidtemplate/Index.html#cobj-fluidtemplate) content object has a
[dataProcessing](https://docs.typo3.org/m/typo3/reference-typoscript/13.4/en-us/DataProcessing/Index.html#cobj-fluidtemplate-properties-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:

**EXT:my_extension/Configuration/Sets/MyExtension/setup.typoscript**

```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:

**EXT:my_extension/Resources/Private/Templates/Carousel.html**

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