Page MenuHomePhabricator

Forget about thumbnails in ajax search results, use category icons instead
Open, LowPublicFeature

Description

See T306246.

Here's another cool feature for the WMF developers to ignore.

Icons.

Look at these ajax search results for "ana":

images in search results Minerva.jpg (2×571 px, 206 KB)

Don't worry about the compression of the screenshot, it's nothing compared to the thumbnails. Anal sex shouldn't have a thumbnail (I blurred it for the screenshot). The thumbnail for anaphylaxis is okay. The thumbnail for Ana de Armas isn't great, but passable I guess. The thumbnails for analog-to-digital converter and analgesic are not terribly useful without a caption to provide context.

That's 1 good, 1 passable and 2 somewhere between neutral and passable.

That just leaves the thumbnails for analytic philosophy, anatomy, Anaheim, anabolic steroid, anatomical terms of location and Anatolia. 6 thumbnails that, in my eyes, don't rise above the "garbage" level.

If you want something visual (which is admittedly easier to take in than a wall of text), try using the category system and/or Wikidata (specifically "instance of") to pick a category icon that can be optimized for display in search results. Here's a mockup, it's ugly because I just scraped some random icons from Commons together:

search results with icons mockup.png (2×607 px, 233 KB)

For attribution purposes:
https://commons.wikimedia.org/wiki/File:Gender_signs.svg
https://commons.wikimedia.org/wiki/File:P_politics_icon_redpurple.png
https://commons.wikimedia.org/wiki/File:Deus_geography.png
https://commons.wikimedia.org/wiki/File:Aes_staff_blue_C.svg
https://commons.wikimedia.org/wiki/File:Aspirin-skeletal.svg
https://commons.wikimedia.org/wiki/File:P_philosophy.png
https://commons.wikimedia.org/wiki/File:Noun_Project_Technology_icon_2034212.svg
https://commons.wikimedia.org/wiki/File:Clapperboard_icon.png

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

In addition to all the reasons AlexisJazz mentioned, if this also fixes the embarrassingly bad thumbnail quality when the source image is too wide, I'm all for it. The quality problem could be fixed right now by changing background-size: auto 100%; to background-size: auto; in list-thumb.list-thumb-y, but I suppose that's not being done because it causes a lot of whitespace around wide images. If we have category icons of a known reasonable aspect ratio, we can treat them the way we treat the placeholder image and load the actual SVG at a fixed size instead of a stretched rasterized version.

Gehel triaged this task as Low priority.Apr 20 2022, 7:41 PM
Gehel moved this task from needs triage to UI tickets on the Discovery-Search board.