Responsive Images et TYPO3 – La suite

Comment rester silencieux alors que la nouvelle version de TYPO3, la très attendue 6.2 va sortir très prochainement ( 10 Décembre) avec notamment une fonctionnalité très intéressante: la génération de tailles d’images adaptées aux périphériques ( Responsive images)

Cet article est en grande partie une traduction de l’article tout d’abord paru sur http://typo3blogger.de/, puis sur typo3.org

Dans mon précédent article sur ce sujet, nous avons pu découvrir les principes du responsive image, toujours très peu utilisé aujourd’hui, bien que la plupart des sites internet voyant le jour soient « adaptatif » ou « responsive design ». C’est d’autant plus incroyable que de servir une image unique pour tous les périphériques peut amener rapidement à de gros problèmes de bande passante sur les périphériques mobiles.

Maintenant que TYPO3 propose cette fonctionnalité en natif, les choses vont pouvoir bouger et ce sera à vous de jouer !

Principal avantage:Chargement de la bonne taille d’image pour la bonne taille d’écran

1. Moins de données à charger
2. Plus de « piqué » dans l’image (en général le redimensionnement par le navigateur génère de l’aliasing

Comment activer la fonctionnalité pour TYPO3 6.2 LTS ?

La première chose à faire pour utiliser cette fonctionnalité  » Responsive images », est de l’activer, soit dans l’éditeur de constantes en cochant la case : « Responsive rendering for images » soit en ajoutant le typoscript dans le champ « constant » de votre gabarit.

Vous pouvez aussi dans l’éditeur de constantes, choisir le mode de rendu ( code html généré ) pour vos images responsives.

Activation de la fonctionnalité en typoscript

# constant.ts
# on active le rendu responsif pour les images
styles.content.imgtext.responsive = 1

# on choisit la méthode de rendu ( constant.ts )
styles.content.imgtext.layoutKey = srcset

Exemple de code typoscript pour le rendu type « srcset »

# setup.ts
tt_content.image.20.1.sourceCollection {
# taille d'image maximum pour l'affichage "petits écrans"
small.maxW = 300

# dimension qui déclenche l'état "petits écrans"
small.srcsetCandidate = 400w

# taille d'image maximum pour l'affichage "écrans de taille moyenne"
middle.maxW = 500

# dimension  qui déclenche l'état "écrans de taille moyenne"
middle.srcsetCandidate = 600w
}

Les modes de rendu:

En matière de rendu responsif, et devant l’indécision de la W3C, les débats d’experts n’en finissent pas.. je suis quotidiennement une mailing list d’échanges sur ce sujet, et ce sont des mails quotidien, des avis différents, tous très intéressants, mais qui ne vont pas encore dans la même direction.

Ainsi, en attendant, TYPO3 6.2 offre la possibilité de choisir entre plusieurs modes de rendu:

default

rendu « normal » de la balise<img>

<img src="###SRC###" width="###WIDTH###" height="###HEIGHT###" 
###PARAMS### ###ALTPARAMS### ###BORDER### ###SELFCLOSINGTAGSLASH###>

srcset

Génère un tag image qui pointe vers un jeu d’images de différentes résolution.
Elles sont stockées dans l’attribut srcset de la balise . Chaque image est rendue par TYPO3.
Srcset est une des solutions proposée pour enrichir HTML5.

<img src="###SRC###" srcset="|*|###SRC### ###SRCSETCANDIDATE###,
|*|###SRC### ###SRCSETCANDIDATE###" ###PARAMS### ###ALTPARAMS###
###SELFCLOSINGTAGSLASH###>

balise picture

Génère une balise html5 qui contient le chemin vers chaque résolution et une balise pour l’image par défaut.
L’ajout de la balise picture aux spécifications de HTML5 est encore en reflexion.
http://www.w3.org/TR/html-picture-element/

<picture>
<source src="###SRC###" media="###MEDIAQUERY###"###SELFCLOSINGTAGSLASH###>
<img src="###SRC###" ###PARAMS### ###ALTPARAMS######SELFCLOSINGTAGSLASH###>
</picture>

data

Génère une balise contenant des « data-keys » pour chaque résolution:

<img src="###SRC###" data-###DATAKEY###="###SRC###" ###PARAMS### 
###ALTPARAMS######SELFCLOSINGTAGSLASH###>

de plus, il est possible de paramétrer soit même son rendu, au cas ou une nouveauté sortirait prochainement, ou si vous avez trouvé une meilleure recette :)

Toutes les configs possibles seront dans la documentation TSREF ( dès que la version 6.2 sera sortie )

Ces rendus permettent aussi de gérer (en plus de servir la bonne image à la bonne taille ) la résolution de rendu, pour les écrans retina par exemple.

Retrouvez la traduction d’un article sur le rendu de l’élément HTML5 « Picture » dans un des billets précédents.

A venir:

Exemple de rendu