LIA Imageserver

Extension key: lia_imageserver
Package name: lia/lia_imageserver
Version: 1.2
Language: en
Author: LOUIS TYPO3 Developers
License: This document is published under the GNU General Public License v2.0 or later.
Rendered: Wed, 16 Sep 2026 09:22:52 +0000

Responsive images for TYPO3 Fluid: <picture> and srcset rendering with crop variants, WebP sources, lazy loading and fetch priority. Works with TYPO3's own image processing out of the box. An external image server (for example imgix via lia/lia_middleware_imgix) can take over processing and delivery through the same ViewHelpers.

Installation

How to install the extension in Composer-based and Classic TYPO3 installations.

Configuration

Extension settings and how to override the responsive image template.

Usage

Examples and arguments of the three ViewHelpers.

ViewHelper reference

Complete argument reference generated from the source code.

Frequently Asked Questions (FAQ)

These questions have been frequently asked.

How to get help

Where to get help and how to report issues you found.

Installation

Install with Composer

Install the extension via Composer:

Terminal

composer req lia/lia_imageserver

Install in Classic Mode

Download the extension from the TYPO3 Extension Repository at https://extensions.typo3.org/extension/lia_imageserver and install it in the Extension Manager.

Include the TypoScript

Include the static template LIA Imageserver in your site template (Site Management > TypoScript, tab Advanced Options). It provides the constant for the responsive image template path, see Override the responsive image template.

Configuration

Extension configuration

The settings live in Admin Tools > Settings > Extension Configuration > lia_imageserver.

allowedFileExtensions

Type: string
Default: (empty)
Path: $GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['lia_imageserver']['allowedFileExtensions']

Comma-separated list of file extensions that are handed to the image server. When empty, the extension falls back to $GLOBALS['TYPO3_CONF_VARS']['GFX']['imagefile_ext']. A value set in the image server configuration of a file storage takes precedence over this global setting.

additionalParameter

Type: string
Default: (empty)
Path: $GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['lia_imageserver']['additionalParameter']

Additional parameter that is copied into the image server configuration of every file storage. The image server adapter decides how the value is used.

Note

The configuration form also shows the field Image Quality (imageQuality). This extension does not read that value.

Override the responsive image template

<lim:widget.responsiveImage> renders the template file set by the TypoScript constant plugin.tx_liaimageserver.settings.responsiveImageViewHelperTemplatePath. The constant expects the path to the template file.

Copy EXT:lia_imageserver/Resources/Private/Templates/ViewHelpers/Widget/ResponsiveImage/Index.html into your site package and adjust it.

Point the constant to the new file:

EXT:my_sitepackage/Configuration/TypoScript/constants.typoscript

plugin.tx_liaimageserver.settings {
    responsiveImageViewHelperTemplatePath = EXT:my_sitepackage/Resources/Private/Templates/ViewHelpers/Widget/ResponsiveImage/Index.html
}

Make sure the static template LIA Imageserver and your own TypoScript are included, see Include the TypoScript.

Usage

The extension ships three Fluid ViewHelpers:

lim:widget.responsiveImage renders a complete <picture> element with media queries, source sets and optional WebP sources.
lim:image extends <f:image> with source sets, WebP support and image server options.
lim:uri.image extends <f:uri.image> with image server options.

Namespace

The namespace lim is registered globally in ext_localconf.php. To get IDE support, declare it on top of your template:

EXT:my_sitepackage/Resources/Private/Templates/Example.html

<html xmlns:lim="http://typo3.org/ns/LIA/LiaImageserver/ViewHelpers"
      data-namespace-typo3-fluid="true">

Best practice: source sets as variables

Inline notation is always possible in Fluid. The syntax gets messy as soon as you deal with nested arrays, and sourceSets is a nested array. Store the source sets in a Fluid variable with <f:variable> and pass the variable to the ViewHelper. See Inline usage with a variable for an example.

lim:widget.responsiveImage

Renders a responsive <picture> element from a source set configuration. Supports WebP sources, media queries and art direction through crop variants.

Note

When a legacy external image server is used, this ViewHelper only supports files that are hosted on that external storage.

The complete argument reference is generated from the source code, see Widget.responsiveImage ViewHelper <lim:widget.responsiveImage>.

Tag usage

EXT:my_sitepackage/Resources/Private/Partials/Image.html

<html xmlns:lim="http://typo3.org/ns/LIA/LiaImageserver/ViewHelpers" data-namespace-typo3-fluid="true">
<picture>
    <lim:widget.responsiveImage
        image="{image}"
        enableWebPSupport="true"
        defaultOptions="{'fm': 'jpg'}"
        sourceSets="{
            '(max-width: 767px)':
            {
              srcset: {0: {w:320},1: {w:480},2: {w:560},3: {w:640}},
              sizes: 'calc(100vw - 30px)',
              default: 1,
              options: {fm: 'png'},
              cropVariant: 'tablet'
            },
            '(min-width: 768px)':
            {
              srcset: {0: {w:640},1: {w:768},2: {w:900},3: {w:1024}},
              sizes: '100vw',
              cropVariant: 'smartphone'
            }
        }"
        fetchPriority="auto"
    />
</picture>

<picture>
    <lim:widget.responsiveImage
        src="{image.uid}"
        enableWebPSupport="true"
        treatIdAsReference="1"
        class="css-class-on-image"
        objectFit="cover"
        objectPositionLeft="center"
        objectPositionTop="top"
        defaultOptions="{'fm': 'jpg', fit: 'crop'}"
        sourceSets="{
            '(max-width: 767px)':
            {
              srcset: {0: {w:320,h:350,fm:'jpeg'},1: {w:480,h:525},2: {w:560,h:613},3: {w:640,h:700}},
              sizes: 'calc(100vw - 30px)',
              default: 1,
              options: {fm: 'pjpg', crop: 'left,top'}
            },
            '(min-width: 768px) and (max-width: 1024px) and (min-height: 767px)':
            {
              srcset: {0: {w:640,h:475},1: {w:768,h:570},2: {w:900,h:668},3: {w:1024,h:760}},
              sizes: '100vw',
              options: {fm: 'pjpg', crop: 'right,bottom'}
            }
        }"
        fetchPriority="auto"
    />
</picture>
</html>

Inline usage with a variable

Store the nested sourceSets array in a variable and pass it on. This keeps the inline notation readable.

EXT:my_sitepackage/Resources/Private/Partials/Image.html

<html xmlns:lim="http://typo3.org/ns/LIA/LiaImageserver/ViewHelpers" data-namespace-typo3-fluid="true">
<picture>
    <f:variable
        name="responsiveImageSourceSets"
        value="{
            '(max-width: 767px)':
            {
              srcset: {0: {w:320,h:350,fm:'jpeg'},1: {w:480,h:525},2: {w:560,h:613},3: {w:640,h:700}},
              sizes: 'calc(100vw - 30px)',
              default: 1,
              options: {fm: 'pjpg', crop: 'left,top'}
            },
            '(min-width: 768px) and (max-width: 1024px) and (min-height: 767px)':
            {
              srcset: {0: {w:640,h:475},1: {w:768,h:570},2: {w:900,h:668},3: {w:1024,h:760}},
              sizes: '100vw',
              options: {fm: 'pjpg', crop: 'right,bottom'}
            }
        }"
    />
    {lim:widget.responsiveImage(src: image.uid, enableWebPSupport: 'true', treatIdAsReference: 'true', class: 'css-class-on-image', objectFit: 'cover', objectPositionLeft: 'center', objectPositionTop: 'top', defaultOptions: '{fm: "jpg", fit: "crop"}', sourceSets: responsiveImageSourceSets, fetchPriority: 'auto')}
</picture>
</html>

Arguments

Argument	Description	Type
`src`	A path to a file, a combined FAL identifier or a uid. If `treatIdAsReference` is set, the integer is the uid of a `sys_file_reference` record. If you already have a FAL object, use `image` instead.	string
`image`	A FAL object (`File` or `FileReference`).	object
`treatIdAsReference`	Set to `true` when `src` holds the uid of a `sys_file_reference` record.	bool
`sourceSets`	Source set configuration keyed by media query. Each entry may carry `srcset`, `sizes`, `default`, `options` and `cropVariant`. Always provide a default source set.	array
`defaultOptions`	Options applied to all source sets. Which options exist depends on the image server in use; for imgix see https://docs.imgix.com/apis/url.	array
`enableWebPSupport`	Add WebP sources. Default: `true`.	bool
`class`	CSS class(es) for the `<img>` element.	string
`objectPositionLeft`	Object position left for the polyfill. Default: `center`.	string
`objectPositionTop`	Object position top for the polyfill. Default: `center`.	string
`objectFit`	Object fit mode for the polyfill.	string
`respectImageWidth`	If set, source set definitions are processed so that they do not exceed the given image width. Default: `0`.	int
`respectImageWidthClasses`	Classes applied to the `<img>` element when `respectImageWidth` is set. Default: `staticimage`, `u-respect-image-width`.	array
`loading`	Native lazy loading: `lazy`, `eager` or `auto`.	string
`dimensions`	Set `height` and `width` attributes dynamically. Default: `false`.	bool
`fetchPriority`	Priority hint: `high`, `low` or `auto`.	string
`customWidgetId`	Extends the widget identifier with a custom id.	string
`storeSession`	Store the widget session in a cookie. Default: `true`.	bool

lim:image

Based on the core ViewHelper <f:image>. Adds sourceSets, WebP support and the argument imageServerOptions, which is taken into account during processing.

For the inherited arguments see the core documentation of f:image. The complete argument reference of this ViewHelper is generated from the source code, see Image ViewHelper <lim:image>.

Additional arguments

Argument	Description	Type
`imageServerOptions`	Options passed to the image server. Any valid image server option is allowed. These options overrule all other attributes.	array
`enableWebPSupport`	Add WebP sources. Default: `false`.	bool
`cropVariant`	Name of the crop variant configured in the backend. Default: `default`.	string
`objectFit`	Object fit mode for the polyfill.	string
`objectPosition`	Object position for the polyfill.	string
`sizes`	`sizes` entries for the `<img>` element, one per source set index.	array
`sourceSets`	Source set configuration. Always provide a default source set.	array
`respectImageWidth`	If set, source set definitions are processed so that they do not exceed the given image width. Default: `0`.	int
`respectImageWidthClasses`	Classes applied to the `<img>` element when `respectImageWidth` is set. Default: `staticimage`, `u-respect-image-width`.	array
`passThrough`	Skip the external image server. The URL points to the file processed by TYPO3.	bool
`loading`	Native lazy loading attribute: `lazy`, `eager` or `auto`.	string
`additionalAttributes`	Additional tag attributes, added directly to the resulting HTML tag.	array
`fetchPriority`	Priority hint: `high`, `low` or `auto`.	string

Example

EXT:my_sitepackage/Resources/Private/Partials/Image.html

<picture>
    <lim:image
        treatIdAsReference="true"
        src="{image.id}"
        alt="{image.alternative}"
        enableWebPSupport="true"
        width="600"
        height="400"
        loading="lazy"
        cropVariant="tablet"
        additionalAttributes="{itemprop: 'test'}"
        imageServerOptions="{fm: 'pjpg', q: 'lossless'}"
        sizes="{
          0: '100vw',
          1: '(min-width: 850px) 350px',
          2: '(min-width: 1024px) calc((100vw - 130px) / 2)'
        }"
        sourceSets="{
          0: {w:320},
          1: {w:350},
          2: {w:490},
          3: {w:1050}
        }"
        passThrough="true"
        fetchPriority="auto"
    />
</picture>

Inline notation with variables:

EXT:my_sitepackage/Resources/Private/Partials/Image.html

<picture>
    <f:variable name="sizes" value="{
      0: '100vw',
      1: '(min-width: 850px) 350px',
      2: '(min-width: 1024px) calc((100vw - 130px) / 2)'
    }" />
    <f:variable name="srcSet" value="{0: {w:320}, 1: {w:350}, 2: {w:490}, 3: {w:1050}}" />

    {lim:image(treatIdAsReference: true, src: image.id, alt: image.alternative, width: '600c', height: '400c', cropVariant: 'tablet', imageServerOptions: '{fm: "pjpg", q: "lossless"}', sizes: sizes, sourceSets: srcSet, passThrough: true, loading: 'lazy', fetchPriority: 'auto')}
</picture>

lim:uri.image

Based on the core ViewHelper <f:uri.image>. Adds the argument imageServerOptions, which is taken into account during processing, and returns the URL of the processed image.

For the inherited arguments see the core documentation of f:uri.image. The complete argument reference of this ViewHelper is generated from the source code, see Uri.image ViewHelper <lim:uri.image>.

Note

TYPO3 strips the leading zero from hex codes like 015069 in arguments such as blend-color. In these cases, deviate from the image server documentation and prefix the value with #:

Hex color with leading zero

imageServerOptions="{blend-color: '#015069', blend-alpha: 80}"

Additional arguments

Argument	Description	Type
`imageServerOptions`	Options passed to the image server. Any valid image server option is allowed. These options overrule all other attributes.	array
`passThrough`	Skip the external image server. The URL points to the file processed by TYPO3.	bool

Example

EXT:my_sitepackage/Resources/Private/Partials/Image.html

<picture>
    <lim:uri.image
        treatIdAsReference="true"
        src="{image.id}"
        width="600"
        height="400"
        cropVariant="tablet"
        imageServerOptions="{fm: 'pjpg', q: 'lossless'}"
        passThrough="true"
    />
</picture>

To activate cropping, add the suffix m to width and height:

EXT:my_sitepackage/Resources/Private/Partials/Image.html

<picture>
    <lim:uri.image
        treatIdAsReference="true"
        src="{image.id}"
        width="600m"
        height="400m"
        cropVariant="tablet"
        imageServerOptions="{fm: 'pjpg', q: 'lossless'}"
        passThrough="true"
    />
</picture>

Inline notation:

EXT:my_sitepackage/Resources/Private/Partials/Image.html

<picture>
    {lim:uri.image(treatIdAsReference: true, src: image.id, width: '600c', height: '400c', cropVariant: 'tablet', imageServerOptions: '{fm: "pjpg", q: "lossless"}', passThrough: true)}
</picture>

ViewHelpers

Rendered: Wed, 16 Sep 2026 09:22:52 +0000

This is a complete reference of all available Fluid ViewHelpers. This documentation is generated from PHP Source code.

Content

Imageserver

Uri

Uri.image ViewHelper `<lim:uri.image>`

This ViewHelper generate an uri for the given image.

Examples

<picture>
    <lim:uri.image
        treatIdAsReference="true"
        src="{image.uid}"
        alt="{image.alternative}"
        width="600"
        height="400"
        cropVariant="pasteHereYourCropVariant"
        imageServerOptions="{fm: 'pjpg', q: 'lossless'}"
        passThrough="true"
    />
</picture>

To use the cropping add a m to the width and the height. It looks like this.

<picture>
    <lim:uri.image
        treatIdAsReference="true"
        src="{image.uid}"
        alt="{image.alternative}"
        width="600m"
        height="400m"
        cropVariant="pasteHereYourCropVariant"
        imageServerOptions="{fm: 'pjpg', q: 'lossless'}"
        passThrough="true"
    />
</picture>

You can also use this ViewHelper as inline notation.

<picture>
    {lim:uri.image(treatIdAsReference: true, src: image.id, alt: image.alternative, width: '600c', height: '400c', cropVariant: 'pasteHereYourCropVariant', imageServerOptions: '{fm: "pjpg", q: "lossless"}', passThrough: true)}
</picture>

Arguments

The following arguments are available for the uri.image ViewHelper:

absolute

Type: bool
Default: false

Force absolute URL

crop

Type: string|bool

If you want to deactivate cropping of the image, set this attribute to `true`

cropVariant

Type: string
Default: 'default'

If you have defined multiple cropping variants enter here the cropping variant you want to use for the cropping of your image.

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.

image

Type: object

a FAL object (\TYPO3\CMS\Core\Resource\File or \TYPO3\CMS\Core\Resource\FileReference)

imageServerOptions

Type: array
Default: array ( )

Imageserver related options to be passed to. You can pass any valid Imageserver option. This options will overrule all other defined attributes

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

passThrough

Type: boolean
Default: false

If you have to skip the imageserver set this argument to `true`.

src

Type: string
Default: ''

Here goes the source of the image. It can be the uid of it or a relative or absolute path to the image.

treatIdAsReference

Type: bool
Default: false

If you use an UID in the `src` attribute you have to set this argument to `true` to get an result.

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.

Widget.responsiveImage ViewHelper `<lim:widget.responsiveImage>`

This ViewHelper render a responsive image with given configuration. It also support webp, media queries and art queries.

Examples

<picture>
    <lim:widget.responsiveImage
        image="{image}"
        enableWebPSupport="true"
        defaultOptions="{'fm': 'jpg'}"
        sourceSets="{
            '(max-width: 767px)':
            {
                srcset: {0: {w:320},1: {w:480},2: {w:560},3: {w:640}},
                sizes: 'calc(100vw - 30px)',
                default: 1,
                options: {fm: 'png'},
                cropVariant: 'tablet'
            },
            '(min-width: 768px)':
            {
                srcset: {0: {w:640},1: {w:768},2: {w:900},3: {w:1024}},
                sizes: '100vw',
                cropVariant: 'smartphone'
            }
        }"
    />
</picture>

Here an example if you have to use the src attribute.

<picture>
    <lim:widget.responsiveImage
        src="{image.uid}"
        enableWebPSupport="true"
        treatIdAsReference="1"
        class="css-class-on-image"
        objectFit="cover"
        objectPositionLeft="center"
        objectPositionTop="top"
        defaultOptions="{'fm': 'jpg', fit: 'crop'}"
        sourceSets="{
            '(max-width: 767px)':
            {
                srcset: {0: {w:320,h:350,fm:'jpeg'},1: {w:480,h:525},2: {w:560,h:613},3: {w:640,h:700}},
                sizes: 'calc(100vw - 30px)',
                default: 1,
                options: {fm: 'pjpg', crop: 'left,top'}
            },
            '(min-width: 768px) and (max-width: 1024px) and (min-height: 767px)':
            {
                srcset: {0: {w:640,h:475},1: {w:768,h:570},2: {w:900,h:668},3: {w:1024,h:760}},
                sizes: '100vw',
                options: {fm: 'pjpg', crop: 'right,bottom'}
            }
        }"
    />
</picture>

Attention

Inline notation is also possible. But (!) the syntax can get messy if you have to deal with nested arrays in the inline notation markup.: This ViewHelper makes heavy use of nested array for the sourceSets attribute. Consider it as best practice to store your needed sourceSets in fluid variable via f:variable.

<picture>
    <f:variablen
        name="responsiveImageSourceSets"
        value="{
            '(max-width: 767px)':
            {
                srcset: {0: {w:320,h:350,fm:'jpeg'},1: {w:480,h:525},2: {w:560,h:613},3: {w:640,h:700}},
                sizes: 'calc(100vw - 30px)',
                default: 1,
                options: {fm: 'pjpg', crop: 'left,top'}
            },
            '(min-width: 768px) and (max-width: 1024px) and (min-height: 767px)':
            {
                srcset: {0: {w:640,h:475},1: {w:768,h:570},2: {w:900,h:668},3: {w:1024,h:760}},
                sizes: '100vw',
                options: {fm: 'pjpg', crop: 'right,bottom'}
            }
        }"
    />
    {lim:widget.responsiveImage(src: image.uid, enableWebPSupport: 'true', treatIdAsReference: 'true', class: 'css-class-on-image' objectFit: 'cover', objectPositionLeft: 'center', objectPositionTop: 'top', defaultOptions: '{fm: 'jpg', fit: 'crop'}' sourceSets: responsiveImageSourceSets)}
</picture>

Arguments

The following arguments are available for the widget.responsiveImage ViewHelper:

class

Type: string

Class of <img />

customWidgetId

Type: string

extend the widget identifier with a custom widget id

defaultOptions

Type: array
Default: array ( )

Options applied to all source sets

dimensions

Type: bool
Default: false

Set height and width dynamically

enableWebPSupport

Type: bool
Default: true

Enable webP support

fetchPriority

Type: string

A string representing the priority hint. Possible values are:. "high", "low" or "auto"

image

Type: object

a FAL object (\TYPO3\CMS\Core\Resource\File or \TYPO3\CMS\Core\Resource\FileReference)

loading

Type: string

Native lazy-loading for images property. Can be "lazy", "eager" or "auto"

objectFit

Type: string
Default: ''

Polyfill object fit mode

objectPositionLeft

Type: string
Default: 'center'

Polyfill object position left

objectPositionTop

Type: string
Default: 'center'

Polyfill object position top

respectImageWidth

Type: int
Default: 0

If set source-set definitions will be processed to ensure not to exceed the given image width

respectImageWidthClasses

Type: array
Default: array ( 0 => 'staticimage', 1 => 'u-respect-image-width', )

If respectImageWidh is set, this classes will be applied to the IMG tag

sourceSets

Type: array

Source set configuration

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

storeSession

Type: bool
Default: true

Store the widgets session (utilizing a cookie).

treatIdAsReference

Type: bool

If you use an UID in the `src` attribute you have to set this argument to `true` to get an result.

Image ViewHelper `<lim:image>`

This ViewHelper is based on the f:image ViewHelper and extends it with some additional attributes.

Example

<picture>
    <lim:image
        treatIdAsReference="true"
        src="{image.id}"
        alt="{image.alternative}"
        enableWebPSupport="true"
        width="600"
        height="400"
        loading="lazy"
        cropVariant="tablet"
        additionalAttributes="{itemprop: 'test'}"
        imageServerOptions="{fm: 'pjpg', q: 'lossless'}"
        sizes="{
            0: '100vw',
            1: '(min-width: 850px) 350px',
            2: '(min-width: 1024px) calc((100vw - 130px) / 2)'
        }"
        sourceSets="{
            0: {w:320},
            1: {w:350},
            2: {w:490},
            3: {w:1050}
        }"
        passThrough="true"
    />
</picture>

You can also use the inline notation.

<picture>
    <f:variable name="sizes" value="{
        0: '100vw',
        1: '(min-width: 850px) 350px',
        2: '(min-width: 1024px) calc((100vw - 130px) / 2)'
    }" />
    <f:variable name="srcSet" value="{0: {w:320}, 1: {w:350}, 2: {w:490}, 3: {w:1050}}" />
    {lim:image(treatIdAsReference: true, src: image.id, alt: image.alternative, width: '600c', height: '400c', cropVariant: 'tablet', imageServerOptions: '{fm: "pjpg", q: "lossless"}', sizes: sizes, sourceSets: srcSet, passThrough: true, loading: 'lazy')}
</picture>

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 image 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

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)

enableWebPSupport

Type: boolean
Default: false

Enable image webp support

fetchPriority

Type: string

A string representing the priority hint. Possible values are:. "high", "low" or "auto"

fileExtension

Type: string

Custom file extension to use

height

Type: string

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)

imageServerOptions

Type: array
Default: array ( )

Imageserver related options to be passed to. You can pass any valid Imageserver option. This options will overrule all other defined attributes

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"

longdesc

Type: string

Specifies the URL to a document that contains a long description of an image

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

objectFit

Type: string

Polyfill object fit mode

objectPosition

Type: string

Polyfill object position

onclick

Type: string

JavaScript evaluated for the onclick event

passThrough

Type: boolean
Default: false

If you have to skip the imageserver set this argument to `true`.

respectImageWidth

Type: int
Default: 0

If set source-set definitions will be processed to ensure not to exceed the given image width

respectImageWidthClasses

Type: array
Default: array ( 0 => 'staticimage', 1 => 'u-respect-image-width', )

If respectImageWidh is set, this classes will be applied to the IMG tag

sizes

Type: array
Default: array ( )

Define here the sizes for the diffrent viewports.

sourceSets

Type: array
Default: array ( )

Source set configuration, make sure you always provide a default source set

src

Type: string
Default: ''

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

If you use an UID in the `src` attribute you have to set this argument to `true` to get an result.

usemap

Type: string

Specifies an image as a client-side image-map

width

Type: string

Frequently Asked Questions (FAQ)

TYPO3 strips the leading zero from hex codes like 015069. Prefix the value with #, for example imageServerOptions="{blend-color: '#015069', blend-alpha: 80}". See lim:uri.image.

Nested arrays in inline notation get messy fast. Store the sourceSets array in a Fluid variable with <f:variable> and pass the variable to the ViewHelper. See Best practice: source sets as variables.

Set passThrough="true" on <lim:image> or <lim:uri.image>. The URL then points to the file processed by TYPO3 itself. See Additional arguments.

See chapter Where to get help.

Where to get help

Ask your question on Stack Overflow using the tag lia-typo3-extensions.
Send us an email with your question to devs@louis.info.

Report issues

You can report issues at https://github.com/LOUISINTERNET/lia_imageserver/issues.