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 the media ViewHelper:

accesskey

accesskey
Type
string
Keyboard shortcut to access this element

additionalAttributes

additionalAttributes
Type
array
Additional tag attributes. They will be added directly to the resulting HTML tag.

additionalConfig

additionalConfig
Type
array
Default
array ( )
This array can hold additional configuration that is passed though to the Renderer object

alt

alt
Type
string
Specifies an alternate text for an image

aria

aria
Type
array
Additional aria-* attributes. They will each be added with a "aria-" prefix.

class

class
Type
string
CSS class(es) for this element

cropVariant

cropVariant
Type
string
Default
'default'
select a cropping variant, in case multiple croppings have been specified or stored in FileReference

data

data
Type
array
Additional data-* attributes. They will each be added with a "data-" prefix.

decoding

decoding
Type
string
Provides an image decoding hint to the browser. Can be "sync", "async" or "auto"

dir

dir
Type
string
Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)

file

file
Type
object
Required
1
File

fileExtension

fileExtension
Type
string
Custom file extension to use for images

height

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.

id

id
Type
string
Unique (in this file) identifier for this HTML element.

lang

lang
Type
string
Language for this element. Use short names specified in RFC 1766

loading

loading
Type
string
Native lazy-loading for images property. Can be "lazy", "eager" or "auto". Used on image files only.

onclick

onclick
Type
string
JavaScript evaluated for the onclick event

style

style
Type
string
Individual CSS styles for this element

tabindex

tabindex
Type
integer
Specifies the tab order of this element

title

title
Type
string
Tooltip text of element

width

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.