Page MenuHomePhabricator

[Needs discussion] Thumbnail should be resizeable
Open, LowestPublic

Description

Background

The Thumbnail element is in the process of being extracted from MenuItem and converted into a standalone component that will be reused within Card (T310634).

While the MVP of the Card component will use a Thumbnail that is similar size and proportions to that used within MenuItem, other Card variants and potential future components might need to display smaller or bigger thumbnails. In order to cover the biggest number of potential use cases, we should probably give implementers (both collaborators and our own team) the option to flexibly adjust the size of thumbnails in context.

Goal

We should document a recommended maximum size for thumbnails (anything beyond that point should be considered an image). Nevertheless, defining premade sizes might be too constraining: we could give freedom to Thumbnail users to adjust these components to their preferred dimension in context.

Considerations

We might want to take any of (but not only) the following directions:

  1. Making thumbnails 100% in width and height by default, and allowing implementers (and ourselves) to decide their height and width in context via a wrapper. (This might be quite a more flexible option)
  2. Creating some premade sizes (for example S (2.5em), used in the context of MenuItem; and M (3em), used in landscape oriented cards), and let any other sizes to be configured via context overrides (and/or introduced in our system over time if we detect a pattern)

When it comes to the thumbnail placeholder icon, this should also be relative to the size of its container (the thumbnail). Particularly 50%.
Nevertheless, thumbnail placeholder icons should have a max-width and max-height of 64px (to be replaced by the right size token).

Event Timeline

Sarai-WMDE renamed this task from [Needs discussion] Thumbnail should be resizable to [Needs discussion] Thumbnail should be resizeable.Jul 7 2022, 6:36 PM

If 100% width is technically meant as width on container contextual, that's already the case with current background-size: cover.

I would still see a need for clarifying general Thumbnail sizes or leave the Thumbnail size component contextual. Given that the thumbnail might be used in a lone-standing spot, like for example in a image-only card, an infobox or lone-standing in content, I'd think 64 px equivalent (relative size for low-vision environment!) is too low. I'd rather see 256 px equivalent as max width.

My suggestion would be to go for component context widths and heights given the many different possible contexts and close this task.