Page MenuHomePhabricator
Create Task
Maniphest T221364

Image dimension scaling on UW "Add data" step is wonky [Labs]
Closed, ResolvedPublic
Actions

Assigned To
• Ramsey-WMF
Authored By
• PDrouin-WMF
Apr 18 2019, 12:53 PM
Tags
Referenced Files
F29076317: Screen Shot 2019-05-16 at 4.32.24 PM.png
May 16 2019, 11:33 PM
F29076316: Screen Shot 2019-05-16 at 4.32.31 PM.png
May 16 2019, 11:33 PM
F29076314: Screen Shot 2019-05-16 at 4.32.36 PM.png
May 16 2019, 11:33 PM
F29076315: Screen Shot 2019-05-16 at 4.32.16 PM.png
May 16 2019, 11:33 PM
F28709613: Screen Shot 2019-04-19 at 1.15.29 PM.png
Apr 19 2019, 8:17 PM
F28698908: Screen Shot 2019-04-18 at 5.33.36 PM.png
Apr 18 2019, 10:46 PM
Subscribers
Aklapper
Edtadros
egardner
matthiasmullie
• PDrouin-WMF
• Ramsey-WMF

Description

User story: As a Commons uploader, I want to see the image I am uploading on the "Add data" step, so that I can add structured data easily and accurately (without scrolling).

We have this (on Labs), where the image is being scaled to full width, no matter its native size:

Screen Shot 2019-04-18 at 5.33.36 PM.png (1×2 px, 1 MB)

We want this:
Over a chat with @egardner, we discussed the scaling issue. Eric suggested that it would probably be better for the width to constrain the max-width of the image, but not to scale up if it is smaller. We should explore this option in more detail

Acceptance Criteria:

Can be tested on https://commons.wikimedia.beta.wmflabs.org/wiki/Special:UploadWizard

  • The image is larger than the thumbnails on the Describe step, but not so large that they either look distorted or they hinder the user from both seeing the image and adding structured data to it.

QA Results

ACStatusDetails
1✅T221364#5188325

Details

SubjectRepoBranchLines +/-
Limit height of thumbs in metadata stepmediawiki/extensions/UploadWizardwmf/1.34.0-wmf.3+2 -1
Limit height of thumbs in metadata stepmediawiki/extensions/UploadWizardmaster+2 -1
Don't stretch small images to 100% width in "Data" sectionmediawiki/extensions/UploadWizardmaster+1 -1
Customize query in gerrit

Event Timeline

• PDrouin-WMF created this task.Apr 18 2019, 12:53 PM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptApr 18 2019, 12:53 PM
• PDrouin-WMF renamed this task from [stub] image dimension size on UW "Add data" step to Image dimension size on UW "Add data" step.Apr 18 2019, 10:46 PM
• PDrouin-WMF removed • PDrouin-WMF as the assignee of this task.
• PDrouin-WMF added a project: Structured-Data-Team-Current-Work.
• PDrouin-WMF updated the task description. (Show Details)
• PDrouin-WMF added subscribers: egardner, • Ramsey-WMF.
Restricted Application added a project: Multimedia. · View Herald TranscriptApr 18 2019, 10:46 PM
• PDrouin-WMF renamed this task from Image dimension size on UW "Add data" step to Image dimension scaling on UW "Add data" step is wonky [Labs].Apr 18 2019, 10:47 PM
• PDrouin-WMF updated the task description. (Show Details)
gerritbot added a comment.Apr 19 2019, 8:14 PM

Change 505303 had a related patch set uploaded (by Eric Gardner; owner: Eric Gardner):
[mediawiki/extensions/UploadWizard@master] Don't stretch small images to 100% width in "Data" section

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

gerritbot added a project: Patch-For-Review.Apr 19 2019, 8:14 PM
egardner claimed this task.Apr 19 2019, 8:15 PM
egardner added a comment.Apr 19 2019, 8:17 PM

Ok, this should be a simple fix (just made one change from width to max-width in the CSS.
@PDrouin-WMF this is not on Labs/Beta yet (maybe someone can push there so you can verify), but here's a screenshot from my local instance:

Screen Shot 2019-04-19 at 1.15.29 PM.png (1×3 px, 689 KB)

The small, square image is no longer being stretched to fill the available space. I think this change will fix *most* of the weird behavior you are describing above; someone could still upload a 10px wide, 2000px tall image and it would look strange, but that's more of an edge case IMO.

egardner moved this task from To Do to Code Review on the Structured-Data-Team-Current-Work board.Apr 19 2019, 8:18 PM
• PDrouin-WMF added a comment.Apr 23 2019, 1:17 PM

@egardner thanks for the screenshot! looking forward to seeing it on Labs/Beta :D

egardner moved this task from Code Review to Needs QA on the Structured-Data-Team-Current-Work board.Apr 23 2019, 8:56 PM
• PDrouin-WMF moved this task from Doing 📝 to Done/Handed off 📮 on the SDC Design board.Apr 24 2019, 12:54 PM
gerritbot added a comment.Apr 24 2019, 9:32 PM

Change 505303 merged by jenkins-bot:
[mediawiki/extensions/UploadWizard@master] Don't stretch small images to 100% width in "Data" section

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

ReleaseTaggerBot added a project: MW-1.34-notes (1.34.0-wmf.3; 2019-04-30).Apr 24 2019, 10:00 PM
• Ramsey-WMF moved this task from Untriaged to Next up on the Multimedia board.Apr 25 2019, 3:58 PM
• PDrouin-WMF added a comment.May 2 2019, 8:49 PM

Recap from the earlier meeting:

  • Max height is needed - Depicts should be visible on the screen no matter what (if users have a long image, and they don't see what's possible to add, they may skip this step). Could use a bounding box?
  • MM: will do (landscape images won't be full-width anymore, though - do we center them or left-align?)
  • Answer: left-aligned, probably
• Ramsey-WMF reassigned this task from egardner to matthiasmullie.May 2 2019, 10:11 PM

switching this to Matthias while Eric is out.

matthiasmullie added a comment.May 3 2019, 8:01 AM

Image dimensions will now never exceed 360px height, or the width of the statements panel.

gerritbot added a comment.May 3 2019, 8:01 AM

Change 507917 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/UploadWizard@master] Limit height of thumbs in metadata step

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

gerritbot added a comment.May 3 2019, 10:13 AM

Change 507917 merged by Matthias Mullie:
[mediawiki/extensions/UploadWizard@master] Limit height of thumbs in metadata step

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

ReleaseTaggerBot edited projects, added MW-1.34-notes (1.34.0-wmf.4; 2019-05-07); removed MW-1.34-notes (1.34.0-wmf.3; 2019-04-30).May 3 2019, 11:00 AM
• PDrouin-WMF added a comment.May 3 2019, 2:06 PM

Thank you, @matthiasmullie!

matthiasmullie reassigned this task from matthiasmullie to Edtadros.May 7 2019, 6:14 AM
matthiasmullie updated the task description. (Show Details)
matthiasmullie subscribed.
gerritbot added a comment.May 7 2019, 9:43 AM

Change 508527 had a related patch set uploaded (by Matthias Mullie; owner: Matthias Mullie):
[mediawiki/extensions/UploadWizard@wmf/1.34.0-wmf.3] Limit height of thumbs in metadata step

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

gerritbot added a comment.May 7 2019, 10:02 AM

Change 508527 merged by jenkins-bot:
[mediawiki/extensions/UploadWizard@wmf/1.34.0-wmf.3] Limit height of thumbs in metadata step

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

ReleaseTaggerBot edited projects, added MW-1.34-notes (1.34.0-wmf.3; 2019-04-30); removed MW-1.34-notes (1.34.0-wmf.4; 2019-05-07).May 7 2019, 11:00 AM
Edtadros reassigned this task from Edtadros to • Ramsey-WMF.EditedMay 16 2019, 11:33 PM
Edtadros subscribed.

Test Result

Status: ✅ PASS
OS: macOS Mojave
Browser: Chrome
Device: MBP

Test Artifact(s):

Acceptance Criteria:

Can be tested on https://commons.wikimedia.beta.wmflabs.org/wiki/Special:UploadWizard

The image is larger than the thumbnails on the Describe step, but not so large that they either look distorted or they hinder the user from both seeing the image and adding structured data to it.

Screen Shot 2019-05-16 at 4.32.24 PM.png (1×1 px, 381 KB)

Screen Shot 2019-05-16 at 4.32.31 PM.png (1×1 px, 430 KB)

Screen Shot 2019-05-16 at 4.32.16 PM.png (1×1 px, 446 KB)

Screen Shot 2019-05-16 at 4.32.36 PM.png (1×1 px, 348 KB)

Edtadros updated the task description. (Show Details)May 16 2019, 11:34 PM
Ladsgroup removed a project: Patch-For-Review.May 22 2019, 9:21 AM
• Ramsey-WMF moved this task from Needs QA to Verify on Production on the Structured-Data-Team-Current-Work board.May 23 2019, 11:25 PM
• Ramsey-WMF closed this task as Resolved.Jun 7 2019, 10:56 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL