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>