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.

Proposed.jpg (1×1 px, 536 KB)

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

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

Screenshot 2020-04-21 17.46.53.png (1×2 px, 3 MB)

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?

@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 added a subscriber: Ramsey-WMF.

This is up on production and looking nice.