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.