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

Source code

Go to the source code of this ViewHelper: ImageViewHelper.php (GitHub).

Arguments

The following arguments are available for the image ViewHelper:

absolute
Type
bool
Default
false
Force absolute URL
accesskey
Type
string
Keyboard shortcut to access this element
additionalAttributes
Type
array
Additional tag attributes. They will be added directly to the resulting HTML tag.
alt
Type
string
Specifies an alternate text for an image
aria
Type
array
Additional aria-* attributes. They will each be added with a "aria-" prefix.
class
Type
string
CSS class(es) for this element
crop
Type
string|bool|array
overrule cropping of image (setting to FALSE disables the cropping set in FileReference)
cropVariant
Type
string
Default
'default'
select a cropping variant, in case multiple croppings have been specified or stored in FileReference
data
Type
array
Additional data-* attributes. They will each be added with a "data-" prefix.
decoding
Type
string
Provides an image decoding hint to the browser. Can be "sync", "async" or "auto"
dir
Type
string
Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)
fileExtension
Type
string
Custom file extension to use
height
Type
string
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.
id
Type
string
Unique (in this file) identifier for this HTML element.
image
Type
object
a FAL object (\TYPO3\CMS\Core\Resource\File or \TYPO3\CMS\Core\Resource\FileReference)
ismap
Type
string
Specifies an image as a server-side image-map. Rarely used. Look at usemap instead
lang
Type
string
Language for this element. Use short names specified in RFC 1766
loading
Type
string
Native lazy-loading for images property. Can be "lazy", "eager" or "auto"
longdesc
Type
string
Specifies the URL to a document that contains a long description of an image
maxHeight
Type
int
maximum height of the image
maxWidth
Type
int
maximum width of the image
minHeight
Type
int
minimum height of the image
minWidth
Type
int
minimum width of the image
onclick
Type
string
JavaScript evaluated for the onclick event
src
Type
string
Default
''
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
style
Type
string
Individual CSS styles for this element
tabindex
Type
integer
Specifies the tab order of this element
title
Type
string
Tooltip text of element
treatIdAsReference
Type
bool
Default
false
given src argument is a sys_file_reference record
usemap
Type
string
Specifies an image as a client-side image-map
width
Type
string
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.