Make background colour switcher optional

[jancborchardt]

The background color switcher for transparent images is really not necessary. We should do it like Wikipedia and just insert the white-grey pattern background: https://en.wikipedia.org/wiki/Wikipedia#/media/File:Wikipedia-logo-v2.svg

[oparoz]

Unfortunately, that doesn't work with white content.

[jancborchardt]

This is how it looks in the Wikipedia viewer: https://commons.wikimedia.org/wiki/Category:White_logos?uselang=de#/media/File:Disqus_logo_%28white%29.svg
Indeed not ideal, but if we just increase the contrast of the white and grey, it will be nicely visible.

And even then, I would say if anything a background switcher like that should be a shortcut or something else, but not a prominent button like it is now. Because it really is an edge-case.

[oparoz]

We've had this discussion before :). Some people have folders filled with such content and the slideshow becomes useless if they can't present it in a decent way.

I thought about making the checkboard darker, but then things start looking strange, as it can interfere with darker images.

I'll just make the feature optional, via the config file first.

[deMattin]

Example Preview (example png with mixed transparent and solid)
with white background:

with black background:

This is, how it would look like with a pattern (simulated with photoshop, that uses this to show transparency):

The problem is, that you are only able to see the real looking of the transparent picture with switching.
I would even like to have a third color (grey or even colored) to circle through these backgrounds!
I like this background switching and when designing transparent graphics, I think, most people use different colored layers in working progress to check the looking of transparency.

With background switching, I am able to show you a graphic and you are able to assess it.
With a white/grey or single color background it's a matter of chance, if the picture is shown in an appropriate manner.

All in all: If you don't need this button, you are not forced to press it!
But if transparency isn't shown appropriate, you have to download the file and open it in a fitting graphics programm and preview is useless in his case.

Edit:
In above example, you see by switching, that "MK" isn't transparent as it should be!
With grey/white checkerboard you won't even see the "MK" if it also would be transparent ...

[jancborchardt]

All in all: If you don't need this button, you are not forced to press it!

@deMattin that’s not the point. It is there, and the majority of people don’t need it. I’m sure we can think of a more elegant solution here.

[deMattin]

I understand, why you don't like the button and also would like to have a solution without it.
But I have no idea (yet), how to solve this, without a button.

[oparoz]

There is one party trick I like, but which is not easy to implement because pictures may fill the screen. It's where you present to the user a "band" going from dark to light. The user clicks on the shade and it changes the background.

But the elegant solution is here anyway #84 :P

[deMattin]

Maybe I have an idea - not a real solution but a way to get rid of the button:

Clicking on the picture itself circles through background colors:
white - grey - black -...
So the button is not needed any more.

Ok, it's not intuitive, but if you have read the readme or by doing it accidently you will know about such a "hidden" feature ...

@oparoz Automatic feature is great but how do you know, that this automatic color stands for transparency?

[oparoz]

@deMattin I think it's not a bad idea to enable the change via a click and it's definitely something which can be tested for usability.

And the automatic feature does some calculations and based on the result picks either the white or black background. It can be extended of course to pick an exact shade, but I don't think it's worth it.

[deMattin]

@oparoz: In my above example you see, that a black background won't show that the "MK" isn't transparent as it should be. You only see this by switching to a grey or white background!
White background also is no good, because then you don't see the "clouds".

[oparoz]

Yeah, but those are details. The solution can use a light or a dark checkboard, clearly indicating where the picture is transparent.

[oparoz]

This could also already be implemented with the current switching solution.

[deMattin]

Checkerboard doesn't show details ... ;)
The more I think about it, the more I think a switching will be the best solution.

So, what do you think about a "click on picture color circle switch" to get rid of the button?

[deMattin]

My english ... I think, it has to be named "cycle switch" and not "circle switch" ... ;)

[oparoz]

I think there is one problem. We have to prevent it from being triggered when the user is panning. I think that involves launching a timer and then testing if the cursor has moved and it has to work with old browsers...

But I don't see the difference between the automatic chooser and the current switch. You get the same result, except that with the current solution, there is a button and you need to click on it.
I also think that the button could be more descriptive by using a light bulb maybe.

[jancborchardt]

Clicking on the picture itself circles through background colors

@deMattin @oparoz this will not work as clicking on the image in a slideshow is the common pattern for switching to the next image – which we also do now.

How about this:

• the default background is the white-grey pattern, so everything darker than white/grey will be nicely visible. White images are still possible to make out.
• when hovering over the image, the background changes to black so that white images are fully visible.

[deMattin]

Ok - I havn't thought about panning, you are right.
Maybe double click detection?
Automatic background (black or white) without the possibility to manually change the background doesn't cover my above scenario as an example.
So this automatic will give you the possibility to see "something" but you don't see, what's the transparent part of the picture.

So in my opinion:

1. Best solution:
   To really asses a picture, you need at least 3 backgrounds and manual switching possibility (e.g. white, grey, black).
   I have no problem with the button for that, but understand @jancborchardt to find a solution without such a button.
   Automatic feature can preselect a background, so that you see something and not only a white picture on white (transparent) background
2. Simple solution:
   To give a rought view, a grey/white or grey/lightgrey checkerboard is appropriate and the users are used to this by professional programs.
   You are not able to share a picture for assessment and your coworker has to download and open it in a Desktop app in this case.
3. Predefined color for transparent background (white/grey/black):
   can show nothing in some cases

[deMattin]

@jancborchardt: we posted simultaneously:
I like your idea! 👍
A light checkerboard as default background and a black on hover.
I think, this will fit all cases?!

[jancborchardt]

Great! :) @oparoz what do you think?

(Btw – see @deMattin, a nice unobtrusive solution which makes everyone happy. Just by thinking a bit further about it instead of just choosing the easy but ugly route by introducing a button. ;)

[deMattin]

Haha .. I like good solutions - but sometimes it's a hard way to find this simple thing, that suits to nearly anybody.

Edit: I hope, @oparoz or someone others doesn't find a showstopper for this solution ... ;)

[oparoz]

I did think about it earlier, but discarded it because you're always going to enable the alternative background with large pictures as the mouse pointer will be over it. And imagine that you're zooming in and the background changes all the sudden. Not a great UX.

[oparoz]

So, there is double click left, but users will really have to had read the doc to know about this.

And auto mode.
@deMattin, I still don't get where the problem is with that solution since the background presented is the same as the current one which is deemed to be acceptable. The algorithm just picks one or the other, it doesn't make any modifications.

[oparoz]

I think it's a nice project for a junior designer. Build all the solutions into the slideshow and get them tested to see what works most of the time.

[deMattin]

@oparoz: In only automatic mode you are not able to see, if the color is background (transparent) or a solid color of the picture (see my "MK" in above example - there neither black nor white background is visualizing the transparency appropriate). Only switching shows the error (lack of transparency in "MK")
Assessing transparency needs at least 2 selectable / switchable and different backgrounds.
@jancborchardt: oparoz is right with his zooming and padding workflow. With just viewing, the hover solution works fine. But if you zoom or pan you switch the view, even if you don't want to do so.
damn ... 😠

I'm able to do some static css or html and am able to understand or slightly modify php or js code. So sadly I'm too junior to do this. :/

[oparoz]

Auto mode can tell if the picture is transparent and the level of luminance.
You can send me some samples if you want and I'll tell you which background has been picked :)
But best keep things specific to this topic in the other issue.

[oparoz]