Configuration Reference¶

Variant Properties

croppingVariantKey
providedImageSizes
sizes
- sizes.<key>.viewportMediaCondition
- sizes.<key>.assumedImageWidth

Note

This extension provides the example configuration that can be used.

croppingVariantKey ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.croppingVariantKey

| Data type: string |

The TYPO3 cropping variant key, that should be used by default.

providedImageSizes ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.providedImageSizes

| Data type: array of image rendering options |

Add multiple image rendering configurations. This options is used to generate the available images provided in the srcset attribute.

providedImageSizes.<key>.width ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.providedImageSizes.<key>.width

Data type: string

See TYPO3 ImgResource <https://docs.typo3.org/m/typo3/reference-typoscript/11.5/en-us/Functions/Imgresource.html#width>

providedImageSizes.<key>.height ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.providedImageSizes.<key>.height

Data type: string

See TYPO3 ImgResource <https://docs.typo3.org/m/typo3/reference-typoscript/11.5/en-us/Functions/Imgresource.html#height>

providedImageSizes.<key>.maxWidth ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.providedImageSizes.<key>.maxWidth

Data type: int

See TYPO3 ImgResource <https://docs.typo3.org/m/typo3/reference-typoscript/11.5/en-us/Functions/Imgresource.html#maxw>

providedImageSizes.<key>.maxHeight ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.providedImageSizes.<key>.maxHeight

Data type: int

See TYPO3 ImgResource <https://docs.typo3.org/m/typo3/reference-typoscript/11.5/en-us/Functions/Imgresource.html#maxh>

providedImageSizes.<key>.minWidth ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.providedImageSizes.<key>.minWidth

Data type: int

See TYPO3 ImgResource <https://docs.typo3.org/m/typo3/reference-typoscript/11.5/en-us/Functions/Imgresource.html#minw>

providedImageSizes.<key>.minHeight ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.providedImageSizes.<key>.minHeight

Data type: int

See TYPO3 ImgResource <https://docs.typo3.org/m/typo3/reference-typoscript/11.5/en-us/Functions/Imgresource.html#minh>

Example:

providedImageSizes {
   10 {
      width = 500c
      height = 300c
   }
   20 {
      maxWidth = 900
   }
}

sizes ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.sizes

| Data type: array of image sizes |

Add multiple sizes configurations. This options is used to generate the available images provided in the sizes attribute.

sizes.<key>.viewportMediaCondition ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.sizes.<key>.viewportMediaCondition

Data type: string (optional)

The condition at which for the assumedImageWidth. When none is given, the browsers assumes the assumedImageWidth as default when no other matches.

sizes.<key>.assumedImageWidth ¶

plugin.tx_responsiveimages.settings.variants.<VariantKey>.sizes.<key>.assumedImageWidth

Data type: string

The image width that is assumed when the viewportMediaCondition matches.

Example:

sizes {
   10 {
      viewportMediaCondition = (min-width: 971px)
      assumedImageWidth = 1170px
    }
    20 {
      viewportMediaCondition = (min-width: 751px)
      assumedImageWidth = 970px
    }
    30 {
      viewportMediaCondition = (min-width: 421px)
      assumedImageWidth = 750px
    }
    40 {
      # Last element is the default element and does not need a viewportMediaCondition
      assumedImageWidth = 420px
    }
}