Description
Description
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | MMiller_WMF | T227728 [EPIC] Growth: Newcomer tasks 1.0 | |||
| Open | kostajh | T232423 Newcomer tasks: suggested edits module | |||
| Resolved | kostajh | T238280 Newcomer tasks: mobile module styling issues | |||
| Open | BUG REPORT | None | T244210 Newcomer task: Suggested article image should be repeated when image width is less than card width |
Event Timeline
Comment Actions
Repeating the image looks weird and broken. Compare
with.
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  | Option 2: Same image covering the background and blurred  |
The second option is the standard when mobile portrait video is shown in a landscape video player (eg mobile videos on YouTube).
Comment Actions
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:
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.
Comment Actions
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:
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.
Comment Actions
I wonder if it's possible to repeat + flip horizontally. That would make the edges line up nicely.
Comment Actions
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.
Can probably be fixed with SVG blur though, and that even works in IE.
Comment Actions
Here's a straightforward attempt, with filter:blur(5px). This looks pretty bad because the blur affects the image edge as well.
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.