Chapitre 2: Le code de rendu de TYPO3 est il compatible avec un design responsive ?

Les sites responsifs ne font appel à rien qui ne puisse pas être généré par TYPO3 dans le cadre du rendu HTML/CSS/JS du site. Je vais donc mettre fin rapidement aux questions qui tournent autour du templating.

Quelque soit la méthode de templating, vous pouvez générer le code HTML du layout avec TYPO3.

Je vais me concentrer pour l’instant, et pour commencer sur la gestion des images, qui elle necessite une approche particulière.

TYPO3 se base sur une extension système « css_styled_content » pour générer son code HTML. Cette extension utilise les informations des formulaires du backend TYPO3 configurées dans le TCA et les contenus de la base de données pour créer le code HTML.

# *****************
# CType: image
# *****************
tt_content.image.20 = USER
tt_content.image.20 {
imageStdWrap.dataWrap = <div style="width:{register:totalwidth}px;"> | </div>
imageStdWrapNoWidth.wrap = <div> | </div>

Il est obligatoire d’utiliser « css_styled_content »   pour avoir un rendu, dans le cas contraire, vous seriez accueilli par une page blanche..

C’est donc grâce à css_styled_content que TYPO3 va afficher les images, sujet sensible dans notre logique de créer un site complètement responsif avec TYPO3.

Le code rendu ressemble donc à celà:

<div class="csc-textpic csc-textpic-center csc-textpic-above">
<div class="csc-textpic-imagewrap" style="width:699px;">
<div class="csc-textpic-image csc-textpic-lastcol" style="width:699px;"><div>
<img src="http://cotesdarmor.fr/typo3temp/pics/65837d65ce.jpg" width="699" height="523" border="0" alt="">
</div>
<div class="csc-textpic-caption">Ici le sous-titre</div>
</div>
</div>
</div>

En standard, TYPO3 génére de images avec des largeurs fixes, basées sur la largeur spécifiée dans les constantes, ou basées sur la largeur / hauteur définie en pixels dans le contenu image. Les version re-cadrés sont stockée dans typo3temp/pics/

Dans le cadre d’un site responsif, les images vont convenir à une présentation du site, mais pas à une autre, en général, la version mobile du site va présenter deux types de problèmes, nous allons charger l’image par défaut ( souvent la grande ) sur une plateforme mobile, et l’image risque de ne pas se re-dimensionner correctement si ses dimensions sont saisie en dûr avec une valeur en pixels.

1ère solution: On retire les informations de largeur/hauteur

Cette solution parait séduisante, mais elle n’est pas prévue de base par TYPO3. Il est impossible de retirer proprement les attributs width= » » et height= » » des images car ils proviennent directement de la fonction cImage de sysext/cms/tslib/class.tslib_content.php.

Il existe des astuces basées sur un remplacement en jQuery, voir ici

Ou une autre possibilité, uniquement utilisable dans une datasctructure Templavoilà:

   10 = IMG_RESOURCE
   10.file.import = uploads/tx_templavoila/
   10.file.import.current = 1
   10.file.import.listNum = 0
   10.stdWrap.required = 1
   10.stdWrap.wrap (
      <img src="|" />
   )

Cette méthode vous permet de regagner le contrôle sur vos contenus images, qui vont s’adapter automatiquement à leur conteneur, jusqu’a la taille maximum de l’image.

Cette première solution souvent retenue pour la plupart des sites responsifs que j’ai pu voir est basique et un peu limité, je ne la conseille pas car elle force le chargement d’image non adaptées au support.

2ème solution: Génération d’une image adaptée à la taille de l’interface avec http://adaptive-images.com/