Responsive images for TYPO3 CMS

This extension adds responsive images support for fluid_styled_content rendering using the media ViewHelper.

Information

This extension is based on the fact, that the frontend rendering used some kind of CSS grid system (may be provided by CSS frameworks like bootstrap or foundation). The columns of this has to specify the width of an image. The image should run over 100% of the column width.

To render the image inside columns, there are some extensions that can be used like gridelements, fluidcontent or multicolumns.

This extension checks, what column width is used in the frontend to render to image. Then it generates a picture tag width some versions of that image based on the column width.

See part usage to know, how this works.

Usage

There are some predefined configs: - default (for images over full content width) - half (for images over half content width) - third (for images over third content width) - quarter (for images over quarter content width) - two-thirds (for images over 2/3 content width) - three-quarter (for images over 3/4 content width)

Before an image is rendered via MediaViewHelper, a registry variable width the key IMAGE_VARIANT_KEY must be set. The value should be one of the config keys. This can be done with the this ViewHelper

\Codemonkey1988\ResponsiveImages\ViewHelpers\LoadRegisterViewHelper

The MediaViewHelper should be placed inside this viewhelper.

Example:

<r:loadRegister key="IMAGE_VARIANT_KEY" value="default">
    <f:media file="{file}" />
</r:loadRegister>

Adding new configs

There are two ways of adding responsive image configuration to TYPO3.

TypoScript

New image variant configs can be added via TypoScript

Example:

plugin.tx_responsiveimages.settings.configuration {
    default {
        defaultWidth = 1920
        defaultHeight =
        sources {
            smartphone {
                media = (max-width: 40em)
                croppingVariantKey = default
                sizes {
                    1x {
                        width = 320
                        height =
                        quality = 65
                    }
                    2x {
                        width = 640
                        height =
                        quality = 40
                    }
                }
            }
            desktop {
                media = (min-width: 64.0625em)
                croppingVariantKey = default
                sizes {
                    1x {
                        width = 1920
                        height =
                        quality = 80
                    }

                }
            }
            tablet {
                media = (min-width: 40.0625em)
                croppingVariantKey = default
                sizes {
                    1x {
                        width = 1024
                        height =
                        quality = 80
                    }
                    2x {
                        width = 2048
                        height =
                        quality = 40
                    }
                }
            }
        }
    }
}

PHP

You can add image configuration for your ext_localconf.php

Example:

/** @var \Codemonkey1988\ResponsiveImages\Resource\Rendering\PictureImageVariant $half */
$half = \TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(\Codemonkey1988\ResponsiveImages\Resource\Service\PictureImageVariant::class, 'half');
$half->setDefaultWidth($desktopWidth / 2)
     ->addSourceConfig('(max-width: 40em)',
         [
             '1x' => array('width' => $smartphoneWidth, 'quality' => 65),
             '2x' => array('width' => $smartphoneWidth * 2, 'quality' => 40)
         ],
         '[optional cropping variant key for TYPO3 v8]'
     )
     ->addSourceConfig('(min-width: 64.0625em)',
         [
             '1x' => array('width' => $desktopWidth / 2),
             '2x' => array('width' => $desktopWidth * 2 / 2, 'quality' => 80)
         ],
         '[optional cropping variant key for TYPO3 v8]'
     )
     ->addSourceConfig('(min-width: 40.0625em)',
         [
             '1x' => array('width' => $tabletWidth / 2, 'quality' => 80),
             '2x' => array('width' => $tabletWidth * 2 / 2, 'quality' => 60)
         ],
         '[optional cropping variant key for TYPO3 v8]'
     );
// Add variant to registry.
$registry = PictureVariantsRegistry::getInstance();
$registry->registerImageVariant($half);