image¶
Resizes a given image (if required) and renders the respective img tag.
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" />
Output in frontend:
<img alt="alt text" src="typo3conf/ext/myext/Resources/Public/typo3_logo.png" width="396" height="375" />
or in backend:
<img alt="alt text" src="../typo3conf/ext/viewhelpertest/Resources/Public/typo3_logo.png" width="396" height="375" />
Image Object¶
<f:image image="{imageObject}" />
Output:
<img alt="alt set in image record" src="fileadmin/_processed_/323223424.png" width="396" height="375" />
Inline notation¶
{f:image(src: 'EXT:viewhelpertest/Resources/Public/typo3_logo.png', alt: 'alt text', minWidth: 30, maxWidth: 40)}
Output:
<img alt="alt text" src="../typo3temp/assets/images/f13d79a526.png" width="40" height="38" />
Depending on your TYPO3s encryption key.
Other resource type (e.g. PDF)¶
<f:image src="fileadmin/user_upload/example.pdf" alt="foo" />
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" />
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