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!

Arguments

additionalAttributes

DataType
mixed
Required
false
Description
Additional tag attributes. They will be added directly to the resulting HTML tag.

data

DataType
mixed
Required
false
Description
Additional data-* attributes. They will each be added with a "data-" prefix.

aria

DataType
mixed
Required
false
Description
Additional aria-* attributes. They will each be added with a "aria-" prefix.

class

DataType
string
Required
false
Description
CSS class(es) for this element

dir

DataType
string
Required
false
Description
Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)

id

DataType
string
Required
false
Description
Unique (in this file) identifier for this HTML element.

lang

DataType
string
Required
false
Description
Language for this element. Use short names specified in RFC 1766

style

DataType
string
Required
false
Description
Individual CSS styles for this element

title

DataType
string
Required
false
Description
Tooltip text of element

accesskey

DataType
string
Required
false
Description
Keyboard shortcut to access this element

tabindex

DataType
integer
Required
false
Description
Specifies the tab order of this element

onclick

DataType
string
Required
false
Description
JavaScript evaluated for the onclick event

alt

DataType
string
Required
false
Description
Specifies an alternate text for an image

file

DataType
mixed
Required
true
Description
File

additionalConfig

DataType
mixed
Default
array ()
Required
false
Description
This array can hold additional configuration that is passed though to the Renderer object

width

DataType
string
Required
false
Description
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

DataType
string
Required
false
Description
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

DataType
string
Default
'default'
Required
false
Description
Select a cropping variant, in case multiple croppings have been specified or stored in FileReference

fileExtension

DataType
string
Required
false
Description
Custom file extension to use for images

loading

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

decoding

DataType
string
Required
false
Description
Provides an image decoding hint to the browser. Can be "sync", "async" or "auto"