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 anIMG_RESOURCE
, you can also work withEXT:
paths. If you already have a FAL object, consider using theimage
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.