Image comparison slider

[Joseph_Hansen]

	Summary	Add a button to the composer to create a draggable interactive image comparison slider.
	Repository	GitHub - josephclaytonhansen/discourse-image-comparison-slider
	Install Guide	How to install a theme or theme component
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

This component adds a button to the composer to create draggable image comparison sliders. Slider settings such as direction or button icon can be customized from the admin settings.

This is my first foray into Discourse development, so I apologize if I’ve made any mistakes.

[Jagster (Jakke Lehtonen)]

What is WIP? (Is there 20 characters now?)

[Moin]

WIP

[ColdSun]

WIP is work in progress.

[Canapin (Coin-coin le Canapin)]

That’s awesome! Thanks for this contribution

@Joseph_Hansen

This is a WIP with updates planned.

What kind of updates do you have in mind?

[Joseph_Hansen]

Mainly, I need to clean up the code and make it more in-line with Discourse. It’s a bit sloppy at the moment, since I was actively learning how to make a theme component here

I’m also planning on adding a way to change the slider direction from the composer- right now, the direction is whatever has been set in the admin settings, I’d like to make that user controllable. (EDIT: this has been added!)

I would also like to add more control over the slider handle/divider styles, but sadly it’s not really possible. The JavaScript handling the slider builds the slider before any CSS changes and doesn’t rebuild the slider when CSS changes.

[chapoi (Charlie)]

Cool stuff!
Thanks for contributing

[Joseph_Hansen]

I’ve added the ability for the user to choose a vertical or horizontal slider, using a data-direction-horizontal or data-direction-vertical attribute. The default setting chosen in the admin settings will be used if the user doesn’t specify a direction

This update is available now on GitHub or from the Discourse admin panel, if you’ve installed the theme component

[davidkingham]

Very cool, thanks Joseph! It works well, but I’m seeing this error on my site:

It goes away if I refresh the page, and this is all I see in the console:

[Lilly]

this is cool. nice work.

[Joseph_Hansen]

It’s hard to say what’s causing this, I can’t replicate it on my end Of those errors, only the first one could be from this component, as I’m not using a tooltipContainer or a ResizeObserver loop, but again, I’m not really sure. Have you updated to the most recent version? I made some changes yesterday that might fix this

[davidkingham]

Thanks Joseph, I am on the latest version. It’s weird, I can’t get this message to display again and I don’t see any issues, so maybe it was a fluke?

Another thing, the icon does not want to change. I have, of course, added it to the svg icon subset. I have also tried different icons that are already working on my site and it just doesn’t change from the bolt. I’m trying to change it to arrows-alt-h

[Joseph_Hansen]

@davidkingham

Another thing, the icon does not want to change. I have, of course, added it to the svg icon subset. I have also tried different icons that are already working on my site and it just doesn’t change from the bolt. I’m trying to change it to arrows-alt-h

That’s my bad, I just committed a change that will fix that. Thanks for catching that!

[Frully]

Very cool, I have a few problems:

Localization

In my forum we swapped to en_GB locale, so when I mouse over I get:

instead of the alt/flavour text from the component settings:

Can't select text

The plugin seems to steal all cursor mouse-down events and prevents me from selecting any text on the page for copy/paste/quote, etc. This isn’t a problem on meta.discourse…Happy to provide more details about my config/theme (mostly Sam’s simple theme with a few extra components like gallery and gifs) it went away…I love technology.

3.1.0.beta4

(f0bdb2ee9a)

Doesn't work in Firefox at all (and some mobile chrome users)

I made an instruction post to use the feature, and some people said they weren’t seeing anything. (not super helpful feedback since I don’t have any real bug reports from people).

[Joseph_Hansen]

Hmm… this is strange, I tested it on Firefox with no issues. I’ll see if I can reproduce this. Gotta love random bugs the library I’m using doesn’t have any issues on the GitHub repo for Firefox, open or closed, so that makes bug fixing even harder.

Locales- I’m not sure what the process is for providing locale files, I can add a en.GB since I speak that language but that’s about the extent of my expertise. Do any other theme component authors know how locale file translations are supposed to work? Should I just run the text through Google Translate?

[Frully]

The only difference I can see between yours and a known-working component (giphy) is the indenting…

discourse/discourse-gifs/blob/main/locales/en.yml

Perhaps it’s that all the yml goodness is on the same indent level something something parser something.

discourse/discourse-jitsi/blob/main/locales/en.yml

Basically…I’m a hack and have no idea what I’m doing.

[Joseph_Hansen]

I know how you feel I’ll look into it, I’m using VS Studio’s YML parser but it might not be 100% up to standard. I’ll try some good old fashioned manual indenting in Notepad

[Joseph_Hansen]

@Frully I’ve fixed the Firefox problem- this should now work on every browser (I’ve tested Chrome, Firefox, Safari, and mobile versions with no issues). If you update this, it’ll work for your Firefox users

[Stephane_Roy]

Hello

This theme-component is very cool, thank you and I just installed it

A problem with the button text and with placeholder text

---

I also have the theme-component

Masonry Image Gallery

This theme component adds a responsive masonry-style image gallery with customizable ordering. Desktop view: [desktop_view] Mobile view: [mobile_view] When clicking on an image it will open with the default lightbox viewer. You add the gallery by clicking on the grid icon and then adding your images. It also works by first selecting the uploaded images and then clicking the icon. [edit_view] → So what do you mean with customizable ordering? The images can be ordered …

Following installation I have :

• the text of the button “Image comparison slider” also on the button “Masonry Image Gallery”
• the placeholder text of “Image comparison slider” instead of the placeholder text of “Masonry Image Gallery”

Strange, no ?

Stéphane

Forums FFJdR

[Heddson]

I hadn’t thought about that issue. Thanks for pointing it out @Stephane_Roy!

The issue is that both theme components uses the same translation variables. Other TC may have the same issue… The fix is to update/change the name of button_text and add_images_prompt in the places below. I will update Masonry Image Gallery as well.

translations.button_text = settings.button_text;
translations.composer.add_images_prompt =
settings.add_images_prompt;

api.onToolbarCreate(function(toolbar){
toolbar.addButton({
trimLeading: true,
id: “image-comparison-slider”,
group: “insertions”,
icon: settings.button_icon,
title: “button_text”,
perform: e => e.applySurround(
[“<div data-image-comparison-slider data-direction-”,settings.default_direction,“>\n\n”].join(‘’),
“\n\n”,
“add_images_prompt”,
{ multiline: false }
)
});