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.