Background

Readers can tap on images presented as part of a Preview to see them in media viewer. We would like to make certain improvements to the existing state of it. We plan to update the existing icons, improve the image alignments, and add a counter to inform readers how many images are there.

This improvement is based on the plugin research findings conducted with existing readers in 2023.

Design

General Information

• Given Wikipedia Preview popup now supports light and dark mode therefore we would like the media viewer to also support both dark and light modes.
• All gestures work as it is - zoom to view part of the image, left/right swipe, etc.

Desktop (Viewports 1120px and above)

• Image Counter
  • Positioning: Top-center of the device.
  • Padding: 16px from the top end of the device and 24px from the top edge of the image container.
  • Behavior: Reflects the number of images available in the media viewer, increasing as the user navigates.
• Close Icon
  • Positioning: Top-right corner of the device, horizontally aligned with the image counter.
  • Padding: 24px right-side margin and 16px top margin.
  • Touch/Click Target: 48x48 pixels.
  • Design: Replace with the updated one.
• Image Container
  • General principal: Ensure all images fit within the container using a “fit” treatment (CSS property “contain”). The container should dynamically adjust based on image aspect ratio but not exceed a defined maximum size.
  • Width consideration: Maintain 24px padding between the image container and the navigation arrows.
  • Height consideration: Maintain 24px padding from the top edge for the image counter and close icon.
• Image Description
  • Positioning: Adjacent to the bottom edge of the image container with 8px of padding.
  • Overflow handling: No scroll handle. Ensure the text fits within the allocated space. Implement scrolling within the description area if text exceeds the maximum height.
  • Dynamic height: Minimum height for one line of text, maximum height for 5 lines.
  • Text alignment: Center.
• Left/ Right Navigation
  • Visibility: Present only when applicable.
    • Left arrow: Hidden when viewing the first image.
    • Right arrow: Hidden when viewing the last image.
    • Single image: Both arrows hidden
  • Positioning: 24px away from the edge of the viewport and 24px away from the edge of the image container.
  • Touch/Click Target: 48x48 pixels.
• Credit line
  • Positioning: 16px margin from both sides of the viewport and 16px from the bottom of the viewport and 16px from image description.
  • Styling: Author name (License info.) e.g. Author Name, (CC BY-SA 4.0) Learn more link
  • Text handling: Display the author name up to 30 characters, with ellipsis for longer names.
  • Learn more: Clicking or Tapping on Learn more will take them to Commons page of the image.

Smaller viewports (Below 1120px)

• Image Counter
  • Positioning: Top-center of the device.
  • Padding: 16px from the top end of the device and 24px from the top edge of the image container.
  • Behavior: Reflects the number of images available in the media viewer, increasing as the user navigates.
• Close Icon
  • Positioning: Top-right corner of the device, horizontally aligned with the image counter.
  • Padding: 16px right-side margin and 16px top margin.
  • Touch/Click Target: 48x48 pixels.
  • Design: Replace with the updated icon.
• Image Container
  • General principal: Ensure all images fit within the container using a “fit” treatment (CSS property “contain”).
  • Width consideration: Allow images to touch the left and right edges of the viewport.
  • Height consideration: Maintain 24px padding from the top edge for the image counter and close icon.
• Image Description
  • Positioning: Adjacent to the bottom edge of the image container with 8px padding.
  • Overflow handling: Show scroll handle. Implement scrolling within the description area if text exceeds the maximum height.
  • Dynamic height: Minimum height for one line of text, maximum height for 3 lines.
  • Text alignment: Left aligned.
• Left/ Right Navigation
  • Visibility: Navigation arrows are not shown for viewports below 1120px.
• Credit line
  • Positioning: 16px margin from both sides of the viewport and 16px from the bottom of the viewport and 16px from image description.
  • Styling: Author name (License info.) e.g. Author Name, (CC BY-SA 4.0) Learn more link
  • Text Handling: Display the author name up to 15 characters, with ellipsis for longer names.
  • Learn more: Clicking or Tapping on Learn more will take them to Commons page of the image.

Acceptance Criteria

TBA

Test Scenarios

TBA