## Background
- **Description:** In Codex, so far we've used [[ https://doc.wikimedia.org/codex/main/components/thumbnail.html | Thumbnails ]] to provide small image previews. The introduction of [[ https://phabricator.wikimedia.org/T310632 | "portrait" Cards ]], made us realize that this might require the introduction of bigger size type of media, Images. Thumbnails should be reserved to provide small content previews, and they don't need to be adjusted to specific aspect ratios (such as 16:9,Image component needs to be implemented in Codex.
### Description
The Image component is used to display visual content (e.g. in this case).
- **History:** We've considered the introduction of image as a core Codex component.photos, This wasn't listed as part of the big [[ https://phabricator.wikimedia.org/T277047 | design inventory of the Wikiverse ]] performed by the Product design team,illustrations). though.
- **Known use case(s):** Images are currentlyThis component is used to illustrate Wikipedia articles and Wikidata itemsprovide visual context to the content. As mentioned above, in theWe can use images as individual components in the interface or to provide visual context of Codex,in other components (e.g. they'll be used to provide previews in portrait Cards.
- **Considerations:** We should evaluate and define the relationship between Thumbnail and Imagecards, since it might be that the former is just a variant of the latterdialogs).
### User stories
- 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.
### PreviousHistory
We've considered the introduction of image as a core Codex component. This wasn't listed as part of the big [[ https://phabricator.wikimedia.org/T277047 | design inventory of the Wikiverse ]] performed by the Product design team, though.
### Known use cases
##### Images within the interface
| {F36961694} | {F36961695} | {F36961697} | {F36961696} | {F36961702} | {F36961703} | {F36961704} | {F36961705} |
##### Images as part of other components
| {F36961724} | Portrait card with image |
| {F36961725} | Image within a popup |
| {F36961731} | Onboarding Dialog with image T332767 |
### Existing implementations
These artifacts are listed for historical context. The figma spec, linked below, is the source of truth for the new component.
**Wikimedia community:**
- **Design style guide:** -
- **OOUI:** -
- **Vue:** -
### Open questions
[] What does image need to do**External libraries:**
- //Add links to any examples from tech standpoint, lazy loading, etc?external libraries//
---
## Codex implementation
### Component task owners
- Designer: @Sarai-WMDEbmartinezcalvo
- Developer: //add the main developer's name//
### Open questions
[] What does the image need to do from tech standpoint, lazy loading, etc?
### Design spec
WIP// Once a component spec sheet has been created in Figma, remove the note stating that the spec is missing and link to the spec below. //
A component spec sheet has not been created yet.
| Component spec sheet |
---#### Anatomy
## Stage 1: Minimum viable//Designer should list the structure and product (MVP)perties of the component.//
MVP includes basic layout, default states, and most important functionality.#### Style
### Acceptance criteria//Designer should list the visual features of the component.//
- [] Determine what MVP includes for this component and document this in a subtask. Assign task to designer.
- [] Design MVP. Once complete, assign task to developer.
- [] Implement MVP#### Interaction
---//Designer should list interaction specifications.//
## Stage 2: Additional states, features, and variants#### Documentation
### Acceptance criteria
- [] Document design and implementation of additional states and features in individual subtasks
- [] Complete each additional state/feature subtask//Designer should describe how the component should be documented, including configurable and standalone demos.//
---
## Stage 3: RefinementAcceptance criteria
### 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.
### Acceptance criteria**MVP scope**
- [] //List all parts of the MVP scope for this component//
- [] Finalize docs: open and complete a subtask for any additional demos that need to be added or documentation that needs work**Design**
- [] Meet accessibility standards: open and complete a subtask for any necessary accessibility improvementsDesign the Figma spec sheet and add a link to it in this task
- [] Meet internationalization standards: open and complete a subtask to fix any i18n bugsUpdate the component in the [Figma library](https://www.figma.com/file/KoDuJMadWBXtsOtzGS4134/%E2%9D%96-Codex-components?node-id=1891%3A4420&viewport=287%2C338%2C0.28). //This step will be done by a DST member.//
**Code**
- [] Complete testing: open and complete a subtask for any additional unit or functional tests that are neededImplement the component in Codex
### Future work
- //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.//