Frontend

Image sizes and media queries are managed in TypoScript in config.tx_responsivepicture

config.tx_responsivepicture {
    autocreatevariations = 1
    sizes {
        10 {
            key = (min-width: 1200px)
            mediaquery = (min-width: 1200px)
            maxW = 1600
            maxH = 1600
        }
        20 {
            key = (min-width: 768px)
            mediaquery = (min-width: 768px)
            maxW = 1024
            maxH = 1024
        }
        30 {
            key = (min-width: 300px)
            mediaquery = (min-width: 300px)
            maxW = 600
            maxH = 600
        }
    }
}

config.tx_responsivepicture.autocreatevariations

Property

autocreatevariations

Data type

bool

Description

Defines if missing media variations should automatically be created. Default: true

config.tx_responsivepicture.sizes

Property

sizes

Data type

array

Description

List of media queries and the respective sizes. The order of this list is preserved and reflects the order of the variations in the file reference.

config.tx_responsivepicture.sizes.[idx].key

Property

key

Data type

string

Description

The identifier / key of this setting. This must correspond with the key in the PageTS configuration of TCEFORM.sys_file_reference.media_width. For backwards compatibility this looks like the media query, but can be any character sequence.

config.tx_responsivepicture.sizes.[idx].mediaquery

Property

mediaquery

Data type

string

Description

The concrete media query used later in the <source> tag inside a <picture> element

config.tx_responsivepicture.sizes.[idx].maxW

Property

maxW

Data type

string

Description

The max width of the image variation to be generated for this media query.

config.tx_responsivepicture.sizes.[idx].maxH

Property

maxH

Data type

string

Description

The max height of the image variation to be generated for this media query.