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. ** 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. If this does not all fit on one line, it should be truncated with "...". //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. ** Tapping anywhere on the thumbnail (not just the icon) makes the image full screen. See {T290540}. **!! ====NOTE: Final copy updated below:==== !!** * 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 image details`. This link should open the "image details dialog". See {T290782}. This line should begin with a blue "i" icon. If this does not all fit on one line, it should be truncated with "...". //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. ** Tapping anywhere on the thumbnail (not just the icon) makes the image full screen. See {T290540}. **!! ====NOTE: Final copy updated below:==== !!** * 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 image details"`. This link should open the "image details dialog". See {T290782}. This line should begin with a blue "i" icon. If this does not all fit on one line, it should be truncated with "...". //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!!