Image component needs to be implemented in Codex.
The Image component is used to display visual content (e.g. photos, illustrations). This component is used to provide visual context to the content. We can use images as individual components in the interface or to provide visual context in other components (e.g. cards, dialogs).
- As a designer and developer, I want to be able to reuse an image component to support the meaning or illustrate content in layouts and components.
We've considered the introduction of image as a core Codex component. This wasn't listed as part of the big design inventory of the Wikiverse performed by the Product design team, though.
Known use cases
Images within the interface
Images as part of other components
|Portrait card with image|
|Image within a popup|
|Thumbnail with image|
|Onboarding Dialog with image T332767|
These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.
- Design style guide: -
- OOUI: -
- Vue: -
- Mozilla - Aspect ratio and Object-fit
- Fluent Microsoft - Image component
- Atlassian - Image component
- Ant Design - Image component
- Gestalt Pinterest - Image component
Component task owners
- Designer: @bmartinezcalvo
- Developer: add the main developer's name
- What does the image need to do from tech standpoint, lazy loading, etc?
- Component's properties:
- Aspect ratios: they will be implemented as components properties
- Image customization (e.g. left, right, center): it will be implemented in a separated ImageContainer component
- Option to provide a specific px size (e.g. VE image settings): we will not specify the px at the moment
- Image: it will not have any style applied
- Placeholder: it will use background-color-interactive-subtle and color-placeholder in the icon
The following states will be implemented in the Image component:
- loading (it will use the skeleton once it's implemented in T311874)
A configurable demo will be included with the component's properties and states:
- Image's content: Image with photo / Placeholder
- Aspect ratios: No/Yes (when yes, we should view the different aspect ratios options)
- Loading: a toggle switch will display/hide the loading state
- LTR/RTL: the RTL option will not mirror the image component in this case
Apart from the configurable demo, we will include other demos with:
- Image component using an illustration
- Placeholder: we will need to explain in the demo that the placeholder's icon will be scaled with the width of the placeholder as defined in the Figma spec
Minimum viable product
This task covers the minimum viable product (MVP) version of this component. MVP includes basic layout, default states, and most important functionality.
- List all parts of the MVP scope for this component
- Design the Figma spec sheet and add a link to it in this task
- Update the component in the Figma library. This step will be done by a DST member.
- Implement the component in Codex
- If applicable, list future work that should be done for this component after the MVP is implemented as part of this task. You should open new, standalone tasks for all future work.