Image Compare Slider

Hey,

@joseph recently made this cool image compare component, where you can use a slider to compare two images. It’s based on img-comparison-slider, a JS library that I personally use as well, and I think is the best one available. Works great on mobile and dekstop.

I always love these when people show wireframes or clay renders, or early blockouts vs. final renders.

Can we get this on BA?

I’ll let Joseph comment on that. Would this really solve a problem that we have here? I’m asking because I tend to be reluctant to just add things ‘because they’re cool’.

Not sure if it solves a real problem, it definitely falls in the category of “nice to have”.
However, two more points in favour:

  • There’s no good place to upload image comparisons, so it is a good reason for artists to link to their forum posts. It makes putting time into breakdowns more rewarding.
  • It sounds low-risk, if the add-on breaks, you’ll just be left with two images in a post, which is fine in terms of forward compatibility.

I wouldn’t say it solves a problem per se, but I think it would make it easier for people to share wireframe/clay/final render comparisons. A lot of the time, people make those comparisons using image editing software- this way is both faster and interactive. For example:

This image surely would work better as an interactive slider, wouldn’t you say @Icaro_Carvalho ?

Also this one: Suspect (duck) would it have been useful to be able to make an image comparison slider instead of making it in image editing software, @Erf ?

It could also be used for raw/processed images like this: Key (Stray Inspired) @ClarkKhant

As said, even if something breaks, it just displays the images normally, so it’s low-risk, and I’m very active with bug fixes :slight_smile:

Without any doubt.

Another advantage of having a compare slider is comparing lighting changes, for scenes that are a work in progress. Or running tests and comparing results like in the Spectral Cycles Vs Octane thread

It makes it easier to compare the subtle changes.

That’s a good use case I hadn’t thought of. @Midphase , you’ve been pretty active pointing out comparisons in the Octane thread, what would you think about this functionality?

I think that’s a great idea. I’d love to see it as a function in the Render window between adjacent layers.

@ARG3d Stranded do you think this ability would be useful to compare lighting options, having the images in your post in a slider instead of separate?

Bart’s expressed concern is that this is just “cool”, which isn’t a sufficient reason to add it. I propose that this addition would go beyond just “cool” and would make it simpler, faster, and easier to add image comparisons.

So far, this seems to be supported by the sample set of users I’ve tagged, but I’d like to get some more broad data to support this. If you see this, your vote is appreciated :slight_smile:

Would this feature make it faster and easier to share image comparisons on BA?
  • Yes
  • No

0 voters

Great idea :slight_smile: By the way, have you tested this on mobile yet?

I have tested it on mobile, on a few different browsers and screen sizes. Works great on mobile, on my testing so far. The horizontal slider is a little hard to control precisely on mobile, but it still works. (Specifically, on very small screens like a iPhone SE, it’s hard to drag precisely in just 375 pixels of width.)

I might add a mobile fallback where all sliders are vertical on mobile, but I would rather get some user input on that first :slight_smile:

Someone on meta.discourse mentioned some issues with Firefox, but I haven’t been able to reproduce them

I was able to reproduce and fix the Firefox issues, this now works perfectly on mobile/desktop Firefox, Chrome, Safari, and Edge. AFAIK, this is feature complete and fully ready for production

I’m testing it on the staging site - see my feedback there.

Took a look at the staging post, looks very promising.
Working on some clouds stuff, would be awesome to show off the various parameters that way :slight_smile:

One request for @joseph:
Normal images can be put in lightbox mode by clicking on them, maybe a little :mag: on the bottom-right might be handy here.

I’m impressed you found the staging site- lucky guess with the URL? :sweat_smile:

The images in the sliders actually used to be lightboxed by default, but… I had to sacrifice that in order to have the slider handle cursor be the grab cursor instead of a pointer cursor. There might be a way to get both, but the lightbox only worked when pointer-events was set to none, and the grab cursor only works when pointer-events is set to all or auto :thinking:

I could maybe write a custom pointer-events handler that would allow for both, I’ll look into it after I’m done with another development project that should enhance BA (stay tuned :wink: )

You’ll count a negative vote by me but I’ve read wrongly the question…so my vote should be actually a YES :slight_smile:

:face_with_monocle:

NICE! :slight_smile:

If I may, one thing that would be really cool is adding a way to ‘like’ images straight from galleries. I’d really like to boost the liking if we can, I think it’s sometimes a bit disappointing and not very rewarding for artists.

I’m working on the homepage project at the moment, I will look into that as well :slight_smile: Being unemployed is great for my productivity :sweat_smile:

Original artwork: Scottish Cow