J’ai développé pour le site de subtiles modifications #responsive des raccourcis d’images de SPIP (les très classiques <img>, <doc>, <emb>), utilisés dans les quelques milliers de pages de l’ancienne version du site.
Voir par exemple les images insérées ici :
►http://www.lesartsdecoratifs.fr/francais/musees/musee-nissim-de-camondo/actualites/actuellement/exposition/le-centenaire-de-l-hotel-camondo
et jouer avec la largeur de la fenêtre sur une grande amplitude.
– Les images sont insérées dans une <figure>.
– D’abord, le positionnement des légendes des images change radicalement en fonction de la largeur de l’écran : quand j’ai assez de place (écran large), les légendes « sortent » de la colonne de texte. Le boulot, ici, est que ça fonctionne correctement selon les différentes maquettes (par exemple, la légende d’une image insérée à gauche dans une colonne de gauche pourra sortir de la colonne, mais pas dans une colonne de droite – puisque la légende irait s’afficher sur le texte de la colonne de gauche). Bref, il y a une petite foule de cas en fonction de la composition choisir et de la largeur de l’écran.
– Si cette histoire de légende est une utilisation « jolie » du responsive, mais n’apporte pas grand chose réellement en lisibilité, il y a un problème pénible avec le responsive et les images alignées à droite ou à gauche : lorsque la largeur de la colonne de texte rétrécit (smartphone), le texte qui habille l’image se comporte de manière totalement farfelue (parce que les « lignes » de texte à côté de l’image deviennent vraiment trop courtes). J’ai donc ajouté un petit javascript qui calcule la largeur occupée par l’image par rapport à sa colonne de texte et, si le pourcentrage est trop élevé, décide de modifier l’affichage de l’image (on passe en afficher centré et on rejette le texte à la suite, comme un <img|center>).
– Il y aussi des modèles d’insertion <video> qui fonctionnent en responsive :
▻http://www.lesartsdecoratifs.fr/francais/ecole-camondo/debouches/conversations
– Introduction d’une option <|large> dans les raccourcis, pour indiquer qu’on veut présenter les images de manière plus large que la colonne de texte. (Ça fonctionne aussi avec mes raccourcis d’intégration de vidéos.) Par exemple :
▻http://www.lesartsdecoratifs.fr/francais/musees/musee-nissim-de-camondo/l-hotel-et-les-collections