Attention
TYPO3 v11 has reached end-of-life as of October 31th 2024 and is no longer being maintained. Use the version switcher on the top left of this page to select documentation for a supported version of TYPO3.
Need more time before upgrading? You can purchase Extended Long Term Support (ELTS) for TYPO3 v11 here: TYPO3 ELTS.
Media ViewHelper <f:media>
Render a given media file with the correct html tag.
It asks the Renderer for the correct Renderer class and if not found it falls
back to the Image as that is the "Renderer" class for images in Fluid context.
Examples
Image Object
<f:media file="{file}" width="400" height="375" />
Output:
<img alt="alt set in image record" src="fileadmin/_processed_/323223424.png" width="396" height="375" />
MP4 Video Object
<f:media file="{file}" width="400" height="375" />
Output:
<video width="400" height="375" controls><source src="fileadmin/user_upload/my-video.mp4" type="video/mp4"></video>
MP4 Video Object with loop and autoplay option set
<f:media file="{file}" width="400" height="375" additionalConfig="{loop: '1', autoplay: '1'}" />
Output:
<video width="400" height="375" controls loop><source src="fileadmin/user_upload/my-video.mp4" type="video/mp4"></video>
Source code
Go to the source code of this ViewHelper: MediaViewHelper.php (GitHub).
Arguments
The following arguments are available for <f::
additionalAttributes
-
- Type
- mixed
Additional tag attributes. They will be added directly to the resulting HTML tag.
data
-
- Type
- mixed
Additional data-* attributes. They will each be added with a "data-" prefix.
aria
-
- Type
- mixed
Additional aria-* attributes. They will each be added with a "aria-" prefix.
class
-
- Type
- string
CSS class(es) for this element
dir
-
- Type
- string
Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)
id
-
- Type
- string
Unique (in this file) identifier for this HTML element.
lang
-
- Type
- string
Language for this element. Use short names specified in RFC 1766
style
-
- Type
- string
Individual CSS styles for this element
title
-
- Type
- string
Tooltip text of element
accesskey
-
- Type
- string
Keyboard shortcut to access this element
tabindex
-
- Type
- integer
Specifies the tab order of this element
onclick
-
- Type
- string
JavaScript evaluated for the onclick event
alt
-
- Type
- string
Specifies an alternate text for an image
file
-
- Type
- mixed
- Required
true
File
additionalConfig
-
- Type
- mixed
- Default
array()
This array can hold additional configuration that is passed though to the Renderer object
width
-
- Type
- string
This can be a numeric value representing the fixed width of in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.
height
-
- Type
- string
This can be a numeric value representing the fixed height in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.
cropVariant
-
- Type
- string
- Default
'default'
Select a cropping variant, in case multiple croppings have been specified or stored in FileReference
fileExtension
-
- Type
- string
Custom file extension to use for images
loading
-
- Type
- string
Native lazy-loading for images property. Can be "lazy", "eager" or "auto". Used on image files only.
decoding
-
- Type
- string
Provides an image decoding hint to the browser. Can be "sync", "async" or "auto"