thumbnail ViewHelper <backend: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}" />

Output:

<img src="https://www.example.com/typo3/image/process?token=XYZ&id=1160"
     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="https://www.example.com/typo3/image/process?token=XYZ&id=1160"
     width="64"
     height="64"
     alt="alt set in image record"
     title="title set in image record"/>

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

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

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

context

DataType

string

Default

'Image.Preview'

Required

false

Description

Context for image rendering