Documentation · ViewHelper reference

XSD schema file | vhs master

Media / ImageViewHelper

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

  • Tag usage example

    <v:media.image src="[mixed]" relative="1" width="NULL" height="NULL" maxW="123" maxH="123" minW="123" minH="123" format="NULL" quality="123" treatIdAsReference="1" canvasWidth="123" canvasHeight="123" canvasColor="NULL" crop="NULL" class="NULL" dir="NULL" id="NULL" lang="NULL" style="NULL" title="NULL" accesskey="NULL" tabindex="123" onclick="NULL" usemap="NULL" ismap="''" alt="NULL" srcset="[mixed]" srcsetDefault="123">
    	<!-- tag content - may be ignored! -->
    </v:media.image>
  • Inline usage example

    {v:media.image(src: [mixed], relative: 1, width: 'NULL', height: 'NULL', maxW: 123, maxH: 123, minW: 123, minH: 123, format: 'NULL', quality: 123, treatIdAsReference: 1, canvasWidth: 123, canvasHeight: 123, canvasColor: 'NULL', crop: 'NULL', class: 'NULL', dir: 'NULL', id: 'NULL', lang: 'NULL', style: 'NULL', title: 'NULL', accesskey: 'NULL', tabindex: 123, onclick: 'NULL', usemap: 'NULL', ismap: '''', alt: 'NULL', srcset: [mixed], srcsetDefault: 123)}

Arguments

Argument Description Type
accesskey

Keyboard shortcut to access this element

string
alt

Equivalent content for those who cannot process images or who have image loading disabled.

string
canvasColor

Background color of an optional canvas to place the image on (hex triplet).

string
canvasHeight

Height of an optional canvas to place the image on.

integer
canvasWidth

Width of an optional canvas to place the image on.

integer
class

CSS class(es) for this element

string
crop

Information generated by the backend's graphical cropping UI

string
dir

Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)

string
format

Format of the processed file - also determines the target file format. If blank, TYPO3/IM/GM default is taken into account.

string
height

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.

string
id

Unique (in this file) identifier for this HTML element.

string
ismap

Specifies that its img element provides access to a server-side image map.

string
lang

Language for this element. Use short names specified in RFC 1766

string
maxH

Maximum Height of the image. (no upscaling)

integer
maxW

Maximum Width of the image. (no upscaling)

integer
minH

Minimum Height of the image.

integer
minW

Minimum Width of the image.

integer
onclick

JavaScript evaluated for the onclick event

string
quality

Quality of the processed image. If blank/not present falls back to the default quality defined in install tool.

integer
relative

If FALSE media URIs are rendered absolute. URIs in backend mode are always absolute.

boolean
src

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

mixed
srcset

List of width used for the srcset variants (either CSV, array or implementing Traversable)

mixed
srcsetDefault

Default width to use as a fallback for browsers that don't support srcset

integer
style

Individual CSS styles for this element

string
tabindex

Specifies the tab order of this element

integer
title

Tooltip text of element

string
treatIdAsReference

When TRUE treat given src argument as sysfilereference record. Applies only to TYPO3 6.x and above.

boolean
usemap

A hash-name reference to a map element with which to associate the image.

string
width

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.

string
Required attribute

Revision history

commit 86b105c6771d22fe9a43eb49c53bf70636067012
Author: Bjoern Fromme <*****@bjo3rn.com>
Date:   Wed Jan 30 09:40:02 2013 +0100

    [TASK] Move image and video VHs to ViewHelpers\Media subpackage

commit 0012bbe65be06254284280b195a2e6320a316757
Author: Bjoern Fromme <*****@bjo3rn.com>
Date:   Wed Jan 30 09:44:48 2013 +0100

    [TASK] Fix wrong placement of class properties

commit 49e420d2ea1ed07923a3e256a6a152b41c306869
Author: Claus Due <*****@wildside.dk>
Date:   Fri Feb 1 10:36:57 2013 +0100

    [TASK] Make src argument global for all media related VHs and allow array or Traversable objects

commit 4926809a7b528faddd4b9fa575bda5955601beed
Author: Claus Due <*****@wildside.dk>
Date:   Fri Feb 1 10:47:31 2013 +0100

    [TASK] Refactor Media / AbstractImage to Media / Image / AbstractImage

commit da31bad1d9bb058c072ddb5591e8ed907a1ae8e1
Author: Claus Due <*****@namelesscoder.net>
Date:   Tue Dec 31 23:08:37 2013 +0100

    [TASK] Happy new year!

commit 52bd6e41ccfef3d8193b350153912a9716e6a087
Author: Benjamin Rau <*****@codearts.at>
Date:   Tue Apr 1 21:09:00 2014 +0200

    [TASK] CGL compliance

commit da7677bc74f14e9a9300e4ba4487e52c3cb97642
Author: Claus Due <*****@namelesscoder.net>
Date:   Sun Apr 20 01:13:33 2014 +0200

    [TASK] Switch to namespaces

commit 8bb2fc5ee124ba19b0a0ab8e061c9a153fc4651f
Author: Xaver Maierhofer <*****@xwissen.info>
Date:   Sun Jan 18 17:56:13 2015 +0100

    [TASK] Reference Copyright to license.md file