Permettre l'insertion d'images dans les commentaires sous forme bbcode

zetrader

Bonjour, il y a eu peu de temps, pour plus de convivialité dans les échanges dans les commentaires, j'ai intégré les smileys (plugin plxMyComSmilies) et réintégré le système gravatar (qui permettent à des utilisateurs d'être identifiés par leurs mails et avoir un avatar généré dans les coms). J'ai vu que le plugin plxMyComSmilies (qui remplace les smileys dans les commentaires par des émoticônes) s'inspirait au niveau code de Fluxbb.
Pour rendre encore un peu plus conviviaux les échanges en commentaires, sur la même méthode utilisée par par plxMyComSmilies pour remplacer les smileys par des images, ne serait-il pas possible de permettre l'insertion via un clic qui génère une balise bbcode img où l'utilisateur met l'url de l'image à afficher dans son com ?
Pluxml tendrait encore un peu plus vers les fonctions/la convivialité d'un forum mais sans la gestion des utilisateurs
Il n'est pas question de permettre l'upload d'images, mais plutôt faire comme ce forum (Fluxbb d'ailleurs), la possibilité d'insérer une image illustrant des propos (image qui est donc hébergée hors de notre serveur), en permettant uniquement les extensions d'images, je ne sais pas comment Fluxbb le génère, exemple de bbcode en cliquant sur l'icône img :

Bien sûr si cela n'est pas trop lourd à générer comme fonction, mais j'ai l'impression que ce ne serait pas tant de code que cela en plus pour le plugin plxMyComSmilies et cela pourrait rajouter pas mal de convivialité aux échanges (limite on a quasi plus besoin d'un forum si les commentateurs peuvent être identifiés via leur mail avec gravatar, peuvent mettre des smileys et des images)
Est-ce que cela serait gênant au niveau sécurité ? Pas plus que pour le forum fluxbb j'imagine, cela ne représente a priori pas de risques si c'est fait selon le même modèle.
Si cette discussion est plutôt à intégrer à celle du plugin plxMyComSmilies (puisque cela semble la voie la plus adaptée pour ajouter cette fonction), je laisse le modérateur déplacer mon message sur le topic approprié.
Merci pour vos réponses,

Pierre

Gzyg

Salut,

Le problème n'est pas tant le code (qui reste complexe) que la gestion des images postées : inscrit, pas inscrit, trop lourdes, trop grandes (la tienne pa exemple), trop hard, trop nombreuses, dossiers media, taille du serveur...
En plus du code, il faudra prévoir des filtres (par défaut ou par plugins), du css et de la modération. Donc du temps.

Niveau sécurité, tout ce qui permet à un utilisateur d'écrire sur un serveur (et uploader une image c'est écrire sur un serveur) présente un risque. Ça fait partie du "jeu". Chacun place le curseur où il veut.

De plus, les sites (non dédiés aux images) qui chargent trop d'images sont pénalisés en terme SEO pour lenteur excessive.

Mais sinon, ça doit être faisable. ]:D


à plus,

Gzyg

zetrader

Bonjour Gzyg, je te lis et j'ai l'impression qu'il y a mauvaise interprétation de mes propos, en aucun cas il y a upload d'images sur le blog, il y a juste affichage d'une image hébergée sur un autre site (cela peut aussi être des images au choix déjà présentes sur notre site, comme le sont les smileys, on peut imaginer plus de smileys ou gifs animés etc... sans changer le fond du plugin plxMyComSmilies, juste l'ajout d'une liste d'images plus grandes, le plugin faisant une liste d'images : les smileys étant déjà des images qui convertissent un bout de code dans les images correspondantes).
Regarde l'image que j'ai inséré, si tu fais un clic droit tu verras qu'elle n'est pas hébergée sur pluxml, donc le serveur hébergeant le blog ne supporte pas de charge supplémentaire, l'image étant téléchargée d'un autre site, c'est sur l'autre site que se fait l'appel des données à télécharger.
Sinon les histoires de personnes qui insèrent trop d'images ou des images trop grosses, j'y ai pensé et la réponse : la modération des commentaires, qui est encore plus facile que sur les forums puisqu'on peut faire de la modération avant publication (donc quelqu'un abuse on peut facilement le modérer avant même la publication de son abus, ou modifier la partie abusive de son com).
Mettons quelqu'un te met quelques images de 2 Mo chacune dans un com (faut le vouloir mais bon, exemple), si tu vois qu'il y a de l'abus, tu peux très bien côté admin modifier le com pour ne pas afficher les images, les transformer en simples url (et dans ce cas, seuls les gens qui veulent vont les voir) si les images sont énormes à charger.
C'est effectivement plus destiné à des images pas trop grosses non plus (un rappel peut être fait sur le blog au niveau des coms, pour éviter les dérives), en jpg ou png, des formats bien compressés, certainement pas des bmp
Pour ce qui est de mon image d'exemple, elle est en 800*600 c'est un jpg de 129 KB (pas énorme, non ?) :
http://zetrader.fr/images/plage-de-valencia-en-espagne-28-octobre-2013.jpg
Je viens de regarder le forum via le mobile, elle est redimensionnée via le style css du forum, donc s'adapte parfaitement à la lecture mobile, ce qui est le cas aussi quand je regarde via le mobile (qui n'est pas un foudre de guerre, sony xperia M, écran vraiment pas grand) l'article d'où est issu l'image, du fait du css de pluxml, l'image s'adapte automatiquement à la taille du mobile :
http://zetrader.fr/bref-mon-choix-immobilier-sur-l-espagne-a-valencia
Bref le même style css des images dans les articles peut s'appliquer aux coms pour qu'elles collent bien à la taille des écrans et rester "responsive design", après je suis d'accord qu'il faut éviter des images de un ou plusieurs Mo (je l'évite dans les articles, on peut effectivement se fixer la règle d'une taille maximum aussi des images pour les coms).

bg62

lut;)
Le problème de ce genre de possibilité d'intégration est surtout au niveau de la 'bande passante' du site, chose ET expérience que j'ai vécues ...
1 - un commentaire avec une image = ok , MAIS quand cette image, voire même le site lui-même seront HS >>> ???
2 - comment gérer la taille de l'image ?
3 - si trop de liens de ce genre, celui ou ceux qui vont s'y amuser verront peut-être un jour des problèmes arriver de 'leur' côté et mettront alors un système, genre " hotlinking " pour essayer d'y remédier = la tronche du commentaire ensuite ...
Il est bien vrai que cela serait ( peut-être ) un certain plus, quoique le système du 'BBCode' en lui-même peut laisser la porte ouverte à pas mal de choses, mais dans le cas d'une réelle mise en place, cela va demander obligatoirement un temps de vérification régulier à prendre de temps à autres pour éviter ce genre de problèmes, à moins que, via un plugin une vérifiaction des liens valides soir=t réellement possible ?
mais finalement, pourquoi pas ,

zetrader

Hello, oui je pense que tu as raison, à vouloir faire trop de convivialité pour les visiteurs, cela peut faire plus de risques et aussi de choses à maintenir dans le temps, pas faux le coup des images qui ensuite n'existent (parce que l'adresse sur laquelle pointe l'image n'existe plus, a changé de place etc...) c'est très probable que dans le temps on arrive à quelque chose qui ait beaucoup moins de sens avec des commentaires remplis de petites croix (images introuvables).
En proposant pour les commentaires :
1) le système gravatar qui permet d'être identifié lors des commentaires
2) le plugin permettant la conversion des smileys écrits en images émoticônes (plxMyComSmilies)

C'est vrai que c'est déjà pas mal pour la convivialité de la discussion avec les visiteurs du site.
On peut envisager de proposer plus d'images ou smileys (agrandir/personnaliser la liste des smileys) qui dans ce cas restent des images internes au site et évitent les fameuses images qui deviennent introuvables.
Pour ce qui est des images ou liens externes, la personne peut toujours mettre le lien en commentaire, c'est moins sexy qu'afficher une image directement dans le commentaire, mais bon cela permet de respecter le principe "keep it simple" et peut éviter bien des soucis de maintenance par la suite, tu n'as pas tort.
Je vais donc laisser tomber l'idée de l'intégration d'images dans les coms pour rester dans quelque chose de simple à gérer, même si je me doute que cela peut intéresser éventuellement d'autres personnes ^^

Deevad

Bonjour,
J'ai quelquechose du genre qui tourne sur mes PluXml ; une modification du plugin linkMyComments que j'ai lu sur le forum.
Ca donne ça par exemple : http://www.davidrevoy.com/article185/tutorial-getting-started-with-krita-1-3-bw-portrait#c1379533761-1
Tout liens finissant par *.gif, *.jpg, ou *.png est affiché après divers filtre de vérifications.

zetrader

Bonjour David, et la version modifiée, tu pourrais la partager ? Cela pourrait m'intéresser, pas que moi d'ailleurs peut-être, cela peut intéresser d'autres personnes de la communauté Pluxml j'imagine.

Deevad

@zetrader: Bonjour, oui. D'ailleurs je me demande ce qui m'est passé par la tête en novembre 2015 ( date du dernier message ) pour laisser ce commentaire et en même temps ne pas détailler plus la modification... Désolé. Merci du rappel.

Voici le plugin modifié :
http://www.peppercarrot.com/extras/forum/2016-12-13_modified-linkMyComments_for-images.zip

La modif est un paquet de règles pour les liens finissant en jpg, gif, png, etc... ajouté dans function.php à la ligne 242.
Suivant ce modèle, il est possible de détecter pas mal de liens différents et d'ajouter des comportements multiple. ( eg. pour un musicien, mettre des *.ogg, */mp3 ou *.wav directement dans un petit player html5 ).

zetrader

Merci, ça fonctionne bien, une remarque, dans le fichier functions.php j'ai changé rel="_blank" par target="_blank" en constatant que cela n'ouvrait pas dans une nouvelle fenêtre en cliquant sur l'image mais dans la même fenêtre, en mettant target au lieu de rel, cela ouvre bien dans une nouvelle fenêtre (je suis sous google chrome), j'imagine que le rel="_blank" devait avoir pour fonction d'ouvrir dans une nouvelle fenêtre quand on clique sur l'image, non ?

Deevad

Ha merci @zetrader, c'est bien une faute de syntaxe de ma part. Il y avait l'intention, mais pas le résultat

zetrader

De rien, j'ai aussi changé le width="480" par width="auto" puis finalement par...rien. Pourquoi ?
J'explique :
- en mettant une taille fixe comme 480, si l'image originale est petite, 120px par exemple, cela la grossit par 4 (assez moche et pire encore si elle est plus petite), si elle est grande par contre, cela la réduit visuellement à l'affichage, mais pas au chargement, si elle fait 3 Mo (des milliers de pixels par exemple, haute résolution), le navigateur chargera une image de 3 Mo et l'affichera dans 480 pixels, c'est d'ailleurs ainsi que des fois on peut voir d'anciens sites pas très optimisés afficher des images énormes en taille et réduites seulement en affichage visuel, donc mettre une taille fixe n'est pas forcément le mieux.
- width = "auto" va automatiquement prendre la taille maxi possible dans le commentaire, pas top si l'image est petite, cela la grossit
- ne rien mettre = le navigateur va récupérer la taille de l'image et l'afficher, 2 cas :
1) image petite elle sera affichée à sa taille originale dans le com
2) image grande elle sera affichée au maximum de la taille possible insérable dans le com, sans débordement, pourquoi ? parce que notre thème contient du css qui le limite déjà et l'empêchera de déborder, donc l'image se retrouve à sa taille maximale possible (qui dépendra aussi du média, tablette, ordinateur ou smartphone) tout en respectant le css, c'est donc a priori la meilleure option (l'idéal derrière serait de réduire la taille de l'image si elle est trop grande, mais si elle est grande, au moins qu'elle soit affichée à son format maximum possible dans le com).

Sinon un petit détail que j'ai vu : si on édite le com avec pluxml après avoir publié le com avec ses urls, les urls sont alors désactivées, j'imagine que c'est lié à une protection de Pluxml, on doit alors remplacer le code généré dans le com et remettre les urls à la place et sauver pour qu'elles puissent être à nouveau actives dans le com.