media.image ViewHelper `<vhs:media.image>`¶

Renders an image tag for the given resource including all valid HTML5 attributes. Derivates of the original image are rendered if the provided (optional) dimensions differ.

## rendering responsive Images variants

You can use the srcset argument to generate several differently sized versions of this image that will be added as a srcset argument to the img tag. enter a list of widths in the srcset to genereate copies of the same crop + ratio but in the specified widths. Put the width at the start that you want to use as a fallback to be shown when no srcset functionality is supported.

Example¶

<v:media.image src="fileadmin/some-image.png" srcset="480,768,992,1200" />

Browser Support¶

To have the widest Browser-Support you should consider using a polyfill like: http://scottjehl.github.io/picturefill

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.

src¶

DataType: mixed
Required: true
Description: Path to the media resource(s). Can contain single or multiple paths for videos/audio (either CSV, array or implementing Traversable).

relative¶

DataType: boolean
Default: true
Required: false
Description: If FALSE media URIs are rendered absolute. URIs in backend mode are always absolute.

width¶

DataType: string
Required: false
Description: Width of the image. This can be a numeric value representing the fixed width of the image 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: Height of the image. This can be a numeric value representing the fixed height of the image in pixels. But you can also perform simple calculations by adding "m" or "c" to the value. See imgResource.width for possible options.

maxW¶

DataType: integer
Required: false
Description: Maximum Width of the image. (no upscaling)

maxH¶

DataType: integer
Required: false
Description: Maximum Height of the image. (no upscaling)

minW¶

DataType: integer
Required: false
Description: Minimum Width of the image.

minH¶

DataType: integer
Required: false
Description: Minimum Height of the image.

format¶

DataType: string
Required: false
Description: Format of the processed file - also determines the target file format. If blank, TYPO3/IM/GM default is taken into account.

quality¶

DataType: integer
Default: 90
Required: false
Description: Quality of the processed image. If blank/not present falls back to the default quality defined in install tool.

treatIdAsReference¶

DataType: boolean
Required: false
Description: When TRUE treat given src argument as sys_file_reference record. Applies only to TYPO3 6.x and above.

canvasWidth¶

DataType: integer
Required: false
Description: Width of an optional canvas to place the image on.

canvasHeight¶

DataType: integer
Required: false
Description: Height of an optional canvas to place the image on.

canvasColor¶

DataType: string
Required: false
Description: Background color of an optional canvas to place the image on (hex triplet).

transparencyColor¶

DataType: string
Required: false
Description: Color to set transparent when using canvas feature (hex triplet).

crop¶

DataType: string
Required: false
Description: Information generated by the backend's graphical cropping UI

graceful¶

DataType: boolean
Required: false
Description: Set to TRUE to ignore files that cannot be loaded. Default behavior is to throw an Exception.

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

usemap¶

DataType: string
Required: false
Description: A hash-name reference to a map element with which to associate the image.

ismap¶

DataType: string
Required: false
Description: Specifies that its img element provides access to a server-side image map.

alt¶

DataType: string
Required: true
Description: Equivalent content for those who cannot process images or who have image loading disabled.

srcset¶

DataType: mixed
Required: false
Description: List of width used for the srcset variants (either CSV, array or implementing Traversable)

srcsetDefault¶

DataType: integer
Required: false
Description: Default width to use as a fallback for browsers that don't support srcset

media.image ViewHelper <vhs:media.image>¶