Uri.image ViewHelper <f:uri.image>

Resizes a given image (if required) and returns its relative path.

External URLs are not processed and just returned as is.

Examples

Default

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

Results in the following output within TYPO3 frontend:

typo3conf/ext/myext/Resources/Public/typo3_logo.png

and the following output inside TYPO3 backend:

../typo3conf/ext/myext/Resources/Public/typo3_logo.png

Image Object

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

Results in the following output within TYPO3 frontend:

fileadmin/images/image.png

and the following output inside TYPO3 backend:

fileadmin/images/image.png

Inline notation

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

typo3temp/assets/images/[b4c0e7ed5c].png

Depending on your TYPO3s encryption key.

Non existing image

<f:uri.image src="NonExistingImage.png" />
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:uri.image>:

Name display Type Default
string
boolean
mixed
mixed
string 'default'
string
string
string
mixed
mixed
mixed
mixed
boolean
src
Type
string

Src

treatIdAsReference
Type
boolean

Given src argument is a sys_file_reference record

image
Type
mixed

Image

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