This is part of the UI improvements epic T306626: [EPIC] Basic UI/UX improvements to the special:search page
User Story
As a reader, I want to be able to easily scan the search result page to easily locate the information I am looking for.
Description
This ticket is to add article thumbnails next to each article result. Thumbnails can provide a visual anchor on a text heavy page and assist in locating an article. This only applies to article namespaces and files namespaces (which already show a thumbnail right now).
Explorations
See the discussion happening on this spike ticket
Final proposal
See detailed specs for thumbnail here
Technical implementation
https://phabricator.wikimedia.org/T307034#7938844
Acceptance Criteria
- This thumbnails are for desktop only and not mobile.
- All article namespace will have thumbnails
- For namespaces that already have thumbnails like files, leave the design and behavior as is. No change required.
- For article thumbnails - fill the square and and align to the top of the image as shown in option 4 in the image here.
- Articles that do not have thumbnails will have a placeholder image. As shown here
- Examen the handling of NSFW/explicit images used in the Go bar and determine if that solution works here and is appropriate (see T306246)
- Determine how to display thumbnails for results in other language wikis (e.g. like in T309745)
- Give the thumbnail a specific CSS class that they can target and hide (As per feedback from community, people would like to be able to hide thumbnails with user CSS.)
- To hide, they can target .searchResultImage-thumbnail for all thumbnails, or .mw-search-result-ns-0 .searchResultImage-thumbnail for article-namespace thumbnails only