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/

1ère structure basée sur la génération proposée par adaptive-images.com/

Intégrateur TYPO3 depuis 2003, maintenant responsable du pôle d'expertise chez TalanSolutions. Je réalise des audits, des préconisations, des missions d'expertise. J'ai la chance de diriger le plateau technique Web PHP / TYPO3 d'EXL Group.

3 commentaires

  1. alienlebarge   •  

    Il est possible de « passer par dessus » les attributs width et height d’une image par CSS.
    imag {width: 100%; height: auto;}

    Par contre, cela ne changera rien au poids du fichier et demandera des ressource de la part du périphérique (et donc utilisation de la batterie) afin de redimensionner l’image.

    A noter que la technique du « Lazy Load » qui peut être intéressante pour éviter de charger toutes les images lorsque’on arrive sur une page. Elles sont chargées uniquement lorsqu’elle se trouve dans le viewport -> http://www.alienlebarge.ch/2012/06/06/le-chargement-du-paresseux/

  2. Cyril Wolfangel   •     Auteur

    Salut, décidément on aurait dû discuter ensemble à la T3UNI12, on essaye de ne pas se rater la prochaine fois !

    Effectivement, le Lazy Load est intéressant, de mon côté je préfèrerai générer dynamiquement des images adaptées aux breakpoints, puis faire du redimensionnement Css pour ajuster.

    Ce qui me tue tout de même, c’est que la plupart des sites responsifs que l’on voit en ce moment ne gèrent pas du tout ça et ne chargent qu’une seule image !
    Je suis en train de reflechir à la bonne logique d’intégration de la technique adaptive-image dans TYPO3, je fais un schéma que je viendrais remettre sur le blog, à bientôt

  3. stephen leger   •  

    Salut,
    il est parfaitement possible d’enlever « proprement » les attributs width et height des tags images avec typoscript, via la configuration de parseFunc.

    # Removing width and height attribs of images in typo3
    tt_content.image.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
    width.unset = 1
    height.unset = 1
    }
    tt_content.textpic.20.stdWrap.parseFunc.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
    width.unset = 1
    height.unset = 1
    }
    lib.parseFunc_RTE.nonTypoTagStdWrap.HTMLparser.tags.img.fixAttrib {
    width.unset = 1
    height.unset = 1
    }

    Le souci avec ces approches est plus la génération des images temporaires :
    dans l’idéal il faut être capable de stocker au moins deux versions de la même image à des résolutions différentes, servies en fonction du client.
    Il existe quelques extensions qui abordent ce problême.
    http://typo3.org/extension-manuals/templavoila_mobile/2.2.0/view/1/1/
    http://typo3.org/extensions/repository/view/adx_adaptive_images

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *