4 years ago

Retina images in TYPO3 extensions with Fluid

Category: TYPO3

If you are developing extensions for your clients to use with TYPO3, you will very likely have adjusted the (html) templates writing Fluid for list or detail views. TYPO3 provides image viewhelpers to create images and markup out of the box without having to worry about image cropping/resizing or similar stuff.

SRCSET to the rescue

However, you probably would like your website to display retina images to devices being capable of displaying such higher resolution. Since now almost all modern browsers (IE is an exception, of course ;) support the attribute srcset we can make use of this attribute and have these browsers display shiny high-dpi images without having to fall back on Javascript solutions.

The following Fluid code displays a regular image with a fixed with and height of 200 pixels (1:1 aspect ratio) being cropped out of the original image, is necessary:

<f:image src="{image.publicUrl}" alt="{image.alternative}" title="{image.title}" width="200.c-0" height="200.c-0" />

The srcset Attribute can provide additional image paths with different pixel density, so browsers not understanding this attribute will simply ignore it. Outputting additional attributes that the image viewhelper does not know about is done with the parameter "additionalAttribues", so the markup for a second image with exactly double the width and height looks like this:

<f:image src="{image.publicUrl}" alt="{image.alternative}" title="{image.title}" width="200.c-0" height="200.c-0" additionalAttributes="{srcset: '{f:uri.image(src:\'{image.publicUrl}\', width:\'400.c-0\', height:\'400.c-0\')} 2x'}" />

wheres I found escaping the nested attributes of width and height the most challenging thing.

The resulting html code looks like this (image paths might change according to your installation):

<img srcset="../csm_kk-slider-beispiel-4_606a80fc48.jpg 2x" src="../csm_kk-slider-beispiel-4_a25b2956e6.jpg" width="200" height="200" alt="Lorem ipsum" title="Lorem ipsum" />

Voila: 4x as many pixels for retina!

  • This article is my 13th oldest. It is 267 words long.
Add your comments