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