Image Browsing: Refine the UI design for Carousel component
Closed, ResolvedPublic3 Estimated Story Points
Actions

Assigned To

Authored By

	egardner
	Aug 18 2025, 7:57 PM

Project Tags

Referenced Files

	F65794006: image.png
	Aug 19 2025, 7:58 PM

	F65794009: image.png
	Aug 19 2025, 7:58 PM

Subscribers

Aklapper

egardner

JScherer-WMF

Description

Background

The carousel will need a number of refinements. We are collecting these in this ticket

Requirements

We need to refine the UI of the Carousel component to include the following:

Image thumbnails are the correct height. Per https://phabricator.wikimedia.org/T402222#11100172: height: 175px, width: 100px < size < 33%
Horizontal and vertical pano images are cropped to reasonable limits so they don't become tiny or huge
Carousel images showcase good interaction design patterns. Per https://phabricator.wikimedia.org/T402222#11100198: 1px border with border-color: interactive--hover

@JScherer-WMF feel free to elaborate further or include any mockups.

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Refine the UI design for Carousel component	mediawiki/extensions/ReaderExperiments	master	+141 -24

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved		None	T398493 [Epic] Image Browsing: Build out the front-end UI
		Resolved		matthiasmullie	T402222 Image Browsing: Refine the UI design for Carousel component

Event Timeline

egardner created this task.Aug 18 2025, 7:57 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 18 2025, 7:57 PM

egardner triaged this task as High priority.Aug 18 2025, 7:57 PM

egardner added a project: FY2025-26 WE3.1 Engaging New Audiences.

ovasileva added a parent task: T398493: [Epic] Image Browsing: Build out the front-end UI.Aug 19 2025, 8:35 AM

ovasileva updated the task description. (Show Details)Aug 19 2025, 9:45 AM

HSwan-WMF set the point value for this task to 3.Aug 19 2025, 5:22 PM

egardner updated the task description. (Show Details)Aug 19 2025, 5:23 PM

HSwan-WMF moved this task from Needs Refinement to Sprint 4 on the Reader Growth Team board.Aug 19 2025, 5:28 PM

HSwan-WMF edited projects, added: Reader Growth Team (Sprint 4 ); removed: Reader Growth Team.

Thumbnail height = 175px

Min thumbnail width = 100px

Max thumbnail width = 1/3 width of the content area OR 175px, whichever is larger -> e.g. 950px/3 = 317px

Don't show gallery for articles with less than 3 included images.

Hey @JScherer-WMF any thoughts on hover/focus/interaction states? Keyboard navigation? There isn't a great Codex analogue at present but I could see a blue (default accent color) outline being useful for focus. I assume we want a pointer cursor on hover, anything else there (fade effect, etc)?

hover state is the same as the "card" component in codex, a 1px border with border-color: interactive--hover

matthiasmullie claimed this task.Aug 21 2025, 1:46 PM

matthiasmullie moved this task from Committed to Doing on the Reader Growth Team (Sprint 4 ) board.

matthiasmullie updated the task description. (Show Details)Aug 25 2025, 10:59 AM

Change #1181668 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Refine the UI design for Carousel component

https://gerrit.wikimedia.org/r/1181668

gerritbot added a project: Patch-For-Review.Aug 25 2025, 11:00 AM

matthiasmullie moved this task from Doing to Code Review on the Reader Growth Team (Sprint 4 ) board.Aug 25 2025, 11:16 AM

matthiasmullie moved this task from Code Review to Doing on the Reader Growth Team (Sprint 4 ) board.Aug 25 2025, 4:43 PM

matthiasmullie moved this task from Doing to Code Review on the Reader Growth Team (Sprint 4 ) board.Aug 26 2025, 3:33 PM

Change #1181668 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Refine the UI design for Carousel component

https://gerrit.wikimedia.org/r/1181668

bvibber moved this task from Code Review to Signoff on the Reader Growth Team (Sprint 4 ) board.Aug 28 2025, 10:16 PM

Maintenance_bot removed a project: Patch-For-Review.Aug 28 2025, 10:31 PM

lwatson mentioned this in T400182: Accessibility Audit - Images Entry Points.Aug 31 2025, 12:14 AM

egardner closed this task as Resolved.Sep 2 2025, 10:05 PM

egardner updated the task description. (Show Details)

matthiasmullie added a project: ReaderExperiments-ImageBrowsing.Jan 6 2026, 1:05 PM

Restricted Application edited projects, added: Reader Growth Team; removed: Reader Growth Team (Sprint 4 ). · View Herald TranscriptJan 6 2026, 1:05 PM

Aklapper edited projects, added: Reader Growth Team (Sprint 4 ); removed: Reader Growth Team.Jan 6 2026, 1:50 PM

Image Browsing: Refine the UI design for Carousel componentClosed, ResolvedPublic3 Estimated Story PointsActions