Wp-calypso: Posts: sites don't show image preview in posts list (except Feature Images)

[lancewillett]

Steps to reproduce

1. Start with a Jetpack or WP.com site, make sure it has published posts with at least one image (featured image, image in post content).
2. View the posts list at https://wordpress.com/posts/example.com

What I expected

For the posts list to show an image for each post. In all other WordPress.com environments such as Android and iOS apps an image shows up in the posts list.

What happened instead

No image. :( This makes it both harder to scan and also seems broken since it doesn't match other environments.

See also detailed notes at https://test.wordpress.com/2016/11/16/session-notes-forked-flow-featured-images-images-in-posts-list-network-errors/

Note: featured images do work just fine — this bug report is for posts without a featured image.

Screenshot / Video

visrec (visual record):

My test Jetpack site in Calypso, using Safari 10.0.1 on OS X 10.12.1.

Same site in WordPress macOS desktop app.

Same site in WordPress iOS app, iPad Mini.

Same site in WordPress Android app, Nexus 6P.

Context / Source

journey #context #dogfooding #flowsharing

[lancewillett]

Note: other Jetpack sites I have connected to WP.com also lack images -- it's not just this one.

I debugged a tiny bit in local Calypso, and for this site the post object doesn't have anything for canonical_image (not in the object at all) nor postImages (which is there but undefined). However content_images is populated correctly, but doesn't seem to be used as a fallback.

CC @mtias

[lancewillett]

So maybe something's wrong with populating the postImages for these posts, right? Somewhere it isn't being set correctly, even though the images (and data) are there.

[blowery]

Two things going on here:

1) We no longer look at post.attachments when trying to pick a canonical image because we found it to be wildly unreliable. That's how the images that seemed to come from the body of the post were appearing before.

2) It appears that the lib/posts/post-content-image-store is no longer passed to the post list. I think @rralian did this a while ago to improve performance and prevent the canonical image from switching after images started to load in.

Over in #9728 I moved the pick of the canonical image later in the sync normalization process, which now allows it to look at content images who declare their dimensions. This should help us to feature more images from the body, but it is limited to those we can deduce a dimension for, either from width and height attributes, or matching the image url with a post attachment.

[lancewillett]

More discussion happening in #9728 but the gist is we'll need another way of finding a canonical image that doesn't rely on width and height attributes for images, since they are sometimes stripped by plugins via the_content filters (for things like responsive image handling).

[lancewillett]

Even though #9728 landed I'm still not seeing images in the post list for Jetpack sites, same as originally reported. Do we need to tackle it some other way?

[mtias]

Let's bump this one.

[beaulebens]

When I look at my site, I _do_ see images shown in the post list (for a Jetpack site);

[beaulebens]

I've just verified on 3 different Jetpack sites that I see images in Calypso.

[ebinnion]

I also am seeing images in the posts list for at least two of my Jetpack sites.

[lancewillett]

@beaulebens @ebinnion Can you look if the posts with images have a featured image or not?

We need to narrow down why it's not working for all cases.

[beaulebens]

I've just confirmed that the image appears in the post list when you use a Featured Image, but not with an inline image, or gallery.

[blowery]

The past is hazy, but I think the last time I looked at this, the problem was that none of the images in posts coming from the API had width or height attributes, so we were unable to figure out the size of those images without loading them.

One solution might be to try and pick up image dimensions from other places, possibly attachments, or by parsing out the srcset.

Just a lead though. Been a while since I dove through the selection code.

cc @samouri

[lancewillett]

Testing note from regular blogging in the last few days: this is no longer just my Jetpack connected site. My WordPress.com blogs are also missing images in the posts list. So maybe a regression?

[lancewillett]

This is quite bad still for both WP.com and Jetpack sites, and feels like a major regression. Can we look at a fix soon?

[lancewillett]

Raised the alarm on this one as it's broken for quite some time now, and a significant UX regression for everyone using Calypso ( p4TIVU-5KQ-p2 ).

[rralian]

I've tested this since @blowery merged #11359 and I'm seeing images on the posts-list pages as expected for dotcom and jetpack, seeing them for inline images, galleries, and featured images. I think we can close this out.

[lancewillett]

This seems to be broken again. :/

Opened new issue #12609 with details. But it's the same as here.