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="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"/>

Source code¶

Go to the source code of this ViewHelper: ThumbnailViewHelper.php (GitHub).

Arguments¶

The following arguments are available for <be:thumbnail>:

Name	Type	Default
additionalAttributes	mixed
data	mixed
aria	mixed
class	string
dir	string
id	string
lang	string
style	string
title	string
accesskey	string
tabindex	integer
onclick	string
alt	string
src	string
treatIdAsReference	boolean
image	mixed
crop	mixed
cropVariant	string	'default'
width	string
height	string
minWidth	mixed
minHeight	mixed
maxWidth	mixed
maxHeight	mixed
context	string	'Image.Preview'

additionalAttributes ¶

Type: mixed
Required: true

Additional tag attributes. They will be added directly to the resulting HTML tag.

data ¶

Type: mixed
Required: true

Additional data-* attributes. They will each be added with a "data-" prefix.

aria ¶

Type: mixed
Required: true

Additional aria-* attributes. They will each be added with a "aria-" prefix.

class ¶

Type: string
Required: true

CSS class(es) for this element

dir ¶

Type: string
Required: true

Text direction for this HTML element. Allowed strings: "ltr" (left to right), "rtl" (right to left)

id ¶

Type: string
Required: true

Unique (in this file) identifier for this HTML element.

lang ¶

Type: string
Required: true

Language for this element. Use short names specified in RFC 1766

style ¶

Type: string
Required: true

Individual CSS styles for this element

title ¶

Type: string
Required: true

Tooltip text of element

accesskey ¶

Type: string
Required: true

Keyboard shortcut to access this element

tabindex ¶

Type: integer
Required: true

Specifies the tab order of this element

onclick ¶

Type: string
Required: true

JavaScript evaluated for the onclick event

alt ¶

Type: string
Required: true

Specifies an alternate text for an image

src ¶

Type: string
Required: true

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
Required: true

Given src argument is a sys_file_reference record

image ¶

Type: mixed
Required: true

A FAL object (TYPO3CMSCoreResourceFile or TYPO3CMSCoreResourceFileReference)

crop ¶

Type: mixed
Required: true

Overrule cropping of image (setting to FALSE disables the cropping set in FileReference)

cropVariant ¶

Type: string
Required: true
Default: 'default'

Select a cropping variant, in case multiple croppings have been specified or stored in FileReference

width ¶

Type: string
Required: true

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
Required: true

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
Required: true

Minimum width of the image

minHeight ¶

Type: mixed
Required: true

Minimum height of the image

maxWidth ¶

Type: mixed
Required: true

Maximum width of the image

maxHeight ¶

Type: mixed
Required: true

Maximum height of the image

context ¶

Type: string
Required: true
Default: 'Image.Preview'

Context for image rendering

Thumbnail ViewHelper <be:thumbnail>¶