In our aggressive html stripping for native display of talk pages, we also strip out images. This task is to revisit that logic to allow images to come through and display as native image views on talk pages.
Test steps:
The discussion is archived / closed now, but go to Elizabeth II's talk page > Archive 45. Scroll down to "Infobox photograph for after her death". Notice https://www.figma.com/file/E7YX2N8tQ94gyAeGcyqy8C/iOS-Talk-Pages?node-id=3030%3A11568&t=roFbrzSKBMLbGKxr-1 no images display, so users cannot see what participants are talking about.
Designs
Figma Under the 'Placeholder image' page
Context:
- Below you can see how images are displayed on mobile web and how the same page looks like the iOS app (there is no image or indication that there should be an image, see below).
| Mobile web | iOS app |
- Building off of Option 1from the comments we could display image icon and a link with the copy 'View image' where the image should be.
-Ideally the web view of the image will be displayed inside of the app, without kicking the contributor out to Safari.
- Both the image icon and the link are tappable.
- Icon is the SF symbol, name: photo, size: 28 pts
| Talk page | Image view | Image carousel |
Nice to have:
- In the video here you can see that on mobile web when there are multiple images in one gallery and you tap on one and go through the other images through an image carousel (with the image and description visible), without going back to the talk page. If this is easy it would be great to include this so that the contributor doesn't always have to tap back to the talk page to see the next image.
Technical Limitations
See prototype options here.
While it's possible to display talk page images inline within the native talk page views, due to the nature of asynchronous image fetching, we should first display a placeholder image that is its own link, and takes the user out to a web view to display the image. This is because image data can return in any order, and swapping out random <img> tags in the html without throwing off string replacement ranges might be a pain. Swapping out <img> tags with a placeholder image, on the other hand, does not rely on a network call, so we can avoid a whole chunk of careful logic to ensure ranges aren't thrown off.