Curseur de comparaison d'images

Personnalisation Composant de thème
22

Y a-t-il un moyen pour que cela fonctionne avec des photos qui ne sont pas téléchargées ? Avec des photos qui sont insérées via des liens ?

23

Bonjour, je souhaiterais signaler un bug récent avec ce composant de thème.

Un message d'erreur affiché sur un site web indique que les publications peuvent ne pas s'afficher correctement en raison d'un problème avec un 'Image Comparison Slider' et suggère de le mettre à jour, de le reconfigurer ou de le désactiver. (Légendé par l'IA)
Un message d'erreur affiché sur un site web indique que les publications peuvent ne pas s'afficher correctement en raison d'un problème avec un 'Image Comparison Slider' et suggère de le mettre à jour, de le reconfigurer ou de le désactiver. (Légendé par l'IA)1200×207 24.9 KB

Visible ici :

Dernière version du curseur de comparaison d’images

Version de Discourse : 3.5.0.beta1-dev

(402ec6bf5c)

Merci pour votre travail
Stéphane.

2 « J'aime »
24

J’ai mis à jour ce composant pour répondre aux nouvelles normes de l’API :

2 « J'aime »
25

Beau travail !

Pour ne pas vous en demander plus… mais… avez-vous jeté un œil à cela en utilisant le nouveau compositeur de texte enrichi ?

1 « J'aime »
26

Je ne l’ai pas fait, y a-t-il un problème avec ça ?

2 « J'aime »
27

Oui, malheureusement, cela ne fonctionne pas. Je vois ceci après avoir cliqué sur le bouton d’image de comparaison lorsque l’éditeur de texte enrichi est activé :

CleanShot 2025-09-24 at 10.30.26@2x
CleanShot 2025-09-24 at 10.30.26@2x1586×1374 88.3 KB

1 « J'aime »
28

Je ne suis pas sûr de la façon de faire fonctionner cela, il semble que l’éditeur de texte enrichi gère mal le HTML. J’imagine que vous verriez le même problème sur tout composant similaire comme une galerie d’images.

2 « J'aime »
29

Salut Joseph, ça te dérangerait si j’essayais de réparer le composant ?

2 « J'aime »
30

Ne supposez-vous pas que vous avez le temps de regarder cela ou d’accepter l’offre de @Arkshine ? :smiley:

1 « J'aime »
31

Désolé, j’ai oublié de répondre. J’aimerais beaucoup que quelqu’un d’autre avec plus de connaissances essaie cela, l’instance Discourse à laquelle j’ai accès n’a pas la fonctionnalité de test riche activée et je n’ai pas la possibilité de l’activer, donc je ne peux pas vraiment tester ça :thinking: merci d’avoir proposé !

3 « J'aime »
32

OK, merci de me l’avoir fait savoir, je vais essayer. :+1:

3 « J'aime »
33

Bon, les amis, j’ai enfin eu le temps de travailler là-dessus.
J’espère qu’il reste encore un certain intérêt pour ce TC !

La PR refond entièrement le TC avec les fonctionnalités suivantes :

  • Zoom et panoramique (molette de la souris, pincement et contrôles sur l’image)
  • Affichage plein écran
  • Ouverture des images originales en taille réelle dans la lightbox
  • Étiquettes « avant/après » optionnelles avec un placement configurable
  • Légende optionnelle
  • Plusieurs styles de poignée (ligne, fine, cercle, poignée de saisie) et une couleur de poignée personnalisable
  • Modification des curseurs directement dans l’éditeur de texte enrichi ou via Markdown
  • Accessibilité clavier (les flèches déplacent le séparateur, +/-/0 pour zoomer)
  • Restriction de l’insertion de curseurs par groupe

Le format Markdown a été modifié en utilisant la balise [wrap]. La rétrocompatibilité est assurée.
La version 2026.6.0-latest est requise.

C’est compatible mobile et RTL. Cependant, je ne suis pas expert en UX et je n’ai pas pu beaucoup tester sur mobile ou iOS.

Si vous souhaitez tester séparément, vous pouvez utiliser :

  • URL : https://github.com/arkshine/discourse-image-comparison-slider
  • branche : modernize-with-rte
    (Je recommande de ne pas modifier les curseurs de la version précédente afin de ne pas changer le format Markdown)
5 « J'aime »