https://tracker.silverpeas.org/https://tracker.silverpeas.org/favicon.ico?17095821032022-09-27T06:45:27ZSilverpeas Issues TrackerSilverpeas Core - Feature #13206: Support des images au format .webphttps://tracker.silverpeas.org/issues/13206?journal_id=833242022-09-27T06:45:27ZNicolas Eysseric
<ul><li><strong>Version cible</strong> changé de <i>Version 6.3</i> à <i>Version 6.4</i></li></ul> Silverpeas Core - Feature #13206: Support des images au format .webphttps://tracker.silverpeas.org/issues/13206?journal_id=850452023-01-17T17:48:50ZYohann Chastagnieryohann.chastagnier@silverpeas.com
<ul><li><strong>Assigné à</strong> mis à <i>Yohann Chastagnier</i></li></ul> Silverpeas Core - Feature #13206: Support des images au format .webphttps://tracker.silverpeas.org/issues/13206?journal_id=850552023-01-19T11:13:51ZYohann Chastagnieryohann.chastagnier@silverpeas.com
<ul><li><strong>Statut</strong> changé de <i>New</i> à <i>In progress...</i></li></ul> Silverpeas Core - Feature #13206: Support des images au format .webphttps://tracker.silverpeas.org/issues/13206?journal_id=852962023-02-03T14:57:05ZYohann Chastagnieryohann.chastagnier@silverpeas.com
<ul><li><strong>Fichier</strong> <a href="/attachments/11600">myProfile_add.png</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/11600/myProfile_add.png">myProfile_add.png</a> ajouté</li><li><strong>Fichier</strong> <a href="/attachments/11601">myProfile_add_selected.png</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/11601/myProfile_add_selected.png">myProfile_add_selected.png</a> ajouté</li><li><strong>Fichier</strong> <a href="/attachments/11602">myProfile_modify_cancel_selected.png</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/11602/myProfile_modify_cancel_selected.png">myProfile_modify_cancel_selected.png</a> ajouté</li><li><strong>Fichier</strong> <a href="/attachments/11603">thumbnail_crop_button.png</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/11603/thumbnail_crop_button.png">thumbnail_crop_button.png</a> ajouté</li><li><strong>Fichier</strong> <a href="/attachments/11604">thumbnail_crop_popin.png</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/11604/thumbnail_crop_popin.png">thumbnail_crop_popin.png</a> ajouté</li><li><strong>Fichier</strong> <a href="/attachments/11605">thumbnail_crop_result.png</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/11605/thumbnail_crop_result.png">thumbnail_crop_result.png</a> ajouté</li><li><strong>Fichier</strong> <i>blog_customization_popin.png</i> ajouté</li><li><strong>Statut</strong> changé de <i>In progress...</i> à <i>Resolved</i></li><li><strong>% réalisé</strong> changé de <i>0</i> à <i>100</i></li></ul><p>Le format est maintenant pris en charge dans Silverpeas.</p>
<p>Il a également été question, dans le travail réalisé pour ce REDMINE, de centraliser le plus possible la gestion de sélection d'une image sur le PC dans un formulaire HTML.</p>
<a name="Editeur-WYSIWYG"></a>
<h3 >Editeur WYSIWYG<a href="#Editeur-WYSIWYG" class="wiki-anchor">¶</a></h3>
<p>Il était possible d'intégrer une image <code>webp</code> dans un contenu WYSIWYG en passant par la fonctionnalité <strong>Ajouter une image</strong> de l'éditeur <code>CKEditor</code>.<br />Il est maintenant possible de réaliser un <strong>drag & drop</strong> d'une telle image directement dans la zone d'édition de <code>CKEditor</code>.</p>
<p>A cette occasion, <code>CKEditor</code> a été mis à jour (4.16.2 à 4.20.1).</p>
<a name="Avatar-du-profil"></a>
<h3 >Avatar du profil<a href="#Avatar-du-profil" class="wiki-anchor">¶</a></h3>
<p>Le nouveau format est maintenant bien pris en compte et la popin permettant de mettre à jour son avatar a évoluée pour utiliser un nouveau composant <strong>Silverpeas</strong> réalisé avec <strong>VueJS</strong> :<br /><pre><code class="html syntaxhl" data-language="html"><span class="nt"><silverpeas-image-file-input></span>
</code></pre></p>
<p>Ce nouveau composant permet de centraliser le comportement de sélection d'une image.</p>
<p>Lors de la première modification de son avatar :<br /><img src="https://tracker.silverpeas.org/attachments/download/11600/myProfile_add.png" alt="" loading="lazy" /></p>
<p>Lorsque l'utilisateur a sélectionné une image, ou si l'utilisateur avait déjà un avatar d'enregistré, la popin présente un aperçu de l'image :<br /><img src="https://tracker.silverpeas.org/attachments/download/11601/myProfile_add_selected.png" alt="" loading="lazy" /><br />Il y a également la possibilité de supprimer l'image.</p>
<p>Dans le cas où un avatar existait déjà (dans les données serveur), après que l'utilisateur ait sélectionné une nouvelle image, il y a le bouton <strong>Retour</strong> qui permet d'abandonner sa sélection pour revenir à l'image précédente :<br /><img src="https://tracker.silverpeas.org/attachments/download/11602/myProfile_modify_cancel_selected.png" alt="" loading="lazy" /></p>
<p>La nouvelle image ou la suppression de l'image ne sont prises en compte que lorsque l'utilisateur clique sur le bouton <strong>Valider</strong>.</p>
<a name="Les-vignettes"></a>
<h3 >Les vignettes<a href="#Les-vignettes" class="wiki-anchor">¶</a></h3>
La manière de manipuler la vignette d'une actualité ou d'une publication de la GED a été revue sur 2 points :
<ul>
<li>prise en charge du nouveau format</li>
<li>meilleure intégration d'un point de vue transactionnel : en effet, aussi bien dans la modification d'une actualité ou que dans celle de l'entête d'une publication de la GED, les actions sur la vignette sont tantôt validées sur validation de la contribution elle-même (ajout, changement d'image), tantôt validées directement sans même valider la contribution (recadrage ou suppression)</li>
</ul>
<p>Les actions sur les vignettes sont maintenant toutes validées lors de la validation de la contribution.</p>
<p>Le composant <code><silverpeas-image-file-input></code> est utilisé ici avec la fonctionnalité de recadrage :<br /><img src="https://tracker.silverpeas.org/attachments/download/11603/thumbnail_crop_button.png" alt="" loading="lazy" /></p>
<p>Lorsque l'utilisateur clique sur le bouton <strong>Recadrer</strong>, une popin dédiée s'affiche :<br /><img src="https://tracker.silverpeas.org/attachments/download/11604/thumbnail_crop_popin.png" alt="" loading="lazy" /></p>
<p>Après validation du recadrage, l'utilisateur revient sur l'écran de modification de la contribution avec l'image recadrée (les données n'ont toujours pas été sauvegardées sur le serveur) :<br /><img src="https://tracker.silverpeas.org/attachments/download/11605/thumbnail_crop_result.png" alt="" loading="lazy" /></p>
<p>Le résultat de toutes les actions effectuées au niveau de la vignette est enregistré lors de la validation de la contribution.</p>
<p><ins>Remarque :</ins></p>
<p>Le nouveau composant est utilisé dans un mode où il est possible de sélectionner une image depuis une ou plusieurs banques d'images de <strong>Silverpeas</strong> s'il en existe.</p>
<a name="La-personnalisation-dun-blog"></a>
<h3 >La personnalisation d'un blog<a href="#La-personnalisation-dun-blog" class="wiki-anchor">¶</a></h3>
<p>La fonctionnalité de personnalisation d'un blog a également été revue pour prendre en compte le nouveau format d'image.<br />Cela a été l'occasion d'utiliser le nouveau composant détaillé dans les points précédents et d'en créer un nouveau dédié à la sélection de fichier :<br /><pre><code class="html syntaxhl" data-language="html"><span class="nt"><silverpeas-file-input></span>
</code></pre></p>
<p>Les composants sont utilisés ici dans un mode où le nom du fichier et sa taille en mémoire sont présentés.<br />La fonctionnalité de recadrage n'est pas sollicitée :<br /><img src="https://tracker.silverpeas.org/attachments/download/11608/blog_customization_popin.png" alt="" loading="lazy" /></p>
<a name="Les-images-de-la-médiathèque"></a>
<h3 >Les images de la médiathèque<a href="#Les-images-de-la-médiathèque" class="wiki-anchor">¶</a></h3>
<p>Le nouveau format est maintenant bien pris en compte dans La médiathèque.</p>
<hr />
PRs :
<ul>
<li><a class="external" href="https://github.com/Silverpeas/Silverpeas-Core/pull/1253">https://github.com/Silverpeas/Silverpeas-Core/pull/1253</a></li>
<li><a class="external" href="https://github.com/Silverpeas/Silverpeas-Components/pull/808">https://github.com/Silverpeas/Silverpeas-Components/pull/808</a></li>
</ul> Silverpeas Core - Feature #13206: Support des images au format .webphttps://tracker.silverpeas.org/issues/13206?journal_id=852972023-02-03T15:00:32ZYohann Chastagnieryohann.chastagnier@silverpeas.com
<ul><li><strong>Fichier</strong> <a href="/attachments/11608">blog_customization_popin.png</a> <a class="icon-only icon-download" title="Télécharger" href="/attachments/download/11608/blog_customization_popin.png">blog_customization_popin.png</a> ajouté</li></ul> Silverpeas Core - Feature #13206: Support des images au format .webphttps://tracker.silverpeas.org/issues/13206?journal_id=852982023-02-03T15:01:30ZYohann Chastagnieryohann.chastagnier@silverpeas.com
<ul><li><strong>Fichier</strong> <del><i>blog_customization_popin.png</i></del> supprimé</li></ul> Silverpeas Core - Feature #13206: Support des images au format .webphttps://tracker.silverpeas.org/issues/13206?journal_id=853172023-02-06T15:07:32ZMiguel Moquillonmiguel.moquillon@silverpeas.com
<ul><li><strong>Statut</strong> changé de <i>Resolved</i> à <i>Integration in progress...</i></li></ul> Silverpeas Core - Feature #13206: Support des images au format .webphttps://tracker.silverpeas.org/issues/13206?journal_id=853332023-02-07T15:57:00ZMiguel Moquillonmiguel.moquillon@silverpeas.com
<ul><li><strong>Statut</strong> changé de <i>Integration in progress...</i> à <i>Closed</i></li></ul><p>J'ai intégré la feature. Toutefois, des améliorations sont nécessaires et pourraient faire l'objet d'une autre feature :</p>
<ul>
<li>Lorsque l'on modifie une image, on peut revenir en arrière avec le bouton vert précédent. Mais on ne peut pas revenir en avant si finalement on change d'avis. Ceci peut être utile lorsque l'utilisateur a envie de comparer à l'affichage l'image d'avant avec celle nouvellement choisie. Il serait bien de proposer aussi un bouton vert suivant lorsque l'utilisateur est sur l'image précédente.</li>
<li>Il est dommage que l'on ne puisse recadrer sa photo de profil comme avec n'importe quel outil moderne actuel</li>
<li>La photo de profil choisie n'est pas affichée correctement sur la page de profil de l'utilisateur : elle est rognée ! Ce qui donne une fausse information à l'utilisateur comme quoi son image de profil va être rognée dans tout Silverpeas (ce qui n'est pas le cas : dans l'annuaire elle est rognée, mais partout ailleurs elle est ... déformée !). Pour éviter ce genre de déboire, il faudrait permettre à l'utilisateur de recadrer sa photo de profil (voir point précédent).</li>
</ul>