ViewHelper Documentation
v: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.
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
- data
- src
- relative
- width
- height
- maxW
- maxH
- minW
- minH
- format
- quality
- treatIdAsReference
- class
- dir
- id
- lang
- style
- title
- accesskey
- tabindex
- onclick
- usemap
- ismap
- alt
- srcset
additionalAttributes anySimpleType
Additional tag attributes. They will be added directly to the resulting HTML tag.
data anySimpleType
Additional data-* attributes. They will each be added with a "data-" prefix.
src anySimpleType
Path to the media resource(s). Can contain single or multiple paths for videos/audio (either CSV, array or implementing Traversable).
relative boolean
If FALSE media URIs are rendered absolute. URIs in backend mode are always absolute.
width string
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 string
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 integer
Maximum Width of the image. (no upscaling)
maxH integer
Maximum Height of the image. (no upscaling)
minW integer
Minimum Width of the image.
minH integer
Minimum Height of the image.
format string
Format of the processed file - also determines the target file format. If blank, TYPO3/IM/GM default is taken into account.
quality integer
Quality of the processed image. If blank/not present falls back to the default quality defined in install tool.
treatIdAsReference boolean
When TRUE treat given src argument as sys_file_reference record. Applies only to TYPO3 6.x and above.
class string
CSS class(es) for this element
dir string
Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)
id string
Unique (in this file) identifier for this HTML element.
lang string
Language for this element. Use short names specified in RFC 1766
style string
Individual CSS styles for this element
title string
Tooltip text of element
accesskey string
Keyboard shortcut to access this element
tabindex integer
Specifies the tab order of this element
onclick string
JavaScript evaluated for the onclick event
usemap string
A hash-name reference to a map element with which to associate the image.
ismap string
Specifies that its img element provides access to a server-side image map.
alt string
Equivalent content for those who cannot process images or who have image loading disabled.
srcset anySimpleType
list of width used for the srcset variants (either CSV, array or implementing Traversable)