f:image

The work which was formerly carried out in an extension or in TypoScript is now available as a complete ViewHelper. You don’t have to just compress your images: you can re-size them on the server using PHP’s GDlib or using ImageMagick.

Properties

All the universal tag attributes

Inline usage example

{f:image(
   additionalAttributes: {foo: 'bar'},
   data: {foo: 'bar'},
   src: 'NULL',
   width: 'NULL',
   height: 'NULL',
   minWidth: 123,
   minHeight: 123,
   maxWidth: 123,
   maxHeight: 123,
   treatIdAsReference: 1,
   image: [anySimpleType],
   crop: [anySimpleType],
   cropVariant: 'default',
   absolute: 1,
   class: 'NULL',
   dir: 'NULL',
   id: 'NULL',
   lang: 'NULL',
   style: 'NULL',
   title: 'NULL',
   accesskey: 'NULL',
   tabindex: 123,
   onclick: 'NULL',
   alt: 'NULL',
   ismap: 'NULL',
   longdesc: 'NULL',
   usemap: 'NULL')}

Exclusive properties of the HTML tag

alt

Variable type
String
Description
An alternative text to be used in browsers which cannot display the image for any reason.

Default value

Mandatory
Yes

ismap

Variable type
String
Description
Specifies an image as a server-side image-map.
Default value
NULL
Mandatory
No

longdesc

Variable type
String
Description
An URI which references a web page containing a detailed explanation of the image.
Default value
NULL
Mandatory
No

usemap

Variable type
String
Description
Specifies an image as a client-side image-map.
Default value
NULL
Mandatory
No

Exclusive properties of this ViewHelper

absolute

Variable type
boolean
Description
Force an absolute URL, including the protocol, domain name and full image path.
Default value
FALSE
Mandatory
No

accesskey

Variable type
string
Description
Keyboard shortcut to access this element
Default value
Empty string
Mandatory
No

additionalAttributes

Variable type
array
Description
Additional tag attributes. They will be added directly to the resulting HTML tag.
Default value
NULL
Mandatory
No

alt

Variable type
string
Description
Specifies an alternate text for an image. If the FAL entry has an alternative text, this will be output automatically.
Default value
Empty string
Mandatory
No

class

Variable type
string
Description
CSS class(es) for this element
Default value
empty string
Mandatory
No

crop

Variable type
anySimpleType
Description
Overrule cropping of image (setting to FALSE disables the cropping set in FileReference)
Default value
NULL
Mandatory
No

cropVariant

Variable type
string
Description
Select a cropping variant, in case multiple croppings have been specified or stored in FileReference
Default value
‘default’
Mandatory
No

data

Variable type
array
Description
Additional data-* attributes. They will each be added with a “data-” prefix.
Default value
NULL
Mandatory
No

dir

Variable type
string
Description
Text direction for this HTML element. Allowed strings: “ltr” (left to right), “rtl” (right to left)
Default value
empty string
Mandatory
No

height

Variable type
string
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.
Default value
NULL
Mandatory
No

id

Variable type
string
Description
Unique (in this file) identifier for this HTML element.
Default value
empty string
Mandatory
No

image

Variable type
anySimpleType
Description
A FAL object
Default value
NULL
Mandatory
No

ismap

Variable type
string
Description
Specifies an image as a server-side image-map. Rarely used. Look at usemap instead
Default value
empty string
Mandatory
No

lang

Variable type
string
Description
Language for this element. Use short names specified in RFC 1766
Default value
empty string
Mandatory
No

longdesc

Variable type
string
Description
Specifies the URL to a document that contains a long description of an image
Default value
empty string
Mandatory
No

maxHeight

Variable type
integer
Description
The maximum height of the generated image
Default value
NULL
Mandatory
No

maxWidth

Variable type
integer
Description
The maximum width of the generated image
Default value
NULL
Mandatory
No

minHeight

Variable type
integer
Description
The minimum height of the generated image
Default value
NULL
Mandatory
No

minWidth

Variable type
integer
Description
The minimum width of the generated image
Default value
NULL
Mandatory
No

onclick

Variable type
string
Description
JavaScript evaluated against the onclick event
Default value
empty string
Mandatory
No

src

Variable type
string
Description
A path to a file, a combined FAL identifier or an UID (int). If treatIdAsReference is set, the integer is considered the uid of the sys_file_reference record. Because we’re dealing with an IMG_RESOURCE, you can also work with EXT: paths. If you already have a FAL object, consider using the image property instead.
Default value
NULL
Mandatory
Yes

style

Variable type
string
Description
Individual CSS styles for this element
Default value
empty string
Mandatory
No

tabindex

Variable type
integer
Description
Specifies the tab order of this element
Default value
NULL
Mandatory
No

title

Variable type
string
Description
Tooltip text of element
Default value
empty string
Mandatory
No

treatIdAsReference

Variable type
boolean
Description
Given src argument is a sys_file_reference record
Default value
FALSE
Mandatory
No

usemap

Variable type
string
Description
Specifies an image as a client-side image-map
Default value
FALSE
Mandatory
No

width

Variable type
string
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.
Default value
NULL
Mandatory
No

Examples

Output the image in its original resolution

<f:image src="fileadmin/user_upload/landscape.jpg" />

Output a smaller image

The proportions of the original image will be respected in this example.

<f:image src="fileadmin/user_upload/landscape.jpg" width="50" />

Re-size and crop an image

<f:image src="fileadmin/user_upload/landscape.jpg" alt="Landscape" width="100c" height="100c" />

The shorter side of the image will be set to 100px and the longer side will be cropped to 100px. Cropping takes place from the centre of the image by default. Use 100c-100 to crop from the top (or left), or 100c+100 to crop from the right (or bottom). In these examples, the value ‘100’ after the ‘c’ is a percentage value.