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 <f:image>:

Name display Type Default
mixed
mixed
mixed
string
string
string
string
string
string
string
integer
string
string
string
string
string
string
string
string
boolean
mixed
mixed
string 'default'
string
string
string
mixed
mixed
mixed
mixed
boolean
additionalAttributes
Type
mixed

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

data
Type
mixed

Additional data-* attributes. They will each be added with a "data-" prefix.

aria
Type
mixed

Additional aria-* attributes. They will each be added with a "aria-" prefix.

class
Type
string

CSS class(es) for this element

dir
Type
string

Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)

id
Type
string

Unique (in this file) identifier for this HTML element.

lang
Type
string

Language for this element. Use short names specified in RFC 1766

style
Type
string

Individual CSS styles for this element

title
Type
string

Tooltip text of element

accesskey
Type
string

Keyboard shortcut to access this element

tabindex
Type
integer

Specifies the tab order of this element

onclick
Type
string

JavaScript evaluated for the onclick event

alt
Type
string

Specifies an alternate text for an image

ismap
Type
string

Specifies an image as a server-side image-map. Rarely used. Look at usemap instead

longdesc
Type
string

Specifies the URL to a document that contains a long description of an image

usemap
Type
string

Specifies an image as a client-side image-map

loading
Type
string

Native lazy-loading for images property. Can be "lazy", "eager" or "auto"

decoding
Type
string

Provides an image decoding hint to the browser. Can be "sync", "async" or "auto"

src
Type
string

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

Given src argument is a sys_file_reference record

image
Type
mixed

A FAL object (TYPO3CMSCoreResourceFile or TYPO3CMSCoreResourceFileReference)

crop
Type
mixed

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

fileExtension
Type
string

Custom file extension to use

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.

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.

minWidth
Type
mixed

Minimum width of the image

minHeight
Type
mixed

Minimum height of the image

maxWidth
Type
mixed

Maximum width of the image

maxHeight
Type
mixed

Maximum height of the image

absolute
Type
boolean

Force absolute URL