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" />

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>

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"