Media ViewHelper <f:media>
ViewHelper to render a given media file (audio/video/images) with the correct HTML tag.
It utilizes the Renderer to determine the correct Renderer class. When no renderer can be resolved, it will fall back to use the default Image for regular images.
Go to the source code of this ViewHelper: MediaViewHelper.php (GitHub).
Table of contents
Examples
Image object
packages/my_extension/Resources/Private/Templates/Media/Show.fluid.html
<f:media file="{file}" width="400" height="375" />
Copied!
Output
<img alt="alt set in image record" src="fileadmin/_processed_/323223424.png" width="396" height="375" />
Copied!
MP4 video object
packages/my_extension/Resources/Private/Templates/Media/Show.fluid.html
<f:media file="{file}" width="400" height="375" />
Copied!
Output
<video width="400" height="375" controls><source src="fileadmin/user_upload/my-video.mp4" type="video/mp4"></video>
Copied!
MP4 video object with loop and autoplay option set
packages/my_extension/Resources/Private/Templates/Media/Show.fluid.html
<f:media file="{file}" width="400" height="375" additionalConfig="{loop: '1', autoplay: '1'}" />
Copied!
Output
<video width="400" height="375" controls loop><source src="fileadmin/user_upload/my-video.mp4" type="video/mp4"></video>
Copied!
Arguments of the <f:media> ViewHelper
Allows arbitrary arguments
This ViewHelper allows you to pass arbitrary arguments not defined below
directly to the HTML tag created. This includes custom data- arguments.
additionalAttributes
-
- Type
- array
Additional tag attributes. They will be added directly to the resulting HTML tag.
additionalConfig
-
- Type
- array
- Default
- array ( )
This array can hold additional configuration that is passed though to the Renderer object
aria
-
- Type
- array
Additional aria-* attributes. They will each be added with a "aria-" prefix.
cropVariant
-
- Type
- string
- Default
- 'default'
select a cropping variant, in case multiple croppings have been specified or stored in FileReference
data
-
- Type
- array
Additional data-* attributes. They will each be added with a "data-" prefix.
decoding
-
- Type
- string
Provides an image decoding hint to the browser. Can be "sync", "async" or "auto"
file
-
- Type
- object
- Required
- 1
File
fileExtension
-
- Type
- string
Custom file extension to use for images
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.
loading
-
- Type
- string
Native lazy-loading for images property. Can be "lazy", "eager" or "auto". Used on image files only.
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.