About this extension 

This extension is based on the fact, that the integrator forces image sizes that the content editor may not change. An integrator can specify image configurations that are used in Fluid templates.

Upgrading from v2 

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.

How are variants chosen 

Configured variants can be provided by using the extensions ViewHelpers. When no variant is given, the extension tries to get the current variant from the TYPO3 register stack. It is looking for the key IMAGE_VARIANT_KEY. When it is defined, its value is used as a variant key. When no valid key is found, the extension will use the key default.

Example rendering 

The extension provides a partial that can be used for frontend rendering.

First, the extensions partial path needs to be added for rendering. For fluid_tyled_content this can be done like this

lib.contentElement.partialRootPaths.1663513618 = EXT:responsive_images/Resources/Private/Partials

After this path is added, the partial can be used in Fluid:

<f:render partial="PictureTag" arguments="{
    image: files.0,
    imageMaxWidth: 1920,
    imgClass: 'image-1',
    imageDefaultCropVariant: 'desktop',
    cropVariants: {
        mobile: '(max-width: 700px)',
        desktop: '(min-width: 701px)'
    }
}" />

See the partials code for an explanation what variable can be provides.

Using the ViewHelpers 

This extension provides some ViewHelpers:

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 {
   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 {
   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
    }
}

What should be done 

1. Provide a new TypoScript configuration using variants
2. Replace all f:media calls with the new Frontend Rendering
3. Make sure to remove unnecessary TypoScript to keep your installation clean

4.1.3 

• BUGFIX: Improve avoiding duplicate image uri in srcset attribute

4.1.2 

• BUGFIX: Avoid duplicate image uri in srcset attribute

4.1.1 

• TASK: Avoid using CompileWithRenderStatic in LoadRegisterViewHelper
• TASK: Add PHP 8.4 to testing suite

4.1.0 

• FEATURE: Add SiteSets for presets
• FEATURE: Allow forcing type attribute in SourceViewHelper
• TASK: Do not call deprecated ViewHelper methods in TYPO3 v13
• BUGFIX: Avoid implicit nullable parameter declaration

4.0.0 

• !!!TASK: Drop support for TYPO3 v10 and v11
• TASK: Add support for TYPO3 v13

No migrations necessary.

3.1.3 

• BUGFIX: Fixes an issue with symfony/dependency-injection v7

3.1.2 

• TASK: Add compatibility for TYPO3 12.4

3.1.1 

• TASK: Add compatibility for TYPO3 12.2

3.1.0 

• FEATURE: Add compatibility for TYPO3 12.0
• FEATURE: Allow setting the target file extension in SourceViewHelper
• TASK: Add info about specifying the file extension in SourceViewHelper
• TASK: Add changelog to documentation

3.0.1 

• TASK: Add loading="lazy" attribute to PictureTag Partial
• BUGFIX: Add documentation link to readme
• BUGFIX: Exclude .ddev folder in composer package

3.0.0 

The extension was completely rewritten from scratch and the rendering of the frontend was updated. This extension now uses the attributes srcset and sizes on image and source tags to provide responsive images.

List of important changes

• Drops TYPO3 v8 and v9 compatibility
• Drops quality and greyscale options for image rendering
• Drop processing and enabled TypoScript settings
• Adds TYPO3 v11 compatibility
• Drop support for v2 configuration - use variants for v3
• Improved documentation

Please have a look at Upgrade from v2 to v3 for further instructions.