Changeset 103856 – SPIP-ZONE

/103856

    • 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.

    • Outre le fait que personne ne comprend vraiment la logique <img>, <doc> ou <emb>, la question qui prime est le fait que les usages qui ont justifié ces différents raccourcis ont disparu.

      – 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 occupe 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>.

    • 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).

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

      <img23|right|largeur=300>

      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.

      <img13|center|rond>

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

      <img13|left|rond|largeur=200>

      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.

      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 :

      <img13|center|flip>

      ça devient encore plus fun si on force l’affichage dans un rond :
      <img13|center|rond|flip>

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

      <img13|left|rond|flip|largeur=200>
    • 12. Et enfin l’animation la plus puissante : le zoom sur un détail de l’image (déterminé avec le plugin centre_image) :

      <img13|center|kenburns=1.6>

      Je pense qu’il faudrait renommer l’option simplement zoom, parce que personne n’arrive jamais à mémoriser ça…

      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. 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> :

      <ligne13>
      <ligne14>
      <ligne15>

      Ça c’est vraiment impressionnant… (en revanche, je n’utilises pas le même code HTML que pour les <img>, alors que je pense que je devrait le faire, pour profiter des raccourcis décrits précédemment).

      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).

    • Bon, je dois m’absenter pour la journée, je compléterai avec des copies d’écran plus tard. Mais déjà, j’invite les Spipeurs•ses à jouer avec, parce que c’est un outil que j’installe sur tous mes sites, et qui change radicalement leur fonctionnement. Je suis très très très très preneur de retours à ce sujet.

    • Pas testé, mais sur le principe ça rejoint en partie le plugin Medoc de @tetue, en ajoutant le côté responsive.
      Mais il y a beaucoup de gadgets visuels : ça mériterait deux plugins distincts (un plugin = une fonction).

      Après, la « doc » et la discussion sur seenthis n’engagent pas vraiment la discussions avec la communauté #SPIP.

    • Ma remarque sur le lieu approprié pour le discussion est un peu sèche et pourrait être mal interprétée : pas d’arrière pensée de ma part, juste une remarque pratique sur le fait que tu « invites les Spipeurs•ses à jouer avec ».

    • @nicod_ : yep, attention à ne pas confondre évol d’affichage des modèles et débug ergo.

      1) Medoc n’est qu’un patch (grossier) qui corrige un bug ergo (hyper chiant quand on y confronté, totalement imperceptible pour les autres)
      2) et (plein) d’autres plugins proposent des variantes d’affichage des modèles, responsive ou pas, toussa, toussa…

      En tant que patch correctif, Medoc s’utilise avec n’importe lequel de ces autres plugins (dont il doit rester distinct).
      Il n’aura plus de raison d’être lorsque le « mode » (« image » ou « document ») aura disparu de la table spip_documents ainsi que ses implications (différence entre portfolio et hors portfolio)… chose que je suis infichue de savoir faire, d’où cet affreux petit sparadrap appelé Medoc ;)

      @arno : je suis ravie à l’idée d’essayer ton plugin prochainement :)

    • Merveilleux ! Super boulot, merci de le partager !
      Une remarque sur la notion d’image insérée sans légende, c’est en fait essentiel pour l’accessibilité de pouvoir définir un titre inséré dans le alt de l’image, mais qu’on ne tient pas à afficher en dessous de l’image en légende.

      Actuellement
      <img> insère l’image avec le titre en alt
      <doc> insère l’image avec le titre en légende en dessous

      Donc, dans la logique de ce que tu as fait, un paramètre |legend ou |nolegend serait pertinent, non ?

    • @tetue me suis mal exprimé, et trop vite.

      Je parlais de

      Fondamentalement, c’est une modification complète du fonctionnement du raccourci <img>

      qui est le côté très intéressant du plugin de @arno, et qui rejoint ta réflexion sur medoc.

      Avec l’ajout du paramétrage de largeur et le côté responsive, ça en fait un travail intéressant qui peut alimenter la réflexion sur la refonte de la gestion des docs dans SPIP (d’où ma remarque également sur le lieu pour en discuter).

    • Merci @arno , ce plugin a l’air très bien, et rempli de bonnes idées.

      Une remarque sur <ligneXX> : je vois* que cela crée autant de <ul> que de <ligne>. Est-ce qu’une syntaxe tel que <ligne|XX,YY,ZZ> ne serait pas plus appropriée, ce qui permettrait de n’avoir qu’un conteneur pour les 3 documents ?

      Le terme « ligne » en lui-même aussi est un peu flou, mais je n’ai pas d’idée là comme ça à part avoir une autre notion tel que <images|ligne|XX,YY,ZZ> , <images|cases|XX,YY,ZZ> peut être… ce qui deviendrait un « modèle d’affichage d’une liste de documents sélectionnés »

      * note : le modèle est ainsi fait, mais un pipeline enlève ensuite les ul en trop sur ces lignes…

    • Ah ou… si autant de balises <ligneXX> que de documents à afficher est conservé (plutôt que d’1 pour n documents), pourquoi ne pas utiliser plutôt <imgXX|ligne> ou <docXX|ligne> finalement directement ? ça paraîtrait bien également non ?

    • Sur <ligne>

      D’abord, je voudrais refaire le code de ce modèle pour qu’il utilise le même code que <img> pour l’affichage de l’image et des intitulés ; pour l’instant ce n’est ni le même code ni la même logique de fonctionnement, ce qui pose différentes difficultés :

      – les images de <ligne> s’affichent en background, ce qui fait qu’elles ne sont généralement pas imprimées et/ou difficiles à sauvegarder dans un PDF ; et autres petites difficultés d’utilisation quand les images sont des background…

      – le fait d’avoir deux codes à maintenir, c’est un peu chiant (c’est pas dramatique, parce que j’utilise énormément ce plugin, mais c’est chiant)…

      – j’aimerais bien avoir les mêmes fonctionnalités (notamment le zoom kenburns dans l’image) y compris sur les images en ligne…

      Du coup, utiliser carrément le même modèle avec <imgXX|ligne>, ça semble une bonne piste (surtout que ligne remplace exactement center, left et right dans leur logique de positionnement).

      Difficulté : je pense que certaines fonctionnalités n’ont rien à faire dans ligne (notamment forcer la largeur), et donc ça va commencer à faire du code un peu complexe.

      En revanche, je ne pense pas intéressant de fusionner la déclaration de plusieurs images dans le même modèle :
      – d’abord parce que c’est chiant à manipuler (quand on fait des articles, on déplace beaucoup les images, surtout qu’avec ligne ça demande des réglages parce que certaines associations fonctionnent moins bien que d’autres), et du coup le copier-coller d’une ligne pour une image, c’est plus pratique que d’aller éditer le modèle avec plusieurs images,
      – parce que je voudrais pouvoir passer des fonctionnalités différenciées sur chaque image (comme l’effet de zoom).

    • J’oubliais une option :

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

      <imgXX|center|large>

      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.

    • Hello, :-)
      Je viens de faire un test de ton plug pour voir, j’ai un bug avec un SPIP 3.1.4-dev [23345] (php5.6.25), j’ai deux images dans la médiathèque que j’ajoute à un article, je mets donc <img2|left> <img1|left> avec du texte avant chaque image, si je clique sur l’onglet « voir » du porte plume, les images apparaissent et disparaissent d’un coup, quand à l’onglet « plein écran » du porte plume, je ne vois même pas les images, à savoir qu’il n’y a que ton plug et « image_responsive » dans les plugs. A savoir, il faut que je fasse plus de test, mais la première fois, comme il s’agissait d’un spip tout neuf, j’ai activé ton plug avant d’aller dans /ecrire/ ?exec=configurer_avancees et que le résultat, c’est que cette page plante (page blanche) avec juste le logo « infini » et l’url qui s’écrit /ecrire/ ?exec=configurer_avancees&action=tester_taille&i=1&arg=6000-6000 j’ai aussi pas mal de notice dans l’article, mais ça c’est pas grave, cela vient sans doute que dans mes_options, je demande à les voirs

    • Je pense avoir compris le problème, par contre, je ne sais si c’est un bug de spip ou du plug :-(
      Pour info, pour voir le problème, il est important qu’après l’installation d’un spip neuf, de ne pas faire le choix d’un type d’url dans /ecrire/ ?exec=configurer_urls , donc le laissé comme il est nativement, puis d’aller dans ecrire/ ?exec=depots pour faire l’ajout du dépôt de la zone, enfin, installer le plugin « medias_responsive_mod » en manuel dans le dossier « plugin » et laissé spip installer la dépendance « Filtre image_responsive », télécharger un jpeg dans la médiathèque, activer le plugin « medias_responsive_mod » et faire un article.
      Avec ou sans htaccess, il y n’y a pas de changement de mon côté

    • Salut @arno

      un souci rencontré avec image_responsive (je n’ai pas trouvé le seen dédié, donc je me permet de poster ici) :

      Sur un SPIP 3.0.3 avec uniquement ce plugin installé, j’ai cette erreur dans la console de Firefox :

      Et quand je regarde ce fichier dans local/cache-js, j’ai (ça donne un a circonflexe majuscule dans le source Firefox)

      Si je désactive la compression js dans l’espace privé, plus de problème.

      La ligne en question se trouve dans https://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive/javascript/image_responsive.js#L311

      En regardant de plus près, il semble y avoir également un souci là https://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive/javascript/image_responsive.js#L388 (carré de couleur rouge matérialisant une erreur ?)

      (Le fil sur spip_zone : https://www.mail-archive.com/spip-zone@rezo.net/msg43360.html )

    • Salut,

      Sur le point n°5 :

      Une image est cliquable (pour afficher le grand format) automatiquement si elle fait plus de 800 pixels dans une de ses dimensions.

      Ligne 37 du modèle img.html, il y a un test sur la taille pour utilise soit un <span>, soit un <a> mais, dans les 2 cas, il y a un href="#FICHIER" ce qui, dans le cas du span, crée une erreur de validation.
      Idem pour le type="#MIME_TYPE" (et pour les class et data-photo ?)

      cf : https://zone.spip.org/trac/spip-zone/browser/_plugins_/medias_responsive_mod/squelettes/modeles/img.html#L37

      Il ne faudrait pas tester si on a un lien ou un span avant de les insérer ?