Page MenuHomePhabricator

Adjust Image Grid on Media Search
Closed, ResolvedPublic

Description

Looking at having a more consistent margin in between images in the media search results grid. Somewhere in the 18px range could work well, even though it might flex at different viewports.

COVID-19 Deployment Criteria

  • Can you roll back this change without lasting impact?
    1. A recovery plan is required as this will help identify our capacity for recovering from the failure
    2. THIS IS A KEY QUESTION, if you can’t answer it, you shouldn’t deploy
  • Is specialized knowledge required to support this change in production? If so, are there multiple people with this knowledge?
  • Is there a way to increase confidence about the correctness of this change?
    1. Reviews (Design, Code, etc)
    2. Testing coverage (unit tests, integration tests)
    3. Manual testing (e.g. Beta, vagrant, docker)

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 20 2020, 5:27 PM

Here's a screenshot of what I've got so far:

These are the options to tweak this further, should we want to:

  • more cropping: the closer the images are to having the same dimensions, the better they'll align
  • smaller thumbs: fitting more images on a row makes it more likely that their shapes balance out (and less likely for a large outlier to mess things up)
  • selective sorting: a script could rearrange things based on the shape, but that feels like tampering with the results (and even then there may not be a perfect combination)

There is some minor-ish cropping (both horizontal & vertical) going on already, and I didn't want to take things too far (and it also depends on the size of the window - crops more heavily on smaller screens)
I could deal with slightly smaller thumbs (Google images has them with a 157px height IIRC - my current patch has 180px)
I'm quite ok with the current situation, but let me know if we need to tweak things further! (once the code gets deployed)

This is looking much better and totally meets are needs for research. I'd be fine with making them slightly smaller if we think that will help balance things out a bit but that's not urgent.

I wonder if we could get away with using CSS Grid here? It seems like the ideal way to implement this design, where we want consistent gutters and margins while image sizes vary. Combined with a CSS @supports query, we could write fallback rules for IE and the handful of other browsers that don't support grid, and then use the grid rules for everyone else.

I looked into CSS grid, but we can actually do a lot with just flexbox. Here's a patch: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/WikibaseMediaInfo/+/592793

Phab seems to be choking on file uploads right now or else I'd post a screengrab.

Phab seems to be choking on file uploads right now or else I'd post a screengrab.

@egardner: Uh? If that's reproducible please file a dedicated ticket. :) Also, wondering if the commit message of your Gerrit patch should link to this ticket?

CBogen updated the task description. (Show Details)Apr 28 2020, 3:05 PM

@Aklapper the error is still happening, and I was just able to trigger it again by trying to upload an image here in this comment. Where should I post issues about Phabricator itself?

Change 592793 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/WikibaseMediaInfo@master] Adaptive flexbox grid for Media Search

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

[OT] @egardner: mw:Talk:Phabricator/Help for support questions. Phabricator for Phab bugs. As I don't know the error message I don't know if it's T155130.

Change 592793 merged by Eric Gardner:
[mediawiki/extensions/WikibaseMediaInfo@master] Adaptive flexbox grid for Media Search

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

Ramsey-WMF closed this task as Resolved.May 7 2020, 5:21 PM
Ramsey-WMF added a subscriber: Ramsey-WMF.

This is up on production and looking nice.