//Corresponding task from "add a link": {T269644}//
---
When the user is in suggestions mode from {T289829}, but before they have selected "yes/no/skip", the image inspector should be open (unless they collapse it). The image inspector is the place where the action happens of accepting, rejecting, or skipping.
* **Location**
** The link inspector is a card at the bottom of the screen.
** When the user arrives on the page, it should animate in, like it is being "uncollapsed" per {T287404}.
* **Header**
** Starts with the robot icon.
** Copy TBD
** Should be collapsible as the link inspector is per {T287404}.
** Like the link inspector, the far right of the header has a "?" icon, which opens the help panel.
* **Content**
** Suggestion reason
*** The content starts with the suggestion reason. It should say one of these three things, depending on the source of the suggestion in the API. It should not have any prefix, i.e. it does not start with "Suggestion reason:" like in the mockups:
*** "Found on the same article in Czech, Norwegian, and Hebrew Wikipedia."
*** "Found in the Wikidata item for this article (strong match)."
*** "One of several images linked to the Wikidata item for this article."
** Image thumbnail
*** On the left under the suggestion reason.
*** Show a small version of the suggested image. It should always fit into the same horizontal rectangle, even if that means letterboxing it (like for a portrait-shaped image).
*** In the lower right of the thumbnail should be an icon to expand the image to fullscreen. The icon floats above the thumbnail with transparent gray, so you can still see the image underneath it.
**** This icon makes the image full screen.
**** Once fullscreen, the user should be able to zoom in farther and pan around the image using the "pinch" and two-finger gestures on their device.
**** The fullscreen image should have an "X" to close it in the upper right.
** Image metadata
*** On the righthand side of the thumbnail should be a set of image metadata from Commons.
*** It is still TBD exactly which metadata will be shown in this area. As a placeholder, let's do this:
**** Filename: in blue bold, including the extension (e.g. ".jpg"). It only has one line. At the end, should be the "open in another window" button. If the filename is too long, it should have a "...", but still have room for the "open in another window" button. That should all be a link to the Commons image page, e.g. https://commons.wikimedia.org/wiki/File:HMS_Pandora.jpg. When the user opens up that page, it should be in the display language that they were using on Wikipedia.
**** Description: below the filename, show as much of the description from Commons as will fit. If it is too long, it should be cut off with "..."
*** After the description, there should be a blue link that says "View details". This link should open the "image details dialog". See [TASK TO BE CREATED].
** Below the thumbnail, there should be text: "Add this image to the start of the article?"
* **Actions**
** At the bottom of the card are the action buttons.
** Yes: has a checkmark and the word "Yes". This button triggers the caption stage. See [TASK TO BE CREATED].
** No: has an X and the word "No". This button triggers the rejection dialog. See [TASK TO BE CREATED].
** Skip: is not a button, but is just a dark grey link. This button just loads up the next suggestion from the user's suggested edits feed, just as if they had visited it by selecting it from the feed. If the user has no more suggestions in their feed, it should just bring them back to the suggested edits overlay on their homepage.
* **RTL**
** Note that the whole card should be flipped for RTL languages. In addition to the header and buttons, this would put the image thumbnail on the righthand side and the metadata on the left.
//Mockups as of 2021-08-30:// {F34626137}
**NOTE:** Refer to Figma for up-to-date detailed redline mocks and specs:
!!https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task-%5BGrowth%5D?node-id=2342%3A8050!!