1

Plugin SPIP : Insertion avancée d’images

18 mai 2017
par ARNO*

Le plugin « Insertion avancée d’images » modernise le raccourci <img> et le rend beaucoup plus moderne, cohérent et responsive. Il ajoute au raccourci une collection de variantes qui permettent d’animer la page. Il offre de plus des raccourcis supplémentaires, <ligne> et <slide> destinés à afficher des images côte à côte.

Le plugin « Insertion avancée d’images est disponible sur la zone, et via l’installation automatique de l’espace privé de SPIP. Il est recommandé pour la version 3.0 au minimum (et, pour le raccourci <slide>, pour la version 3.1).

– Quand on a conçu SPIP en 2000, la bande passante utilisée par les images restait une question importante : on affichait les images en petit dans les articles, et on proposait de cliquer dessus pour que l’utilisateur puisse les charger uniquement s’il en a envie. Clairement, plus personne ne fait ça… On veut des images en grand et puis c’est tout. C’est aussi pour cela qu’on affiche le type et le poids du fichier dans <doc> (pour que l’utilisateur ait une idée de ce qui l’attend s’il clique sur ce terrifiant fichier de… 160ko) ; mais aujourd’hui, en dehors de fichiers spécifiques, genre gros PDF ou fichier d’image monstrueux, ça n’a pas de sens de continuer à le faire pour des images…

Bref, le coup d’insérer des petites vignettes cliquables au lieu de grandes images, ça ne se fait plus du tout.

À l’inverse, insérer de belles grandes images qui occupent toute la largeur de la colonne, c’est la norme désormais.

– Une habitude (étrange…) qu’on avait était d’insérer des petites images sans légende à l’intérieur des textes. Bon, ça non plus, ça ne se fait plus : quand on met une image, si on a une légende, hé ben on affiche la légende, ça ne coûte pas plus cher…

– Un usage que j’ai supprimé de mes sites : la différence entre portfolio et hors portfolio. Si une image est associée à un article, c’est qu’on veut l’afficher dans tous les cas (si on veut conserver des images dans le site, mais sans les associer à un article, on a maintenant la médiathèque). Donc une image s’affiche toujours de la même façon avec le raccourci <img>, et si elle n’est pas affichée dans l’article, on la mettra dans le portfolio en dessous, sans se demander si elle est dans le « portfolio » (au sens technique SPIP) de l’article, parce que c’est une notion incompréhensible pour les usagers.

Je ne l’ai pas encore fait dans ce plugin, mais je pense qu’il faudrait complètement réserver l’utilisation de <doc> à des présentations de documents à télécharger, genre grosses images ou fichiers PDF, et ne plus du tout l’utiliser pour insérer des images dans le texte. Du coup, sur mes sites, j’utilise désormais uniquement <img> pour insérer des images, et plus jamais <emb> ni <doc>.

1. Refonte du raccourci <img>

Fondamentalement, c’est une modification complète du fonctionnement du raccourci <img> : l’image est affichée « en grand », et jamais sous forme de vignette. Elle peut être évidemment placée au centre, à gauche ou à droite, mais l’utilisation première est d’afficher l’image sur toute la colonne de texte disponible.

Une idée vraiment importante est de se débarrasser totalement de la différence entre les images du portfolio et les images hors du portfolio : les images s’affichent de la même façon dans tous les cas, et jamais sous forme de vignette.

2. Si on a mis un titre, un descriptif et/ou des crédits, ils s’affichent avec <img>. C’est dans la continuation de la logique précédente : si on met un titre, c’est qu’on veut un titre. Donc <img> affiche toujours le titre (quand il est renseigné).

3. C’est responsive, évidemment.

4. Balisage moderne avec <figure> et <figcaption>.

5. Une image est cliquable (pour afficher le grand format) automatiquement si elle fait plus de 800 pixels dans une de ses dimensions. Pas de considération de la notion SPIP de « portfolio » ici (voir ci-dessus : c’est une notion qu’on devrait totalement abandonner je pense) : si une image est assez grande, elle est cliquable et puis c’est tout…

On conserve la possibilité de faire un lien hypertexte « à la main » sur une image, même si je pense que l’usage a également plus ou moins disparu de nos jours (quand on clique sur une image, on s’attend plutôt à la voir en grand, pas à changer de page).

Et ainsi, le raccourci de base est toujours :

qui affiche l’image à la largeur de maximale de la colonne de texte (éventuellement plus petite si l’image est plus petite), avec son titre, son descriptif et ses crédits, de manière responsive et en gérant les écrans haute définition :

L'image montre un plateau de muffins décorés de manière ludique. Il y a douze muffins, chacun ornés de glaçage coloré. Les six muffins du haut sont recouverts d'un glaçage rose et représentent des visages amusants, avec des yeux en sucre blancs et des bouches rouges. Les six muffins du bas affichent des glaçages bleus et verts, également avec des visages souriants, mais avec des motifs et des couleurs différentes. L'ensemble donne une impression joyeuse et créative, parfait pour une fête ou une occasion particulière.
Des cupcakes Pokémon.
Celui en bas à droite a pris un coup de chaud…

6. Possibilité de forcer la largeur d’une image « à la main » :

L'image montre trois figurines en pâte à modeler. À gauche, il y a un Pikachu jaune avec des joues rouges. Au milieu, un Charmander orange, assis. À droite, un Squirtle bleu, également assis. Les trois figurines sont bien colorées et semblent être des personnages inspirés de la franchise Pokémon. Elles sont placées sur une surface en bois.
Trois petits bonhommes en Patarêve

Noter que techniquement, dans ce cas on aura grâce au plugin image_responsive une gestion plus avancée du balisage, mieux adaptée au chargement anticipé des images, puisque ça va utiliser le srcset avec les valeurs 1x et 2x (pour le retina).

7. Une subtilité javascript épatante ici : les images flottantes à droite ou à gauche, c’est très joli sur un grand écran, mais sur un téléphone ça détruit généralement complètement la maquette, parce qu’on met une image « flottante » de 250 pixels dans une colonne de 320 pixels, et qu’il reste du coup 70 pixels pour afficher le texte, et généralement c’est une catastrophe.

Le plugin inclue donc un mécanisme javascript qui vérifie la largeur des images flottantes et de la colonne de texte pour supprimer le float quand l’image devient proportionnellement trop large par rapport à sa colonne d’affichage (plus de 60% de la colonne de texte). Dans ce cas l’image est « forcée » en présentation centrée, avec sa légende, et on récupère un affichage optimal même sur petit écran.

À l’inverse, on peut aussi se prévoir des styles pour les écran très larges (ça c’est pas directement dans le plugin, mais le balisage le permet facilement) :

8. Option de présentation : rond : ça force l’image à s’afficher dans un cercle. Oui, tout rond. Même si l’image est un JPG, ça se fait en CSS, donc ça évite de recourir à un PNG dix fois plus gros.

L'image montre une figurine en pâte à modeler représentant un personnage de dessin animé. Ce personnage est de couleur jaune, avec de grandes oreilles pointues. Il a des joues rouges et des yeux noirs avec des pupilles blanches. La posture est assise, et le personnage a un air mignon et stylisé. Les détails tels que les oreilles noires aux extrémités ajoutent une touche de charme à la création.

Si on veut obtenir un rond exact, il faut que l’image en question soit déjà carrée. Sinon on obtiendra un oval, généralement assez moche.

Ça peut valoir le coup de l’associer à l’option largeur si on veut faire flotter une grande image à droite ou à gauche :

L'image montre une figurine en pâte à modeler représentant un personnage de dessin animé. Ce personnage est de couleur jaune, avec de grandes oreilles pointues. Il a des joues rouges et des yeux noirs avec des pupilles blanches. La posture est assise, et le personnage a un air mignon et stylisé. Les détails tels que les oreilles noires aux extrémités ajoutent une touche de charme à la création.

9. Trop mignon avec un navigateur récent : une image arrondie (avec rond) flottante forcera un habillage irrégulier par le texte : c’est-à-dire que le texte habillera le cercle de façon… circulaire, et non en rectangle. Ça se fait directement en CSS avec shape-outside. C’est automatique quand on utilise ˋrond`, pas besoin d’option supplémentaire.

L'image montre une figurine en pâte à modeler ou en céramique qui représente un personnage jaune avec des oreilles pointues. Ce personnage a des joues rouges et de grands yeux noirs, ce qui lui donne un aspect mignon et expressif. Il est assis, avec un corps rond et des pattes courtes. Les couleurs vives et le style stylisé rappellent un personnage de dessin animé.

10. Extrêmement puissant : on peut demander un habillage irrégulier automatiquement sur les images JPG dotées d’un fond uni grâce à l’option shape. Attention, ça n’utilisera pas ma vieille technique de « tranches » (de image_ragged), mais sur la base d’un polygon calculé avec une nouvelle fonction : image_detourer_polygon. Ça c’est carrément spectaculaire.

11. Une petite animation rigolote : l’option flip permet de faire tourner l’image sur elle-même lorsqu’elle apparaît dans le viewport (en fonction du scroll, donc). Ça donne l’impression d’une pièce de monnaie qui tourne sur elle-même avant de s’arrêter pour s’arrêter :

L'image montre un plateau de cupcakes décorés pour ressembler à Pikachu, un personnage célèbre de l'univers Pokémon. Les cupcakes ont un glaçage jaune avec des yeux en sucre bleu, des joues roses et une petite bouche. Ils ont également des petites oreilles pointues qui sortent du glaçage, renforçant leur ressemblance avec le personnage. Ils sont présentés dans des caissettes en papier de couleur jaune sur une assiette blanche.
Notre collection de cupcakes Pikatchu

ça devient encore plus fun si on force l’affichage dans un rond :

L'image montre une figurine en pâte à modeler représentant un personnage de dessin animé. Ce personnage est de couleur jaune, avec de grandes oreilles pointues. Il a des joues rouges et des yeux noirs avec des pupilles blanches. La posture est assise, et le personnage a un air mignon et stylisé. Les détails tels que les oreilles noires aux extrémités ajoutent une touche de charme à la création.

ou carrément dans un rond flottant avec le détourage automatique :

L'image montre une figurine en pâte à modeler représentant un personnage de dessin animé. Ce personnage est de couleur jaune, avec de grandes oreilles pointues. Il a des joues rouges et des yeux noirs avec des pupilles blanches. La posture est assise, et le personnage a un air mignon et stylisé. Les détails tels que les oreilles noires aux extrémités ajoutent une touche de charme à la création.

12. Et enfin l’animation la plus puissante : le zoom sur un détail de l’image avec l’option kenburns (déterminé avec le plugin centre_image) :

L'image montre un plateau de cupcakes décorés pour ressembler à Pikachu, un personnage célèbre de l'univers Pokémon. Les cupcakes ont un glaçage jaune avec des yeux en sucre bleu, des joues roses et une petite bouche. Ils ont également des petites oreilles pointues qui sortent du glaçage, renforçant leur ressemblance avec le personnage. Ils sont présentés dans des caissettes en papier de couleur jaune sur une assiette blanche.
Notre collection de cupcakes Pikatchu

C’est une animation volontairement lente, mais alors : extrêmement spectaculaire… Et pour le coup, ça a généralement un véritable intérêt éditorial.

13. Nouveau raccourci : <ligne>

Et enfin, la possibilité d’afficher plusieurs images sur une même ligne, avec adaptation aux différentes tailles d’écran, avec un nouveau raccourci : <ligne> :

Cela fabrique un portfolio local (on peut en faire plusieurs dans un même article) où l’on tente d’aligner les images horizontalement sur une ou plusieurs lignes, en adaptant leurs dimensions, de façon à obtenir des lignes qui occupent toute la largeur :

  • L'image semble être une couverture de livre intitulée "Au plus près de la planète Mars". Sur fond sombre, le mot "MARS" est écrit en grandes lettres au centre. Une représentation de la planète Mars est visible, mettant en avant sa surface, et des noms d'auteurs ou de contributeurs sont mentionnés en bas. Ce livre pourrait aborder des sujets liés à l'exploration de Mars et ses particularités.
    Au plus près de la planète Mars
  • L'image présente la couverture d'un livre intitulé **"L'état de plasma : le feu de l'univers"** de Thierry Lehner. Le fond montre une représentation visuelle du soleil, illustrant des éclats de lumière et des textures qui évoquent le plasma. Le titre est en lettres grandes et visibles, tandis qu'en bas, on trouve le nom de l'auteur et mention d'une préface par Jean-Pierre Pharabod. L'ensemble transmet une impression de chaleur et de dynamisme, en lien avec le sujet de l'astrophysique et des états de matière.
    L’état de plasma
  • L'image montre une couverture de livre intitulée "Au plus près de Saturne". Elle présente une belle illustration de la planète Saturne, mettant en valeur ses anneaux caractéristiques. Le titre est inscrit en lettres blanches sur fond noir, avec des informations supplémentaires en bas concernant les contributeurs et le coordinateur du livre. L'ensemble dégage une atmosphère scientifique et captivante, évoquant l'exploration de cette planète fascinante.
    Au plus près de Saturne
  • L'image représente la couverture d'un livre intitulé "La saga du micro-ordinateur" par Henri Lilen. On y voit des dessins stylisés de petits oiseaux et de maisons évoquant des nichoirs. Les illustrations sont colorées et humoristiques, ajoutant une touche ludique au thème technologique du micro-ordinateur. Le style graphique semble simple et enfantin, attirant un large public.
    La saga du micro-ordinateur

Noter qu’ici encore, s’il y a des titres, descriptifs et/ou crédits, ça s’affiche. Sinon, non.

C’est à la fois très puissant, et assez déstabilisant, parce que la composition est automatique et… responsive. Du coup l’affichage dépend énormément des proportions des images et de la taille de l’écran. Du coup il faut réussir à se faire à l’idée que l’affichage sera variable, semi-automatique, et ne pas chercher à avoir des positionnements absolus qu’on décrète soi-même (ce qui est le « problème » de la mise en page responsive : il faut accepter que ça se recompose).

14. Ça prend en compte l’option large :

L'image montre trois figurines en pâte à modeler. À gauche, il y a un Pikachu jaune avec des joues rouges. Au milieu, un Charmander orange, assis. À droite, un Squirtle bleu, également assis. Les trois figurines sont bien colorées et semblent être des personnages inspirés de la franchise Pokémon. Elles sont placées sur une surface en bois.
Trois petits bonhommes en Patarêve

qui se contente d’insérer une classe .large. Ça ne sert pas à grand chose pour l’instant, mais c’est extrêmement utile dans un autre de mes plugins (pas diffusé pour l’instant), et chacun pourra de toute façon bidouiller ses feuilles de style soi-même : ça permet d’afficher cette image plus large que la colonne de texte.

15. Nouveau raccourci : <slide>

Il y a désormais un raccourci super-méga-trop-la-classe : <slideXXX>, qui fabrique automatiquement un slider horizontal quand on en met plusieurs à la suite. Par exemple :

provoque l’affichage suivant :

  • L'image montre trois figurines en pâte à modeler. À gauche, il y a un Pikachu jaune avec des joues rouges. Au milieu, un Charmander orange, assis. À droite, un Squirtle bleu, également assis. Les trois figurines sont bien colorées et semblent être des personnages inspirés de la franchise Pokémon. Elles sont placées sur une surface en bois.
    Trois petits bonhommes en Patarêve
  • L'image montre un plateau de cupcakes décorés pour ressembler à Pikachu, un personnage célèbre de l'univers Pokémon. Les cupcakes ont un glaçage jaune avec des yeux en sucre bleu, des joues roses et une petite bouche. Ils ont également des petites oreilles pointues qui sortent du glaçage, renforçant leur ressemblance avec le personnage. Ils sont présentés dans des caissettes en papier de couleur jaune sur une assiette blanche.
    Notre collection de cupcakes Pikatchu
  • L'image montre un plateau de muffins décorés de manière ludique. Il y a douze muffins, chacun ornés de glaçage coloré. Les six muffins du haut sont recouverts d'un glaçage rose et représentent des visages amusants, avec des yeux en sucre blancs et des bouches rouges. Les six muffins du bas affichent des glaçages bleus et verts, également avec des visages souriants, mais avec des motifs et des couleurs différentes. L'ensemble donne une impression joyeuse et créative, parfait pour une fête ou une occasion particulière.
    Des cupcakes Pokémon.
    Celui en bas à droite a pris un coup de chaud…

À l’usage : je recommande d’avoir pour ce slider des images ayant exactement les mêmes proportions, c’est ce qui donne l’aspect régulier et bien aligné de ce genre de présentation. Si les images n’ont pas les mêmes proportions, on se retrouve avec des images de hauteurs différentes, l’alignement horizontal n’est plus respecté, et c’est nettement moins élégant.

Je suis très content, c’est totalement responsive, multilingue (même en direction rtl) et ça fonctionne entièrement sans Javascript. (Attention, limitation : on ne peut mettre actuellement que 8 images à la suite, mais ça fait beaucoup pour un slider.)

L’intérêt c’est de mettre ces petits sliders (idéalement 2 ou 3 images pas plus) directement dans le corps du texte, et donc d’en mettre plusieurs dans différents endroits du texte si on veut.

Un petit javascript gère, par ailleurs, le « swipe » horizontal pour passer d’une image à l’autre sur écran tactile.

Qui êtes-vous ?
Votre message

Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.