search

flarum / issue-archive

0 stars 0 forks source link

Make broken images easier to see #79

Open davwheat opened 3 years ago

davwheat commented 3 years ago

Feature Request

Is your feature request related to a problem? Please describe. When images fail to load, it isn't particularly obvious at the moment.

Describe the solution you'd like We should make failed images easier to see. We can do this using CSS on the before and after pseudoelements as these are only shown when the image has failed to load.

We might want to show some text such as Failed to load image (src: https://example.com/IMG.png). We can do this by setting a CSS variable on the :root element in JS with the content of a translation key, which can then be referenced in the stylesheet with var(--example-var).

Justify why this feature belongs in Flarum's core, rather than in a third-party extension It will be useful for everyone.

Describe alternatives you've considered None

Props to @clarkwinkelmann for the idea on Discord.

clarkwinkelmann commented 3 years ago

I'm not 100% sure about the core or not core aspect on this one. An extension that provides nice wrapping for images could be well suited for this, so it could for example have a different style for images with missing src or alt, and a different style for onerror, and maybe an in-between loading state.

But just some basic CSS that can be easily reverted by a more advanced extension would still be useful in core.

I'm not sure about the translation thing. Wouldn't this "pollute" the DOM with a lot of stuff if we end up doing this for other things? It likely won't hurt performance since all translations are already loaded anyway but this might show up in the dev tools in a confusing way if there are many such variables(?) And from an accessibility standpoint I suppose this would be invisible? Not necessarily a bad thing but not ideal either.

davwheat commented 3 years ago

With respect to the accessibility aspect, I think it's fine. People should be providing an alt attribute as part of their image if it's important that the image is described to screen readers. If it doesn't matter, they don't need to be told if it fails. If the alt attribute is present, then they don't need to know if the image has failed to load.