Media ViewHelper <f:media>

Render a given media file with the correct html tag.

It asks the RendererRegistry for the correct Renderer class and if not found it falls back to the ImageViewHelper as that is the "Renderer" class for images in Fluid context.

Examples

Image Object

<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

<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

<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!

Source code

Go to the source code of this ViewHelper: MediaViewHelper.php (GitHub).

Arguments

The following arguments are available for <f:media>:

Name Type Default
additionalAttributes
 mixed
data
 mixed
aria
 mixed
class
 string
dir
 string
id
 string
lang
 string
style
 string
title
 string
accesskey
 string
tabindex
 integer
onclick
 string
alt
 string
file
 mixed
additionalConfig
 mixed array ()
width
 string
height
 string
cropVariant
 string 'default'
fileExtension
 string
loading
 string
decoding
 string
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"