matrix-org / matrix-org/matrix.org

Use responsive images

Open
#1,772 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
JavaScript
Stars
616
Forks
463
Avg merge
2d 3h
Merged PRs (30d)
19

Description

Images can be a tad heavy at the moment, and it doesn't make sense to load a screenshot of an app in full screen on a Retina MBP when displaying it on a mobile phone.

Zola's [`resize_image`](https://www.getzola.org/documentation/content/image-processing/) feature allows us to… resize images ✨

An example of responsive images with Zola's `resize_image` would be what flipdot does here: https://gitlab.com/flipdot/nusite/-/blob/main/templates/index.html#L39

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with Zola's resize_image documentation and the linked flipdot templates/index.html example, then locate the matrix.org templates that render screenshots and other images. The work is done when those images use responsive variants so mobile visitors do not load unnecessarily large full-screen screenshots.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
frontend, web-dev
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.