Thumbnail ViewHelper <be:thumbnail>¶

ViewHelper for the backend which generates an <img> tag with the special URI to render thumbnails deferred.

<be:thumbnail image="{file.resource}" width="{thumbnail.width}" height="{thumbnail.height}" />

<img src="/typo3/thumbnails?token=&parameters={"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"/>

{be:thumbnail(image: file.resource, maxWidth: thumbnail.width, maxHeight: thumbnail.height)}

<img src="/typo3/thumbnails?token=&parameters={"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 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.