Configuration

Extension Configuration

This extension does not require any TypoScript to be included. But this extension provides some example configuration that can be used for image rendering:

  • Responsive images default configuration (optional)
  • Responsive images bootstrap configuration (optional)

Only one of them should be included. These configurations provide the following variant keys:

Continue this Frontend Rendering after configuration is finished.

Default configuration

This configuration is loaded by default when including the default extension TypoScript.

Variant key Size: smartphone Size: tablet Size: desktop
default 320px 1x, 640px 2x 1024px 1x, 2024px 2x 1920px 1x
half 320px 1x, 640px 2x 512px 1x, 1024px 2x 960px 1x
third 320px 1x, 640px 2x 341px 1x, 682px 2x 640px 1x
quarter 320px 1x, 640px 2x 256px 1x, 512px 2x 480px 1x
two-thirds 320px 1x, 640px 2x 682px 1x, 1364px 2x 1280px 1x
three-quarters 320px 1x, 640px 2x 768px 1x, 1536px 2x 1440px 1x

Bootstrap configuration

This configuration can be loaded by adding the static TypoScript file Responsive images bootstrap configuration (optional).

Variant key Size: extraSmall Size: small Size: medium Size: large
default 400px 1x, 800px 2x 750px 1x, 1500px 2x 970px 1x, 1940px 2x 1170px 1x
col-12 400px 1x, 800px 2x 750px 1x, 1500px 2x 970px 1x, 1940px 2x 1170px 1x
col-11 400px 1x, 800px 2x 687px 1x, 1375px 2x 889px 1x, 1778px 2x 1072px 1x
col-10 400px 1x, 800px 2x 625px 1x, 1250px 2x 808px 1x, 1616px 2x 975px 1x
col-9 400px 1x, 800px 2x 562px 1x, 1125px 2x 727px 1x, 1455px 2x 877px 1x
col-8 400px 1x, 800px 2x 500px 1x, 1000px 2x 646px 1x, 1293px 2x 780px 1x
col-7 400px 1x, 800px 2x 437px 1x, 875px 2x 565px 1x, 1131px 2x 682px 1x
col-6 400px 1x, 800px 2x 375px 1x, 750px 2x 485px 1x, 970px 2x 585px 1x
col-5 400px 1x, 800px 2x 312px 1x, 625px 2x 404px 1x, 808px 2x 487px 1x
col-4 400px 1x, 800px 2x 250px 1x, 500px 2x 323px 1x, 646px 2x 390px 1x
col-3 400px 1x, 800px 2x 187px 1x, 375px 2x 242px 1x, 485px 2x 292px 1x
col-2 400px 1x, 800px 2x 125px 1x, 250px 2x 161px 1x, 323px 2x 195px 1x
col-1 400px 1x, 800px 2x 62px 1x, 125px 2x 80px 1x, 161px 2x 97px 1x