Image comparison slider

Customization Theme component
22

Is there any way for this to work with photos that aren’t uploaded? With photos that are inserted via links?

23

Hello, I would like to report a recent bug with this Theme component.

An error message displayed on a website indicates that posts may not display correctly due to an issue with an 'Image Comparison Slider' and suggests updating, reconfiguring, or disabling it. (Captioned by AI)
An error message displayed on a website indicates that posts may not display correctly due to an issue with an 'Image Comparison Slider' and suggests updating, reconfiguring, or disabling it. (Captioned by AI)1200×207 24.9 KB

Visible here:

Last version of Image comparison slder

Version of Discourse: 3.5.0.beta1-dev

(402ec6bf5c)

Thank you for your work
Stéphane.

2 Likes
24

I’ve updated this component to meet the new API standards:
https://github.com/josephclaytonhansen/discourse-image-comparison-slider/commit/ef4efa3b729fd452a5983c6de41e24adafeb89b1

1 Like
25

Nice work!

Not to add more to your plate… but… have you given this a look using the new rich text composer?

26

I haven’t, is there an issue with it?

1 Like
27

Yes, unfortunately it doesn’t work. I see this after hitting the comparison image button when the rich text editor is enabled:

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

28

I’m not sure how to make this work, it seems like the rich text editor handles HTML incorrectly. I imagine you’d see the same issue on any similar component like an image gallery

1 Like
29

Hey Joseph, would you be okay with letting me give it a try at fixing the component?

1 Like
30

Don’t suppose you have time to look into this or take @Arkshine up on his offer? :smiley:

1 Like
31

Sorry, I forgot to respond. I would love it someone else with more knowledge took a crack at this, the Discourse instance I have access to doesn’t have rich test enabled and I don’t have the ability to enable, so I can’t really test this :thinking: thank you for offering!

3 Likes
32

OK, thanks for letting me know, I will give a try. :+1:

3 Likes
33

Alright folks, I had finally the time to work on this.
Hopefully there are still some interest in this TC!

The PR overhauls the TC with the following features:

  • Zoom and pan (mouse wheel, pinch, and on-image controls)
  • Fullscreen view
  • Open the original, full-size images in the lightbox
  • Optional before/after labels with configurable placement
  • Optional caption
  • Several handle styles (line, thin, circle, grabber) and a custom handle color
  • Edit sliders directly in the rich text editor, or with markdown
  • Keyboard accessible (arrow keys move the divider, +/-/0 zoom)
  • Restrict who can insert sliders by group

The markdown format has changed using [wrap] tag. Backward compatibility is ensured.
2026.6.0-latest is required.

It’s mobile and RTL friendly. Though, I’m not an UX expert, and I could not test much on mobile or IOS.

If you want to test separately, you can use:

  • URL: https://github.com/arkshine/discourse-image-comparison-slider
  • branch: modernize-with-rte
    (I’d recommend to not edit sliders from the previous version to not change the markdown format)
4 Likes