API endpoint from Growth that could tell us which images in which sections to suggest for a given article.

@Esanders: to what extent (if any) does the existing Add image "pipeline" (not sure this is the right term) provides the API you noted us needing (T412332#11548924)?

Quick experimentation reveals:

1. This uses a completely different system than other Growth suggestions I've seen, and is actually integrated into normal mediawiki APIs
2. You can find pages with image recommendations using mediawiki site search for hasrecommendation:image or hasrecommendation:image_section: https://en.wikipedia.org/w/index.php?search=hasrecommendation%3Aimage / https://en.wikipedia.org/w/index.php?search=hasrecommendation%3Aimage_section
3. You can then use the query API for details of the images suggested for that page:
   1. Top-level: https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&format=json&prop=growthimagesuggestiondata&titles=De_jure%7C2018_NFL_season%7CCosmological%20argument%7CFree%20agent&formatversion=2&gisdtasktype=image-recommendation
   2. Section: https://en.wikipedia.org/wiki/Special:ApiSandbox#action=query&format=json&prop=growthimagesuggestiondata&titles=Donald_Trump%7CFood%7CUniverse%7CUnited%20Kingdom&formatversion=2&gisdtasktype=section-image-recommendation

The section results will be returned with sectionNumber / sectionTitle keys, which look sufficient for us to locate the section which the image is suggested for.

Example data for the suggestion for enwiki's United Kingdom article:

{
    "pageid": 31717,
    "ns": 0,
    "title": "United Kingdom",
    "growthimagesuggestiondata": [
        {
            "titleNamespace": 0,
            "titleText": "United Kingdom",
            "images": [
                {
                    "image": "Embassy_of_the_United_Kingdom,_Budapest,_plaque_(2019).jpg",
                    "displayFilename": "Embassy of the United Kingdom, Budapest, plaque (2019).jpg",
                    "source": "wikidata-section-alignment",
                    "projects": [
                        "euwiki"
                    ],
                    "metadata": {
                        "descriptionUrl": "https://commons.wikimedia.org/wiki/File:Embassy_of_the_United_Kingdom,_Budapest,_plaque_(2019).jpg",
                        "thumbUrl": "//upload.wikimedia.org/wikipedia/commons/thumb/d/d5/Embassy_of_the_United_Kingdom%2C_Budapest%2C_plaque_%282019%29.jpg/120px-Embassy_of_the_United_Kingdom%2C_Budapest%2C_plaque_%282019%29.jpg",
                        "fullUrl": "//upload.wikimedia.org/wikipedia/commons/d/d5/Embassy_of_the_United_Kingdom%2C_Budapest%2C_plaque_%282019%29.jpg",
                        "originalWidth": 2048,
                        "originalHeight": 1536,
                        "mustRender": false,
                        "isVectorized": false,
                        "mediaType": "BITMAP",
                        "description": "Az Egyesült Királyság budapesti nagykövetsége táblája - Budapest II. Füge utca 5-7",
                        "author": "<a href=\"//commons.wikimedia.org/wiki/User:Palotabar%C3%A1t\" class=\"mw-redirect\" title=\"User:Palotabarát\">Palotabarát</a>",
                        "license": "CC BY-SA 4.0",
                        "date": "2019-11-25 12:53:43",
                        "caption": null,
                        "categories": [
                            "Bilingual English-Hungarian plaques in Hungary",
                            "Embassy of the United Kingdom in Budapest",
                            "Plaques of diplomatic missions in Budapest",
                            "Plaques of diplomatic missions of the United Kingdom"
                        ],
                        "reason": "Used in an equivalent article section in Basque Wikipedia.",
                        "contentLanguageName": "English"
                    },
                    "sectionNumber": 1,
                    "sectionTitle": "Etymology_and_terminology"
                }
            ],
            "datasetId": "75982966-2a0e-11f1-acc0-6c92cfa64610"
        }
    ]
},

This would be pretty trivial to implement. Similar framework to T421328, with different code for locating the section and for the actual action to take.

In T416043#11760353, @DLynch wrote:

This would be pretty trivial to implement. Similar framework to T421328, with different code for locating the section and for the actual action to take.

Wow. Nice, @DLynch! I'm going to pull this ticket onto the next sprint board so that we can a) estimate it and b) align on the priority implementing an initial experimental version of this suggestion.

We actually need to write the suggestion but David has already done some investigation.

After exploring solutions and validating them with Growth, we propose proceeding with Approach #3: a guided flow where users add both the image and its caption within a single experience.

Flow overview:

1. User finds the “Add an image” suggestion in the article with
   • Description explaining the reason of suggesting this image
   • Image in a medium size (users could also expand the image in fullwidth by clicking on it)
2. After selecting the Add image button, they are guided to:
   • More info and link about the suggested image
   • Add a short caption
   • Add alternative text
3. Once completed, the image is inserted into the article with its caption, with a success message reinforcing its completion
4. User could then include a link in the caption text once it's included in the article

mobile	desktop

I think we should always avoid building custom workflows as these add complexity to the EditCheck system and do not scale to community written checks.

If inserting the image and focussing the caption doesn't work (along with the empty image caption check that would trigger if they didn't fill it in) we could also generically modify image captions to have placeholder text.

El T416043#11870604, @Esanders escribió:

I think we should always avoid building custom workflows as these add complexity to the EditCheck system and do not scale to community written checks.

If inserting the image and focussing the caption doesn't work (along with the empty image caption check that would trigger if they didn't fill it in) we could also generically modify image captions to have placeholder text.

An alternative to the proposed custom flow would be to split this into two suggestions: one to add the image, and a follow-up suggestion to add the caption.

However, this could introduce confusion, as the system would first allow adding an image without a caption, and only later prompt the user to complete it. This breaks the expectation of a complete action. It also raises the question of how we handle the image’s alternative text, which would likely require an additional step or future suggestion.

Overall, this approach may increase fragmentation compared to guiding users through a single complete flow.

Change #1281681 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/extensions/VisualEditor@master] New edit check: suggested images

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

Test wiki created on Patch demo by BMartinezCalvo (WMF) using patch(es) linked to this task:
https://99d4a3bd4b.catalyst.wmcloud.org/w/

I've reviewed the implementation and here are some things we should fix in case we want to use the non custom flow proposed in T416043#11870828:

• Copies:
  • Title: Ok
  • Description: "This image appears on other Wikipedia language versions and may help illustrate this section."
  • Buttons: Add image Dismiss
• Add 8px padding between the description and image
• On desktop, when hovering over the image we could show a Tooltip with the name of the image
• The image is not being added in the article. Once the image is added in the article, the Image Caption suggestion should appear.

Desktop	Mobile

Description: "This image appears on other Wikipedia language versions and may help illustrate this section."

So, in the current version this is actually the response directly from the API which explains why it chose this image. It's not always going to be "appears on other wikipedia language versions" -- I've also seen "Linked to a Wikidata item that may be relevant to this article section." for instance. I think it'd be good to preserve this information, by having some prefix like "This image may help illustrate this section. It was suggested because: $1" (or similar -- put the explanation into the footer, etc?).

The image is not being added in the article. Once the image is added in the article, the Image Caption suggestion should appear.

I haven't seen it fail to add the image, so I might need more information. If there wasn't a caption provided by the API, the caption suggestion does currently appear.

El T416043#11918207, @DLynch escribió:

The image is not being added in the article. Once the image is added in the article, the Image Caption suggestion should appear.

I haven't seen it fail to add the image, so I might need more information. If there wasn't a caption provided by the API, the caption suggestion does currently appear.

It feels strange to show a warning message right after completing a suggestion, especially because the user was not asked to include any caption while completing the "Add an image" suggestion. I think we should display the "Add image caption" as a suggestion or instead use the custom flow proposed here T416043#11855545.

It feels strange to show a warning message right after completing a suggestion, especially because the user was not asked to include any caption while completing the "Add an image" suggestion.

I think it makes sense with our normal distinctions between checks and suggestions. It's a warning because it's about an edit you're making, and so it's letting you know that a change you made has a potential issue.

It feels strange to show a warning message right after completing a suggestion,

I agree that we should avoid showing a warning if the user hasn't had a chance to insert the caption yet - although in general someone inserting an image without a caption is a fairly serious issue that should be flagged as a warning.

We should try to come up with a way to encourage the user to add a caption before showing them a warning, but preferrably without building custom workflows. This could be a combination of (1) moving focus to the caption immediately and (2) implementing a generic placeholder for empty captions as I suggested in T416043#11870604.

We can look into modifying the AddCaption check to not show until the user has moved away from the caption field after inserting an image.

El T416043#11918641, @Esanders escribió:

We should try to come up with a way to encourage the user to add a caption before showing them a warning, but preferrably without building custom workflows. This could be a combination of (1) moving focus to the caption immediately and (2) implementing a generic placeholder for empty captions as I suggested in T416043#11870604.

This approach could work. But we will need to ensure the caption focus state is visible enough. I’m concerned that relying only on moving the text cursor to the placeholder may not provide sufficient visibility.

Would it be able to try one of the following?

	1. Use the text selection highlight in all the placeholder to put the attention there.
	2. Use the focus border around the caption's placeholder to show it's a TextArea to fill.

Next steps

• Editing Engineering to provide feedback on approaches @bmartinezcalvo proposed for making the empty caption field easier for people to notice. More in T416043#11920911.

Change #1281681 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] New edit check: suggested images

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