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 detail 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¶
Example:
{fileReference.title}
{fileReference.description}
{fileReference.publicUrl}
Tip
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:
{fileReference.originalResource.title}
{fileReference.originalResource.description}
{fileReference.originalResource.publicUrl}
Note
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
:
{fileReference.properties.copyright}
{fileReference.properties.creator}
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¶
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}" />
</div>
</f:for>