yaelirub
commented
4 years ago Please follow Android's implemented solution to add support for srcset and data-large-file img tag attributes
The /read/feed/ and /read/sites/ endpoints return different content sometimes. For some reason one of the differences is that some images have no width attribute in the /read/sites/ endpoint, so what works in the feed doesn't work sometimes in the site view.
To mitigate this, we need to add support for a few new img tag attributes that seem pretty common in WP posts: srcset and data-large-file. These are checked for in a fallback style.
leandroalonso
aforcier
dangermattic
Expected behavior
I expect posts that have a preview image in the feed to also have a preview image when seen in the site view.
Actual behavior
Some posts (usually posts with image blocks) are missing a preview image in the site view.
("An image post" is the same post in both screens.)
As mentioned in the counterpart Android issue (https://github.com/wordpress-mobile/WordPress-Android/issues/12894), the cause seems to be that the
/read/feed/and/read/sites/endpoints return somewhat different content (at least for Jetpack sites), and it seems common for image tags to be missing a width attribute when fetching from the site endpoint - and the width attribute is the primary way both iOS and Android source preview images when no featured image is set.I believe there might also be cases where iOS could source an image in the feed view but isn't - though it generally seems more permissive than Android because the minimum width allowed is much lower - 150 on iOS, 640 on Android.
In any case, I propose we add more ways to extract preview image sources from post content which should help both screens. I've done some work for that on Android which someone might like to replicate for iOS: https://github.com/wordpress-mobile/WordPress-Android/pull/12895.
(Side note copied from Android issue: I think an ideal fix to these issues would actually be server-side; the apps could pass a parameter to the Reader endpoints specifying a minimum image width, and the server would try to pick a suitable preview image URL for each post and include it in the endpoint response.)
Steps to reproduce the behavior
Follow sites with a good variety of posts. Posts with a story block, posts with image blocks (but no featured image set) primarily. I have a few I can share if asked.
For those sites, compare the image previews between iOS and Android, and between the feed view and the site view.
Tested on iPhone 11 Pro (simulator), iOS 13.2.2, WPiOS 15.6 (dev)
Android issue: https://github.com/wordpress-mobile/WordPress-Android/issues/12894