Page MenuHomePhabricator

Section-level images: article-level and section-level image thumbnails for Suggested edits
Closed, ResolvedPublic

Assigned To
Authored By
KStoller-WMF
May 3 2023, 9:33 PM
Referenced Files
F37099723: Screen Shot 2023-06-09 at 6.31.40 PM.png
Jun 10 2023, 1:36 AM
F37099717: Screen Shot 2023-06-09 at 6.31.23 PM.png
Jun 10 2023, 1:36 AM
F37099721: Screen Shot 2023-06-09 at 6.32.34 PM.png
Jun 10 2023, 1:36 AM
F37099715: Screen Shot 2023-06-09 at 6.31.02 PM.png
Jun 10 2023, 1:36 AM
Restricted File
Jun 6 2023, 1:55 PM
F37081987: Add image graphic.svg
May 29 2023, 4:28 AM
F37081986: Add image SE graphic.svg
May 29 2023, 4:28 AM
F37081992: Add image Section-level.svg
May 29 2023, 4:28 AM

Description

User story & summary:

As a newcomer, I want section-level and article-level image suggestions to have different thumbnails, so that I see a quick visual that differentiates the tasks.

Background & research:

This task is important because it will help newcomers differentiate these tasks.

Design:

[[ |Figma designs]]

Image thumbnailImage thumbnail in-situ (desktop)Image thumbnail in-situ (mobile)Image thumbnail in-situ (mobile preview)
Article-level designs
Add image SE graphic.png (160×332 px, 3 KB)
Desktop-02i-SE module (2).png (842×1 px, 112 KB)
Mobile-02i-SE module (3).png (641×364 px, 42 KB)
Growth Mobile SE Preview (1).png (218×328 px, 12 KB)
Alt textIllustration of an image with a question mark on top of it, representing an image suggestion. On the bottom right there's the Wikimedia Commons logo.
Section-level designs
Section image thumbnail.png (160×332 px, 3 KB)
Desktop-02i-SE module (1).png (842×1 px, 116 KB)
Mobile-02i-SE module (2).png (641×364 px, 44 KB)
Growth Mobile SE Preview (2).png (218×328 px, 13 KB)
Alt textIllustration of an image in the middle of an article section with a question mark next to it, representing an image suggestion for an article section. On the bottom right there's the Wikimedia Commons logo.
Acceptance Criteria:

Given I'm viewing Suggested edits,
When a section-level "add an image" task is suggested,
Then the thumbnail associated with the section-level image task displays

Given I'm viewing Suggested edits,
When a article-level "add an image" task is suggested,
Then the thumbnail associated with the article-level image task displays

Event Timeline

Change 923419 had a related patch set uploaded (by Gergő Tisza; author: Gergő Tisza):

[mediawiki/extensions/GrowthExperiments@master] Section images: Use image recommendation thumbnail icon

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

Could we get the asset files for this? Figma doesn't make it easy to export images which are composed of multiple objects.

Could we get the asset files for this? Figma doesn't make it easy to export images which are composed of multiple objects.

Is this what you need?

Image thumbnail:


Mobile preview:


@JFernandez-WMF - can you follow up with assets if needed?

Is this what you need?

Yes, thanks!

Change 923419 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: Use image recommendation thumbnail icon

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

Tgr removed Tgr as the assignee of this task.May 30 2023, 3:44 PM
kostajh changed the task status from Open to In Progress.May 31 2023, 1:41 PM

Could we get the asset files for this? Figma doesn't make it easy to export images which are composed of multiple objects.

Is this what you need?

Image thumbnail:


Mobile preview:


@JFernandez-WMF - can you follow up with assets if needed?

In the original implementation from Add an image we're using a transparent background image with just the central icon and setting the background via CSS. Could we get a similar exported icon for the new asset? cc @JFernandez-WMF

{F37095528}

I don't think we need a dedicated mobile export given we're using a svg file and we haven't used a different asset for mobile until now. However we would need a dedicated RTL resource because of the question mark illustration.

Change 927710 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Section images: use dedicated illustration thumbnail

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

Change 927710 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Section images: use dedicated illustration thumbnails

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

Etonkovidova subscribed.

Checked in betalabs - all looks according to the specs; adding below the images for RTL section-level image suggested tasks:

Desktop
Screen Shot 2023-06-09 at 6.31.02 PM.png (1×1 px, 161 KB)
Screen Shot 2023-06-09 at 6.32.34 PM.png (588×752 px, 67 KB)
Screen Shot 2023-06-09 at 6.31.23 PM.png (1×708 px, 104 KB)
Screen Shot 2023-06-09 at 6.31.40 PM.png (1×752 px, 115 KB)