Page MenuHomePhabricator

[testwiki-wmf.9] Add image - small size image breaks caption box
Closed, ResolvedPublic

Assigned To
Authored By
Etonkovidova
Nov 17 2021, 7:45 PM
Referenced Files
F34762135: image.png
Nov 22 2021, 7:40 PM
F34754830: small image.png
Nov 19 2021, 4:42 AM
F34752828: Screenshot_20211117-120416_Samsung Internet.jpg
Nov 18 2021, 12:00 AM
F34752825: Screen Shot 2021-11-17 at 3.51.40 PM.png
Nov 17 2021, 11:55 PM
F34752823: Screen Shot 2021-11-17 at 3.50.27 PM.png
Nov 17 2021, 11:55 PM
F34752737: addImage_tinyImage.gif
Nov 17 2021, 10:59 PM
F34752416: caption_broken2.gif
Nov 17 2021, 7:45 PM
F34752401: Screen Shot 2021-11-17 at 11.23.19 AM.png
Nov 17 2021, 7:45 PM

Description

On testwiki wmf.9 the suggested image for Thanatotheristes is the small-sized (9x17 px) image - File:Arrow_for_fossil_range_17x9.png.

Clicking 'yes' to insert the image produces a broken caption view:

Screen Shot 2021-11-17 at 11.23.19 AM.png (1×748 px, 63 KB)

Click on the animated gif :

caption_broken2.gif (662×354 px, 263 KB)

This task is for making sure the image is not stretched to the full width if its width is smaller than the device width. Image suggestions that don't meet the minimum width requirements should not be shown (this is handled separately via T296218: Add image: Set a minimum width for image suggestions).

Event Timeline

We want to apply these business rules to displaying the images during the caption step.

  • For an image that has a width in pixels narrower than the screen, show that image at original size (but no farther) and letterbox the rest.
  • For an image that has a width in pixels wider than the screen, shrink the image to fit at fit-width on the screen.

We also potentially need there to be a minimum height for the space that a tiny image goes in so that the "View image details" footer doesn't cover it up.

One more open question: should the letterbox background be gray or white or something else? We don't want users to think that the gray part is part of the image that they're inserting.

@RHo @Etonkovidova @mewoph can continue the discussion.

Change 739665 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] [WIP] Add an image: Take into account the image's original width for caption thumbnail

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

@RHo Here's what the existing implementation looks like with the rendered image constrained by the original width (with some minimum height to avoid view image details covering the entire image). Let us know what you prefer re: the background.

addImage_tinyImage.gif (1×748 px, 869 KB)

Testing notes (to check after the fix) - check the suggested image sizes to see if the caption box stays proper width:

Screenshot_20211117-120416_Samsung Internet.jpg (2×1 px, 325 KB)

This is how the image will look in wikitext:

small image.png (640×70 px, 5 KB)

As far as I can see there is no way around this. (If there is no / very little caption, it looks less ridiculous, but still not great.)
I think showing a "no suggestion" error will be the lesser evil here.

This is how the image will look in wikitext:

small image.png (640×70 px, 5 KB)

As far as I can see there is no way around this. (If there is no / very little caption, it looks less ridiculous, but still not great.)
I think showing a "no suggestion" error will be the lesser evil here.

Agree this makes sense for iteration 1, and have filed T296218: Add image: Set a minimum width for image suggestions per team discussion today.

I do think that the work @mewoph has done so far on this with setting a minimim height and always making the caption input full-width is still valid, and have captured this in the Figma spec

image.png (306×992 px, 36 KB)

@mewoph -- it's up to you whether the change on this task should be merged, given that the users won't actually encounter tiny images in their experience because of the work on T296218.

@mewoph -- it's up to you whether the change on this task should be merged, given that the users won't actually encounter tiny images in their experience because of the work on T296218.

This is still valid regardless of T296218 because there would still be occasions where an image smaller than the screen width appears for which we would still want the caption inut to be full width.

Change 739665 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add an image: Take into account the image's original width for caption thumbnail

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