Page MenuHomePhabricator

Newcomer tasks: Suggested article image should be repeated when image width is less than card width
Closed, ResolvedPublicBUG REPORT

Description

This is a regression of T238282, and is occurring on Desktop and Mobile.

Expected:

image.png (1×2 px, 478 KB)

Actual:

image.png (1×2 px, 520 KB)

Event Timeline

RHo renamed this task from Newcomer task: Suggested article image should be repeated when image width is less than card width to [Bug] Newcomer task: Suggested article image should be repeated when image width is less than card width.Feb 14 2020, 1:25 PM
RHo updated the task description. (Show Details)

Repeating the image looks weird and broken. Compare

pageimage no-repeat.png (252×260 px, 57 KB)
with
pageimage repeat-x.png (252×260 px, 57 KB)
.

Repeating the image looks weird and broken. Compare

pageimage no-repeat.png (252×260 px, 57 KB)
with
pageimage repeat-x.png (252×260 px, 57 KB)
.

I actually find not repeating the image and having the white gaps looks more weird and broken. We already had agreed to implement the repeat-x image on T238282 which is also why this is filed as a regression bug. While this example of a person's face being shown is not that common and looks admittedly a bit off, it is preferable in terms of it occurring occasionally, vs having the white gaps appear all the times the image doesn't fill card width.

HOWEVER, I would be really interested if we could slightly tweak the implementation so that a slight blur to the repeated side images:

Option 1: Blur added to the repeated images
image.png (221×228 px, 71 KB)
Option 2: Same image covering the background and blurred
image.png (221×228 px, 70 KB)

The second option is the standard when mobile portrait video is shown in a landscape video player (eg mobile videos on YouTube).

Paging through a random topic, about half the non-fullwidth images where headshots where a part of the head got repeated, so I don't think it's that rare. And it's even more apparent when the background has a different color:

pageimage repeat-x 2.png (252×260 px, 48 KB)

AFAIK there isn't any straightforward way to blur parts of the image only, but we could probably display a blurred version of the image with repeat-x or stretch, and then another unblurred instance on top of it. IE does not support CSS filters so the side images would appear unblurred, but I imagine we can live with that.

Paging through a random topic, about half the non-fullwidth images where headshots where a part of the head got repeated, so I don't think it's that rare. And it's even more apparent when the background has a different color:

pageimage repeat-x 2.png (252×260 px, 48 KB)

AFAIK there isn't any straightforward way to blur parts of the image only, but we could probably display a blurred version of the image with repeat-x or stretch, and then another unblurred instance on top of it. IE does not support CSS filters so the side images would appear unblurred, but I imagine we can live with that.

Yes I found this stackoverflow post which is not so straightforward. +1 to this tweak with the option to blur the *stretched width* background image). Also, yes to using CSS filter: blur and living without it on IE.

Which is your preferred option, stretch or repeat?

I wonder if it's possible to repeat + flip horizontally. That would make the edges line up nicely.

Here's a straightforward attempt, with filter:blur(5px). This looks pretty bad because the blur affects the image edge as well.

cssblur.png (290×278 px, 74 KB)

Can probably be fixed with SVG blur though, and that even works in IE.

Here's a straightforward attempt, with filter:blur(5px). This looks pretty bad because the blur affects the image edge as well.

cssblur.png (290×278 px, 74 KB)

Can probably be fixed with SVG blur though, and that even works in IE.

Thanks for drumming that up so quickly! My pref is stretched blur instead of this repeat since if that may reduce the edge blurring issue, combined with SVG blur.

kostajh renamed this task from [Bug] Newcomer task: Suggested article image should be repeated when image width is less than card width to Newcomer task: Suggested article image should be repeated when image width is less than card width.Apr 2 2020, 1:43 PM
kostajh changed the subtype of this task from "Task" to "Bug Report".
MMiller_WMF renamed this task from Newcomer task: Suggested article image should be repeated when image width is less than card width to Newcomer tasks: Suggested article image should be repeated when image width is less than card width.May 4 2020, 3:39 AM

This is surprisingly hard to get right:

  • As shown above, CSS blur spreads the image outside its original area (could be addressed in a number of ways, overflow:hidden, clip, background-clip...) and more problematically fades the edges out. Or more precisely, assumes the image is on a white background and uses that white color for the convolution when near the edges. SVG has an option to avoid this (edgeMode) but it does not seem to be implemented in any browser. I guess we could scale the background image to extend beyond the card a bit and then clip it, so this would be manageable, although it would add to the weirdness factor.
  • Some images have transparent areas, where the blurred background version shows through. I don't really see a way to deal with this. If we add a white background, there will be an edge between that background and the stretched or repeated background image - the same problem this task is trying to solve.

So I'll fall back to adding repeat-x to the original image, which is trivial to do. It will look bad in some cases; but the composition approach would look bad in some others, and has a lot more moving parts that can go wrong.

Change 597577 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Make task card images repeat horizontally

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

Change 597577 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Make task card images repeat horizontally

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

What's was checked: arwiki, cswiki, kowiki, and viwiki betalabs. Also checked IE11, Safari 13, and Edge81 in Saucelabs. Also it was tested on a real mobile device (iPhone 6s).

@RHo for your review:

  • The number of images where the repeated image feature is noticeable is roughly 10% of all images (by noticeable I mean when an image has those repeated parts and a user may notice them). From those 10% half of the images have somewhat sub optimal image display (see the comparison below).
  • In betalabs, the images are cut off horizontally more than in production

(1) Images that are full-width images (seemed to be unaffected by the fix).

cswiki betalabsarwiki betalabskowiki betalabs
IMG_8952.PNG (640×360 px, 179 KB)
IMG_8976.PNG (640×360 px, 165 KB)
IMG_8977.PNG (1×640 px, 286 KB)

(2) Images where the repeated feature is noticeable but looks fine.
Note: In betalabs for Kniha_Mormonova the image from the info box was not used, for some reason.

cswiki betalabscswiki current productionwikipedia app (on iPHone 6s)
IMG_8944.PNG (1×640 px, 236 KB)
IMG_8969.PNG (1×640 px, 222 KB)
IMG_8945.PNG (640×360 px, 163 KB)
IMG_8946.PNG (1×640 px, 316 KB)
IMG_8970.PNG (1×640 px, 303 KB)
IMG_8947.PNG (640×360 px, 190 KB)
IMG_8958.PNG (1×640 px, 370 KB)
Screen Shot 2020-05-20 at 5.40.10 PM.png (528×444 px, 87 KB)
IMG_8959.PNG (640×360 px, 174 KB)
IMG_8962.PNG (1×640 px, 219 KB)
IMG_8971.PNG (1×640 px, 164 KB)
IMG_8963.PNG (1×640 px, 251 KB)

(3) Problematic images

cswiki betalabscswiki current productionwikipedia app (on iPHone 6s)
IMG_8942.PNG (1×640 px, 226 KB)
IMG_8957.PNG (1×640 px, 216 KB)
IMG_8943.PNG (640×360 px, 170 KB)
IMG_8948.PNG (1×640 px, 306 KB)
Screen Shot 2020-05-20 at 5.34.57 PM.png (537×443 px, 94 KB)
IMG_8949.PNG (640×360 px, 199 KB)
IMG_8955.PNG (640×360 px, 148 KB)
IMG_8968.PNG (1×640 px, 300 KB)
IMG_8956.PNG (640×360 px, 209 KB)
IMG_8966.PNG (640×360 px, 151 KB)
IMG_8965.PNG (1×640 px, 244 KB)
IMG_8964.PNG (640×360 px, 175 KB)

More examples (without comparison pictures)

IMG_8972.PNG (1×640 px, 300 KB)
IMG_8975.PNG (1×640 px, 312 KB)
IMG_8978.PNG (1×640 px, 287 KB)

What's was checked: arwiki, cswiki, kowiki, and viwiki betalabs. Also checked IE11, Safari 13, and Edge81 in Saucelabs. Also it was tested on a real mobile device (iPhone 6s).
@RHo for your review:

  • The number of images where the repeated image feature is noticeable is roughly 10% of all images (by noticeable I mean when an image has those repeated parts and a user may notice them). From those 10% half of the images have somewhat sub optimal image display (see the comparison below).

Thanks @Etonkovidova - I agree it's not the best for this ~5% to be very noticeably repeated-x, but it looks intentional rather than having the white empty spaces which appears imho to look like an error. Moving to PM for final word...

  • In betalabs, the images are cut off horizontally more than in production

Yes, this separate issue of not-great face detection is filed in T240034. IIRC the apps generally look better because they have implemented some face-detection on article lead images (though that is also not perfect – see T148926#3126381).

(3) Problematic images

cswiki betalabscswiki current productionwikipedia app (on iPHone 6s)
IMG_8942.PNG (1×640 px, 226 KB)
IMG_8957.PNG (1×640 px, 216 KB)
IMG_8943.PNG (640×360 px, 170 KB)
IMG_8948.PNG (1×640 px, 306 KB)
Screen Shot 2020-05-20 at 5.34.57 PM.png (537×443 px, 94 KB)
IMG_8949.PNG (640×360 px, 199 KB)
IMG_8955.PNG (640×360 px, 148 KB)
IMG_8968.PNG (1×640 px, 300 KB)
IMG_8956.PNG (640×360 px, 209 KB)
IMG_8966.PNG (640×360 px, 151 KB)
IMG_8965.PNG (1×640 px, 244 KB)
IMG_8964.PNG (640×360 px, 175 KB)
  • In betalabs, the images are cut off horizontally more than in production

I cannot reproduce that, the images have the exact same height for me (on desktop and mobile Chrome). Which is expected, the only thing that was changed is the background-repeat property.

@RHo looking at the app screenshots made me wonder why we don't just scale our images to full width. I originally assumed this problem occurs when the image is physically not wide enough to fill the card, but the app uses larger sizes so that cannot be the case (and I checked manually and indeed it isn't). So e.g.

instead of thislike this
cs.wikipedia.org_w_index.php_title=Speci%C3%A1ln%C3%AD_Domovsk%C3%A1_str%C3%A1nka&source=personaltoolslink&namespace=0.png (252×260 px, 47 KB)
cs.wikipedia.org_w_index.php_title=Speci%C3%A1ln%C3%AD_Domovsk%C3%A1_str%C3%A1nka&source=personaltoolslink&namespace=0 (1).png (252×260 px, 54 KB)

Maybe that's just an artifact of what API we are using to get the image URL?

@RHo looking at the app screenshots made me wonder why we don't just scale our images to full width. I originally assumed this problem occurs when the image is physically not wide enough to fill the card, but the app uses larger sizes so that cannot be the case (and I checked manually and indeed it isn't). So e.g.

instead of thislike this
cs.wikipedia.org_w_index.php_title=Speci%C3%A1ln%C3%AD_Domovsk%C3%A1_str%C3%A1nka&source=personaltoolslink&namespace=0.png (252×260 px, 47 KB)
cs.wikipedia.org_w_index.php_title=Speci%C3%A1ln%C3%AD_Domovsk%C3%A1_str%C3%A1nka&source=personaltoolslink&namespace=0 (1).png (252×260 px, 54 KB)

Maybe that's just an artifact of what API we are using to get the image URL?

Hi @Tgr - Yes indeed, this repeat-x is a workaround from the original request to have the image at full-width and centered. However @kostajh commented the following on T238280#5696825 regarding size-limits to thumbnails from RESTBase:

C. Image should be…

scaled to be full-width of card (See bottom of description for example of when this does not happen)
height is 128px (ratio 1:2 with image width)
is there any rules or algorithm used by Page Previews to center image previews on a person's face? Instead of cutting off faces?

There's not a great option here. Portrait orientation image thumbnails from restbase may or may not be under the minimum width (260px) we use for the card. We can stretch a 200px with image so that it's 260px but it will look pixelated and not great, in addition to already not looking that good because it's a portrait image being forced into a landscape orientation holder.

Another option would be to not show images at all if they're in portrait orientation, and just stick with the placeholder image.

I would be in favour of returning to the full-width solution if we can get larger resolution images from the same place that apps are getting these images! Moving back to Needs More Work since it sounds like this is worth exploring...

Yeah, we can just replace the size parameter in the URL to get what we want (unless the original image is narrower than 260px which should be very rare). The flip side is that it will load a bit slower as 260px is not a standard image width so the thumbnail is probably not pre-rendered. (Then again, I'm not sure the size offered by RESTBase is any different...)

  • In betalabs, the images are cut off horizontally more than in production

I cannot reproduce that, the images have the exact same height for me (on desktop and mobile Chrome). Which is expected, the only thing that was changed is the background-repeat property.

The height is is same, yes. I re-checked and realized that describing images in betalabs as "cut off horizontally " was not correct. The images in betalabs are displayed more close-up (and different centering?) than in production (may be there is a better term to describe it). I checked FF and mobile and below is another comparison set (separately for mobile and desktop).

  • Desktop (FF)
betalabsproduction
Screen Shot 2020-05-21 at 1.28.27 PM.png (575×439 px, 120 KB)
Screen Shot 2020-05-21 at 1.28.57 PM.png (525×435 px, 109 KB)
Screen Shot 2020-05-21 at 1.26.13 PM.png (536×443 px, 119 KB)
Screen Shot 2020-05-21 at 1.26.27 PM.png (499×442 px, 110 KB)
  • Mobile (iPhone 6s)
betalabsproduction
IMG_8983.PNG (1×640 px, 266 KB)
IMG_8982.PNG (1×640 px, 219 KB)

Yeah, we are talking about the same thing, I just can't reproduce it happening.
Looking at your first example, it doesn't even seem related to the image being narrower than the card.

I imagine this is due to images coming either from the action API or RESTBase, with slightly different resolution.

Change 598115 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/core@master] Add mw.util.parseImageUrl

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

Change 598127 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/core@master] Add URL template to the return data of mw.util.parseImageUrl

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

Change 598115 merged by jenkins-bot:
[mediawiki/core@master] mediawiki.util: Add mw.util.parseImageUrl

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

Change 598154 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Resize image card thumbnails to be exactly 260 pixels

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

The patches improve thumbnail handling so we show a large enough thumbnail to fill the card whenever possible. Repetition should only be used now for thumbnails where the original, full-sized image is smaller than 260px, which I think in practice only happens for some company logos.

Change 598127 merged by jenkins-bot:
[mediawiki/core@master] Add URL template to the return data of mw.util.parseImageUrl

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

Change 598154 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Resize image card thumbnails to be exactly 260 pixels

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

Any image card thumbnails has thumbnailWidth: 260:

Screen Shot 2020-06-01 at 9.20.05 PM.png (418×425 px, 61 KB)

Note: It seems that betalabs displays images inherently different than production does (in terms of positioning). The example below from production looked different when they were in betalabs.

cswiki betalabscurrent production
Screen Shot 2020-06-01 at 9.16.29 PM.png (588×440 px, 106 KB)
Screen Shot 2020-06-01 at 9.30.36 PM.png (599×424 px, 94 KB)
Screen Shot 2020-06-01 at 9.38.24 PM.png (594×430 px, 110 KB)
Screen Shot 2020-06-01 at 9.38.09 PM.png (600×446 px, 96 KB)

I've posted on T240034 about ways to improve faces being cut off, but in the interim can we consider making the image be positioned at background-position-y: 25% instead? This seems to prevent people's faces from being cut off at the forehead (when the image is vertically positioned at top) and also reduces the heads being cut off entire when the image is vertically centered.

A few examples in CS beta:

topbackground-position-y: 25%;
image.png (554×564 px, 178 KB)
image.png (572×580 px, 212 KB)
image.png (576×586 px, 354 KB)
image.png (568×592 px, 384 KB)
image.png (570×546 px, 313 KB)
image.png (558×548 px, 328 KB)
image.png (544×554 px, 187 KB)
image.png (532×556 px, 237 KB)
image.png (546×544 px, 349 KB)
image.png (526×540 px, 316 KB)
image.png (534×552 px, 379 KB)
image.png (552×546 px, 400 KB)

Making this update will mean also ensuring the image icon positioning when there is no thumbnail needs to be updated

image.png (548×566 px, 42 KB)
image.png (534×554 px, 41 KB)

Change 601807 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Improve suggested edits card image positioning

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

Change 601807 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Improve suggested edits card image positioning

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

Checked in betalabs and compared with production -the display seems to be really improved:

betalabsproduction
Screen Shot 2020-06-03 at 5.30.38 PM.png (470×425 px, 111 KB)
Screen Shot 2020-06-03 at 5.34.46 PM.png (589×426 px, 109 KB)
Screen Shot 2020-06-03 at 5.35.07 PM.png (460×428 px, 91 KB)
Screen Shot 2020-06-03 at 5.35.41 PM.png (575×420 px, 95 KB)
Screen Shot 2020-06-03 at 5.32.43 PM.png (465×423 px, 118 KB)
Screen Shot 2020-06-03 at 5.34.14 PM.png (586×424 px, 115 KB)
Screen Shot 2020-06-03 at 5.31.18 PM.png (467×433 px, 111 KB)
Screen Shot 2020-06-03 at 5.33.51 PM.png (553×413 px, 107 KB)
Screen Shot 2020-06-03 at 5.58.03 PM.png (521×432 px, 116 KB)
Screen Shot 2020-06-03 at 5.57.50 PM.png (511×415 px, 89 KB)

Here are some examples when the new positioning made the image display not so optimal, but such cases are really rare and the images are still displayed ok.

betalabsproduction
Screen Shot 2020-06-03 at 5.58.56 PM.png (520×428 px, 118 KB)
Screen Shot 2020-06-03 at 6.03.21 PM.png (514×426 px, 112 KB)
Screen Shot 2020-06-03 at 5.55.41 PM.png (479×421 px, 60 KB)
Screen Shot 2020-06-03 at 5.45.59 PM.png (506×419 px, 68 KB)

Making this update will mean also ensuring the image icon positioning when there is no thumbnail needs to be updated

image.png (548×566 px, 42 KB)
image.png (534×554 px, 41 KB)

Checked - the position of the thumbnail in betalabs is like on the first of your screenshots:

Screen Shot 2020-06-03 at 5.36.43 PM.png (569×435 px, 58 KB)

Thank you. I know this was a lot of work, but I think it was worth it!