image ViewHelper <f:image>

Resizes a given image (if required) and renders the respective img tag.

Note that image operations (cropping, scaling, converting) on non-FAL files (i.e. extension resources) may be changed in future TYPO3 versions, since those operations are coupled with FAL metadata. Each non-FAL image operation creates a "fake" FAL record, which may lead to problems.

External URLs are not processed. Only a given width and height will be set on the tag.

Examples

Default

<f:image src="EXT:myext/Resources/Public/typo3_logo.png" alt="alt text" />
Copied!

Output in frontend:

<img alt="alt text" src="typo3conf/ext/myext/Resources/Public/typo3_logo.png" width="396" height="375" />
Copied!

or in backend:

<img alt="alt text" src="../typo3conf/ext/viewhelpertest/Resources/Public/typo3_logo.png" width="396" height="375" />
Copied!

Image Object

<f:image image="{imageObject}" />
Copied!

Output:

<img alt="alt set in image record" src="fileadmin/_processed_/323223424.png" width="396" height="375" />
Copied!

Inline notation

{f:image(src: 'EXT:viewhelpertest/Resources/Public/typo3_logo.png', alt: 'alt text', minWidth: 30, maxWidth: 40)}
Copied!

Output:

<img alt="alt text" src="../typo3temp/assets/images/f13d79a526.png" width="40" height="38" />
Copied!

Depending on your TYPO3s encryption key.

Other resource type (e.g. PDF)

<f:image src="fileadmin/user_upload/example.pdf" alt="foo" />
Copied!

If your graphics processing library is set up correctly then it will output a thumbnail of the first page of your PDF document: <img src="fileadmin/_processed_/1/2/csm_example_aabbcc112233.gif" width="200" height="284" alt="foo">

Non-existent image

<f:image src="NonExistingImage.png" alt="foo" />
Copied!

Could not get image resource for "NonExistingImage.png".

Arguments

additionalAttributes

DataType
mixed
Required
false
Description
Additional tag attributes. They will be added directly to the resulting HTML tag.

data

DataType
mixed
Required
false
Description
Additional data-* attributes. They will each be added with a "data-" prefix.

aria

DataType
mixed
Required
false
Description
Additional aria-* attributes. They will each be added with a "aria-" prefix.

class

DataType
string
Required
false
Description
CSS class(es) for this element

dir

DataType
string
Required
false
Description
Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)

id

DataType
string
Required
false
Description
Unique (in this file) identifier for this HTML element.

lang

DataType
string
Required
false
Description
Language for this element. Use short names specified in RFC 1766

style

DataType
string
Required
false
Description
Individual CSS styles for this element

title

DataType
string
Required
false
Description
Tooltip text of element

accesskey

DataType
string
Required
false
Description
Keyboard shortcut to access this element

tabindex

DataType
integer
Required
false
Description
Specifies the tab order of this element

onclick

DataType
string
Required
false
Description
JavaScript evaluated for the onclick event

alt

DataType
string
Required
false
Description
Specifies an alternate text for an image

ismap

DataType
string
Required
false
Description
Specifies an image as a server-side image-map. Rarely used. Look at usemap instead

longdesc

DataType
string
Required
false
Description
Specifies the URL to a document that contains a long description of an image

usemap

DataType
string
Required
false
Description
Specifies an image as a client-side image-map

loading

DataType
string
Required
false
Description
Native lazy-loading for images property. Can be "lazy", "eager" or "auto"

decoding

DataType
string
Required
false
Description
Provides an image decoding hint to the browser. Can be "sync", "async" or "auto"

src

DataType
string
Required
false
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. If you already got a FAL object, consider using the $image parameter instead

treatIdAsReference

DataType
mixed
Required
false
Description
Given src argument is a sys_file_reference record

image

DataType
mixed
Required
false
Description
A FAL object (TYPO3CMSCoreResourceFile or TYPO3CMSCoreResourceFileReference)

crop

DataType
mixed
Required
false
Description
Overrule cropping of image (setting to FALSE disables the cropping set in FileReference)

cropVariant

DataType
string
Default
'default'
Required
false
Description
Select a cropping variant, in case multiple croppings have been specified or stored in FileReference

fileExtension

DataType
string
Required
false
Description
Custom file extension to use

width

DataType
string
Required
false
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.

height

DataType
string
Required
false
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.

minWidth

DataType
mixed
Required
false
Description
Minimum width of the image

minHeight

DataType
mixed
Required
false
Description
Minimum height of the image

maxWidth

DataType
mixed
Required
false
Description
Maximum width of the image

maxHeight

DataType
mixed
Required
false
Description
Maximum height of the image

absolute

DataType
mixed
Required
false
Description
Force absolute URL