Make broken images easier to see
- Dominant language
- No language data
- Stars
- 0
- Forks
- 0
- PR merge metrics
- No merged PRs in 30d
Description
## 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.
Contributor guide
Research direction
Start by locating the stylesheet that renders failed images and the JavaScript translation setup for the :root CSS variable described in the issue. Check how failed images expose their pseudo-elements and how translation keys are registered. Done means failed images are visibly distinct and show translated failure text including the image source.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, javascript
- Domain
- frontend, internationalization
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100