Documentation · ViewHelper reference

XSD schema file | vhs 2.1.3

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.

  • Tag usage example

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

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

Arguments

Argument Description Type
accesskey

Keyboard shortcut to access this element

string
additionalAttributes

Additional tag attributes. They will be added directly to the resulting HTML tag.

array
alt

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

string
class

CSS class(es) for this element

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