Change Details

** Suggestion reason {T292467} ** 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. See {T290540}. ** 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 "..." This is not the "caption" -- it is the free text description that is entered along with almost every image. In future iterations, we may want to have fallback logic to display caption if description is unsatisfactory, or vice versa. But for this first iteration, we should just use description. *** 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].

* Suggestion reason {T292467} * 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. ** Tapping anywhere on the thumbnail (not just the icon) makes the image full screen. See {T290540}. * Image metadata ** On the righthand side of the thumbnail should be a set of image metadata from Commons. *** Filename: in black bold, including the extension (e.g. ".jpg"). It only has one line. It should not be a link or have the "open in another window" button. If the filename is too long, it should have a "...". *** 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 "..." This is not the "caption" -- it is the free text description that is entered along with almost every image. In future iterations, we may want to have fallback logic to display caption if description is unsatisfactory, or vice versa. But for this first iteration, we should just use description. ** After the description, there should be a blue link that says "View details". This link should open the "image details dialog". See {T290782}. This line should begin with a blue "i" icon. //Mockups as of 2021-10-08:// {F34680003} **NOTE:** Refer to Figma for up-to-date detailed redline mocks and specs: !!https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task?node-id=3042%3A8783!!

** Suggestion reason {T292467} ** 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** Tapping anywhere on the thumbnail (not just the icon) makes the image full screen. See {T290540}. ** 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 areaFilename: in black bold, including the extension (e.g. ".jpg"). It only has one line. It should not be a link or have the "open in another window" button. As a placeholderIf the filename is too long, let's do this:it should have a "...". **** Filename: in blue bold, including the extension (e.g. ".jpg"). It only has one line. At the end*** Description: below the filename, should beshow as much of the "open in another window" buttondescription from Commons as will fit. If the filenameIf it is too long, it should have a "...", but still have room for the "open in another window" buttonbe cut off with "..." This is not the "caption" -- it is the free text description that is entered along with almost every image. That should all be a link to the Commons image pageIn future iterations, e.g.we may want to have fallback logic to display caption if description is unsatisfactory, https://commons.wikimedia.org/wiki/File:HMS_Pandora.jpgor vice versa. When the user opens up that pageBut for this first iteration, itwe should be in the display language that they were using on Wikipediajust use description. **** Description: below the filename** After the description, show as much of the description from Commons as will fitthere should be a blue link that says "View details". If it is too long, it should be cut off with "..." This is not the "caption" -- it is the free text description that is entered along with almost every imageThis link should open the "image details dialog". In future iterations, we may want to have fallback logic to display caption if description is unsatisfactory, or vice versaSee {T290782}. But for this first iteration, we should just use description. *** 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].This line should begin with a blue "i" icon. //Mockups as of 2021-10-08:// {F34680003} **NOTE:** Refer to Figma for up-to-date detailed redline mocks and specs: !!https://www.figma.com/file/ULhJr1isDstRbGE5vjYDsr/Add-images-structured-task?node-id=3042%3A8783!!