SelfPrivacy
/
selfprivacy.org
7
1
Fork 5
Code Issues 11 Pull Requests 4 Releases Activity

Add placeholder to broken images #126

Merged
inex merged 10 commits from nevfy/selfprivacy.org:set-img-size into master 2024-05-01 15:22:11 +03:00
Conversation 0 Commits 10 Files Changed 5
nevfy commented 2024-04-15 17:59:48 +03:00
Collaborator

When images do not load properly #116, the layout shifts in unpredictable ways, because the size of the image container depends on the size of the image. It looks the worst when some parts have loaded and some parts have not.

There are different ways to add placeholders, but the <object> one does not rely on Javascript.

Because the docs use {{< imgproc >}} with a fixed size, the layout shift does not happen there.

This pull request:

  • changes <img> to an <object role="img"> on the main page
  • when the image is not able to load, the content of and object is displayed, which is currently a grey oultlined box with an icon
  • I've choose the gray outline over the fill because the filled rectangle does not look broken enough alongside filled header and footer
  • I've choose the exclamation triangle icon because there is no broken file icon in the Font Awesome set
  • It might not be a good idea to use an icon here: if fonts also fail to load, an icon inside of a placeholder will show up as tofu character
  • adds max and min sizes to illustrations
  • this is the thing that fixes layout shifts
  • ensures all svg have a viewBox (needed for the .svg to be scaled properly inside of an object)
  • also updates the ru page
  • does not add placeholders to screenshots
  • does not use a shortcode, because I could not figure out how to nest them in one another
When images do not load properly #116, the layout shifts in unpredictable ways, because the size of the image container depends on the size of the image. It looks the worst when some parts have loaded and some parts have not. There are different ways to add placeholders, but the `<object>` one does not rely on Javascript. Because the `docs` use `{{< imgproc >}}` with a fixed size, the layout shift does not happen there. This pull request: - [x] changes `<img>` to an `<object role="img">` on the main page - when the image is not able to load, the content of and object is displayed, which is currently a grey oultlined box with an icon - I've choose the gray outline over the fill because the filled rectangle does not look broken enough alongside filled header and footer - I've choose the exclamation triangle icon because [there is no broken file icon in the Font Awesome set](https://github.com/FortAwesome/Font-Awesome/issues/12408) - It might not be a good idea to use an icon here: if fonts also fail to load, an icon inside of a placeholder will show up as tofu character - [x] adds `max` and `min` sizes to illustrations - this is the thing that fixes layout shifts - [x] ensures all svg have a `viewBox` (needed for the `.svg` to be scaled properly inside of an `object`) - [x] also updates the ru page - [x] does not add placeholders to screenshots - [x] does not use a shortcode, because I could not figure out how to nest them in one another
Screenshot from 2024-04-15 16-53-03.png
68 KiB
Screenshot from 2024-04-15 16-52-52.png
116 KiB
Screenshot from 2024-04-15 16-53-03.png Screenshot from 2024-04-15 16-52-52.png
nevfy added 3 commits 2024-04-15 17:59:48 +03:00
nevfy added 1 commit 2024-04-17 16:32:56 +03:00
nevfy added 4 commits 2024-04-28 01:31:54 +03:00
nevfy added 1 commit 2024-04-28 01:36:05 +03:00
nevfy changed title from WIP: Add placeholder to broken images to Add placeholder to broken images 2024-04-28 01:36:21 +03:00
nevfy requested review from inex 2024-04-28 01:39:09 +03:00
inex added 1 commit 2024-05-01 15:21:46 +03:00
inex approved these changes 2024-05-01 15:22:09 +03:00
inex merged commit 24a86fbea9 into master 2024-05-01 15:22:11 +03:00
nevfy deleted branch set-img-size 2024-05-01 17:12:33 +03:00
Sign in to join this conversation.
Reviewers
No reviewers
inex
Labels
Clear labels   
Docs

Documentation contents issue
No Label
Docs
Milestone
Clear milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: SelfPrivacy/selfprivacy.org#126
There is no content yet.
Delete Branch "nevfy/selfprivacy.org:set-img-size"

Deleting a branch is permanent. Although the deleted branch may exist for a short time before cleaning up, in most cases it CANNOT be undone. Continue?