Uri.image ViewHelper <f:uri.image>
ViewHelper to resize, crop or convert a given image (if required) and return the URL to this processed file.
This ViewHelper works for images within FAL storages, as well as system resources shipped with an extension and referenced via an EXT:/PKG: identifier. A system resource has none of FAL's stored metadata (crop, title, ...), so it only ever uses this ViewHelper's own arguments for that.
For an extension resource that should not go through image processing at all, use <f: instead.
External URLs are not processed and just returned as is.
Go to the source code of this ViewHelper: Uri\ImageViewHelper.php (GitHub).
Changed in version 14.2
When working with srcset in HTML, the
Image.srcset ViewHelper <f:image.srcset>
simplifies previous manual implementations
using
{f: for each image size manually.
Table of contents
Examples
Default
<f:uri.image src="EXT:my_extension/Resources/Public/typo3_logo.png" />Results in the following output within TYPO3 frontend:
typo3conf/
and the following output inside TYPO3 backend:
../
Image object
<f:uri.image image="{imageObject}" />Results in the following output within TYPO3 frontend:
fileadmin/
and the following output inside TYPO3 backend:
fileadmin/
Inline notation
{f:uri.image(src: 'EXT:my_extension/Resources/Public/typo3_logo.png', minWidth: 30, maxWidth: 40)}typo3temp/assets/images/[b4c0e7ed5c].pngDepending on your TYPO3s encryption key.
Non existing image
<f:uri.image src="NonExistingImage.png" />Could not get image resource for "NonExistingImage.png".Base 64
When the base64 argument is set to true, this ViewHelper returns a base 64 encoded version of the ressource.
<img src="{f:uri.image(base64: 'true',
src:'EXT:backend/Resources/Public/Images/typo3_logo_orange.svg')}">Will return the image encoded in base64:
<img src="data:image/svg+xml;base64,PHN2...cuODQ4LTYuNzU3Ii8+Cjwvc3ZnPgo=">This can be particularly useful inside Fluid or to prevent unneeded HTTP calls.
Arguments of the <f:uri.image> ViewHelper
absolute
-
- Type
- bool
- Default
- false
Force absolute URL
base64
-
- Type
- bool
- Default
- false
Return a base64 encoded version of the image
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
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.
image
-
- Type
- object
a FAL object (\TYPO3\CMS\Core\Resource\File or \TYPO3\CMS\Core\Resource\FileReference) or a public system resource, as returned by <f:resource>
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
src
-
- Type
- string
- Default
- ''
src
treatIdAsReference
-
- Type
- bool
- Default
- false
given src argument is a sys_file_reference record
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.