Responsive Image Rendering in TYPO3 CMS 6.2
October 24, 2013
The release of TYPO3 CMS 6.2 LTS is around the corner (December 10). One kick-ass feature that will make it into the core is responsive rendering for images. Sven Wolfermann writes about how to use this feature in an article translated by Roland Schenke and proofread by Den Denyer.
Along with the release of the first beta version of TYPO3 CMS 6.2 a useful feature, assisting in the implementation of responsive webdesign, made its way into the core - responsive rendering for images. Starting at this year's T3DD (TYPO3 Developer Days) in Hamburg (Forge issues #49723, #50075), this feature enables, next to the current Working-Draft of the "Responsive Image Community Group", another option for using different source images depending on the currently available screen real estate. You can find a general overview of responsive images and the problems that may arise in these slides.
If you would like to use this feature in a TYPO3 CMS 6.2 project you first have to activate it, either by using the Constant Editor, ticking the option "Responsive rendering for images" and choosing a value for "Rendering-type for responsive image..." or by assigning appropriate values directly in your Typoscript constants section.
You can choose between four different rendering types, the Default-Rendering, the srcset-Rendering, the picture-Rendering and the rendering of additional Data-Attributes inside the <img>-tag. Besides, the Markup-Rendering is totally configurable via Typoscript with the ability of adding subsequent, i.e. your own, Rendering-Layouts. This concept also covers the usage of high-resolution images (aka Retina) which can be activated by additional Typoscript parameters.
Let's get down to business! Below you will find a code example for the srcset-Rendering containing adaptations for two different viewports.
The various configurations possible with Typoscript are well documented inside of TSRef (Typoscript Reference).
You are now left with the agony of choice in choosing the right Rendering or Polyfill variant for your project. I'd like to see if the "mobile first" approach would also be chosen for images, that is the smallest image is linked as "default-src" and the backend would provide cropping options.
Originally on typo3blogger: http://typo3blogger.de/responsive-images-typo3-6-2/