flarum / flarum/issue-archive

Make broken images easier to see

Open
#79 2 comments 0 reactions 0 assignees View on GitHub
type/feature
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.