This project aims to provide an image-rendering process that will render responsive images with fluid, where the assumption is made, that TYPO3 CMS doesn't provide a mechanism outof the box for fluid templates while one is able to do it with TypoScript.

• Installation
• Configuration
  • Mode srcset
    • Configuration Example
• Usage
• Inner workings
• Extending fluid_styled_responsive_images
• License

a) install the stable version from the TYPO3 CMS Extension Repository (TER) through the extension manager b) install via composer using the current stable release and track new stable releases: composer require "typo3-ter/fluid-styled-responsive-images ^1.2" and enable the extension through the extension manager / your preferred mechanism c) use the current development version by either requiring "typo3-ter/fluid-styled-responsive-images": "dev-master" in your composer.json file, run composer update d) clone the current development version to your typo3conf/ext directory (ex. cd typo3conf/ext && rm -Rf fluid_styled_responsive_images && git clone https://github.com/alexanderschnitzler/fluid-styled-responsive-images.git fluid_styled_responsive_images)

The extension is configured through TypoScript, like most parts of your site are. Include the static TypoScript of the extension and then begin with the Configuration through your own TypoScript setup.

The ImageRenderer currently supports the [srcset](srcset specification) and rendering as data-attributes, which is to make custom rendering with javascript easier.

Minimal, empty configuration:

tt_content.textmedia.settings.responsive_image_rendering {
    layoutKey = srcset

    sourceCollection {
        # Please write your own sourceCollection configuration
    }
}

A sourceCollection entry is a TypoScript hash. It can contain the following indices:

For more precise descriptions, please check out the html img element specification on srcset.

tt_content.textmedia {
    settings {
        responsive_image_rendering {
            layoutKey = srcset

            sourceCollection {
                10 {
                    dataKey = desktop
                    width = 1260m
                    srcset = 1260w
                }

                20 {
                    dataKey = table
                    width = 960m
                    srcset = 960w
                }

                30 {
                    dataKey = tablet-small
                    width = 720m
                    srcset = 720w
                }

                40 {
                    dataKey = medium
                    width = 640m
                    srcset = 640w
                }

                50 {
                    dataKey = medium-phone
                    width = 360m
                    srcset = 360w
                }

                60 {
                    dataKey = small
                    width = 320m
                    srcset = 320w
                }
            }
        }
    }
}

After installation and configuration, the output of the <f:media> viewhelper uses the logic this extension supplies for images and renders the image.

1. a custom image renderer is registered
2. when the RendererRegistry is asked for a renderer suitable for the current mimetype, the renderer proposes itself if one of the known image mimetypes is matched
3. the renderer reads the current TypoScript and merges it with global extension configuration like the enableSmallDefaultImage setting
4. the renderer then calculates the needed sizes and returns a ready-made img-tag

Since fluid_styled_content is used, much of the output in TYPO3 CMS can be adjusted.

Example of registering custom templates and adjusting images in collaboration with the GalleryProcessor in fluid_styled_content to provide precise rendering with Bootstrap 3 based templates: websightgmbh/ws-texmedia-bootstrap.

GPL-2.0+