Reader should support galleries preview

[sendhil]

Add Gallery preview to reader like on Android:

Just an FYI: in the Android reader, tapping any image zooms into a view like the one Davide proposes above, and you can swipe through all the images in the post.

[sendhil]

Moving to 4.2.

[sendhil]

Moving to 4.3.

[roundhill]

👍 Just noticed that I missed a few photos from a post because I wasn't shown in the list view that it was a gallery.

[apeatling]

Also it should be supported in notifications, when I see a post with a gallery there.

[nbradbury]

Update: Calypso no longer shows a collage, instead it shows thumbnails for any post with > 2 images that meet a min size (not just galleries).

[apeatling]

On the full post view it shows the gallery though, right?

[astralbodies]

@apeatling I believe Calypso still shows the gallery on the post detail view. @nbradbury correct me if I'm wrong.

[nbradbury]

I believe Calypso still shows the gallery on the post detail view.

That's correct.

[astralbodies]

Co-assigning @bummytime to this issue as he's taking on the thumbnail preview support in the reader list.

[astralbodies]

I don't think it's a broken window; @aerych can really confirm that. It is a discrepancy between platforms so there might be a higher priority to achieve parity.

[aerych]

I agree. This isn't as much a broken window as it is the absence of a feature. Gallery support was... challenging... when we were relying on DTCoreText for HTML wrangling, but should be something we can achieve now that we're relying solely on TextKit.

Fwiw, I'd suggest extracting the gallery markup and replacing it with a text attachment place-marking a custom view. Then look at maybe a UICollectionView to display thumbs. I'd also suggest that we avoid trying to reproduce the custom gallery layouts defined by CSS on the web. That is the way of pain and disappointment. We can make our own editorial decisions about how to present content in the native reader.

[alisterscott]

I really notice the lack of gallery support when using WPiOS Reader, so here's a 👍 to getting this done at some point

[apeatling]

Visually, it's a big miss for the apps compared to using the browser.

[folletto]

While I agree it's not a "blocker"; the lack of image galleries support is a really really bad experience, and breaks the intent of the author.

As such... here's a design for the image galleries:

[mattmiklic]

I really like this; my only question is whether there'd be any confusion/disappointment if the reader view worked like this, vs. using the layout the user chose when creating the gallery. I like the horizontal swipe idea to flip between images but wonder if users would be happier with implementing the tile/grid views instead.

The zoomed view is great, totally obvious and clear how zooming images should work. Makes me think that all images should be zoomable, not just ones in a gallery.

[folletto]

I really like this; my only question is whether there'd be any confusion/disappointment if the reader view worked like this, vs. using the layout the user chose when creating the gallery.

It's a possibility. My take here is:

1. It's an incremental step. Right now it's bad. The above would at least make articles with galleries readable.
2. On mobile it's already an issue on what to do with galleries: the layout is often set on desktop, so things like "how many columns" on the super-cramped space on mobile isn't ideal for example. I'd be ok in still keeping a single gallery design in the reader. Would make the experience unified even if it doesn't match the author intent 100%.
3. Reader and author are two different people, so the reader wouldn't "know" how it's supposed to look, they just get a good experience.

Makes me think that all images should be zoomable, not just ones in a gallery.

Possibly, when we refresh the design of the reader we should look into that too.

Currently tapping opens the web page... which... er.... is not ideal.

[nbradbury]

Just an FYI: in the Android reader, tapping any image zooms into a view like the one Davide proposes above, and you can swipe through all the images in the post.

[folletto]

Yep that's good. I'd just go black on Android with that background... but I know, wrong thread. :P
OT: Does it also support swipe up?

[nbradbury]

I'd just go black on Android with that background

I was thinking the same thing when I captured that video.

OT: Does it also support swipe up?

It does not.

[folletto]

black background + swipe up

Should I open an issue then? :D

[nbradbury]

Black background definitely, but I'm not sure about swipe up. That's more of an iOS pattern, isn't it?

[folletto]

That's more of an iOS pattern, isn't it?

Not iOS. It's a generic pattern that is emerging on multiple services across platforms. I think it's still mixed if it's swipe-up or swipe-down tho. I need to check...

Update: I think I got it wrong in the mock, it's swipe down (at least on Facebook).

[folletto]

I did a benchmark:

• Facebook (iOS): swipe down
• Facebook (Android): swipe down
• Tumblr (iOS): swipe down AND up
• Tumblr (Android): swipe down AND up
• iOS Photos: swipe down
• Google Photos (iOS): swipe down AND up
• Google Photos (Android): swipe down AND up

So either both up and down, or just down.

[aerych]

Currently tapping opens the web page... which... er.... is not ideal.

The current behavior should be that tapping the image zooms an image unless that image was wrapped in a link. If that was the case then tapping the image opens the web page that was linked to. @folletto do you have an example post / image you could share so we can double check what was happening?

[folletto]

That makes sense – I guess the issue then is that images tend to be inserted already linked... to the image itself. In WP Admin I think preserves the latest action (i.e. if it was changed to linked, it will be linked?).

That's probably a state we need to be able to detect?

[autojeff]

@folletto For gallery do you think we should use a constant height so they're all the same or determine a different way of giving the gallery a height? If constant, any opinions on that what height should be?

Also what would you expect the behavior to be after the the first one? Would you want it similar to your design above where you could see a little bit sticking out on the left?

[folletto]

Good question.

Here's an approach:

1. Keep proportion rate fixed for all images.
2. Fill as much as possible the width (minus margins), height gets whichever gets by keeping the proportions.
3. However, there's a max height: visible screen height (i.e. screen minus toolbars), so if an image is taller than that, its width then gets reduced
4. The whole gallery gets the height of the tallest image

Makes sense?

[autojeff]

Yup that makes sense, I'll see what I can do!

[dangermattic]

Thanks for reporting! 👍