Thumbnail ViewHelper <be:thumbnail>
ViewHelper for the backend which generates an <img> tag with the special URI to render thumbnails deferred.
Examples
Default
<be:thumbnail image="{file.resource}" width="{thumbnail.width}" height="{thumbnail.height}" />
Copied!
Output:
<img src="/typo3/thumbnails?token=¶meters={"fileId":1,"configuration":{"_context":"Image.Preview","maxWidth":64,"maxHeight":64}}&hmac="
width="64"
height="64"
alt="alt set in image record"
title="title set in image record"/>
Copied!
Inline notation
{be:thumbnail(image: file.resource, maxWidth: thumbnail.width, maxHeight: thumbnail.height)}
Copied!
Output:
<img src="/typo3/thumbnails?token=¶meters={"fileId":1,"configuration":{"_context":"Image.Preview","maxWidth":64,"maxHeight":64}}&hmac="
width="64"
height="64"
alt="alt set in image record"
title="title set in image record"/>
Copied!
Source code
Go to the source code of this ViewHelper: ThumbnailViewHelper.php (GitHub).
Arguments
Allows arbitrary arguments
This ViewHelper allows you to pass arbitrary arguments not defined below directly
to the HTML tag created. This includes custom
data- arguments.
The following arguments are available for the thumbnail ViewHelper:
absolute
-
- Type
- bool
- Default
- false
Force absolute URL
accesskey
-
- Type
- string
Keyboard shortcut to access this element
additionalAttributes
-
- Type
- array
Additional tag attributes. They will be added directly to the resulting HTML tag.
alt
-
- Type
- string
Specifies an alternate text for an image
aria
-
- Type
- array
Additional aria-* attributes. They will each be added with a "aria-" prefix.
class
-
- Type
- string
CSS class(es) for this element
context
-
- Type
- string
- Default
- 'Image.Preview'
context for image rendering
crop
-
- Type
- string|bool
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
data
-
- Type
- array
Additional data-* attributes. They will each be added with a "data-" prefix.
decoding
-
- Type
- string
Provides an image decoding hint to the browser. Can be "sync", "async" or "auto"
dir
-
- Type
- string
Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)
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.
id
-
- Type
- string
Unique (in this file) identifier for this HTML element.
image
-
- Type
- object
a FAL object (\TYPO3\CMS\Core\Resource\File or \TYPO3\CMS\Core\Resource\FileReference)
ismap
-
- Type
- string
Specifies an image as a server-side image-map. Rarely used. Look at usemap instead
lang
-
- Type
- string
Language for this element. Use short names specified in RFC 1766
loading
-
- Type
- string
Native lazy-loading for images property. Can be "lazy", "eager" or "auto"
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
onclick
-
- Type
- string
JavaScript evaluated for the onclick event
src
-
- Type
- string
- Default
- ''
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
style
-
- Type
- string
Individual CSS styles for this element
tabindex
-
- Type
- integer
Specifies the tab order of this element
title
-
- Type
- string
Tooltip text of element
treatIdAsReference
-
- Type
- bool
- Default
- false
given src argument is a sys_file_reference record
usemap
-
- Type
- string
Specifies an image as a client-side image-map
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.