Thumbnail ViewHelper <be:thumbnail>
¶
Note
This ViewHelper is not available by default.
Import its namespace
{namespace be=TYPO3\CMS\Backend\ViewHelpers\}
in the Fluid file or
xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers/"
in the opening HTML tag.
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}" />
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"/>
Inline notation¶
{be:thumbnail(image: file.resource, maxWidth: thumbnail.width, maxHeight: thumbnail.height)}
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"/>
Source code¶
Go to the source code of this ViewHelper: ThumbnailViewHelper.php (GitHub).
Arguments¶
The following arguments are available for <be:thumbnail>
:
-
additionalAttributes
¶ -
- Type
- mixed
Additional tag attributes. They will be added directly to the resulting HTML tag.
-
data
¶ -
- Type
- mixed
Additional data-* attributes. They will each be added with a "data-" prefix.
-
aria
¶ -
- Type
- mixed
Additional aria-* attributes. They will each be added with a "aria-" prefix.
-
class
¶ -
- Type
- string
CSS class(es) for this element
-
dir
¶ -
- Type
- string
Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)
-
id
¶ -
- Type
- string
Unique (in this file) identifier for this HTML element.
-
lang
¶ -
- Type
- string
Language for this element. Use short names specified in RFC 1766
-
style
¶ -
- Type
- string
Individual CSS styles for this element
-
title
¶ -
- Type
- string
Tooltip text of element
-
accesskey
¶ -
- Type
- string
Keyboard shortcut to access this element
-
tabindex
¶ -
- Type
- integer
Specifies the tab order of this element
-
onclick
¶ -
- Type
- string
JavaScript evaluated for the onclick event
-
alt
¶ -
- Type
- string
Specifies an alternate text for an image
-
ismap
¶ -
- Type
- string
Specifies an image as a server-side image-map. Rarely used. Look at usemap instead
-
longdesc
¶ -
- Type
- string
Specifies the URL to a document that contains a long description of an image
-
usemap
¶ -
- Type
- string
Specifies an image as a client-side image-map
-
loading
¶ -
- Type
- string
Native lazy-loading for images property. Can be "lazy", "eager" or "auto"
-
decoding
¶ -
- Type
- string
Provides an image decoding hint to the browser. Can be "sync", "async" or "auto"
-
src
¶ -
- Type
- string
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
¶ -
- Type
- boolean
Given src argument is a sys_file_reference record
-
image
¶ -
- Type
- mixed
A FAL object (TYPO3CMSCoreResourceFile or TYPO3CMSCoreResourceFileReference)
-
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
-
context
¶ -
- Type
- string
- Default
'Image.Preview'
Context for image rendering