Responsive UI for embedded mode (was 'Cover page')

[edsilv]

Provide a "cover page" view when embedded. Similar to current lightbox mode (can these be merged?) but with extra title, description, logo, and license.

Mock up: https://docs.google.com/presentation/d/1oKKfd1mp206aRDvuL-YtkvpGj8_cxLQT9jmyCwpcZKM/edit?usp=sharing

[mialondon]

@edsilv do you have a link for lightbox mode?

[mialondon]

NB: to avoid confusion with PDF cover pages (a separate BL discussion) - this is about what the user sees when an embedded item loads in an external site. e.g. http://www.independent.co.uk/arts-entertainment/books/news/harris-list-of-covent-garden-ladies-georgian-guide-to-london-sex-workers-acquired-by-wellcome-10047395.html and https://github.com/UniversalViewer/universalviewer/wiki/Examples-of-Use

[edsilv]

http://www.wellcomeimageawards.org/2016/ebola-virus

[mialondon]

This seems best described as 'responsive view' as it's about the viewing experience in limited width contexts, whether mobile or embedded on narrow sites.

Some questions for @jennpb @davidwaldock above!

Are the fields suggested in this view - item title, description, attribution/licence, logo - sufficient for organisations?

What happens when the user clicks 'view'?

Can the user close/hide and open/view the metadata overlay? If so, what do the controls look like?

[jennpb]

I'm not sure I understand where/when this will be used? @edsilv does this mean that when the UV is embedded elsewhere, you see only the cover? We often embed to a specific page... Or is this an alternative embed?

[edsilv]

I think it's best to think of this as purely a responsive UI enhancement. When below a certain width, the UV switches to a simplified view (as per mockup). This minWidthBreakPoint value is already configurable (current 610px by default). In many cases, when embedded on external sites there won't be enough room to fit in the side panels and extra UI comfortably, so this "cover page" UI will appear. This is better for mobile and narrow blog columns.

Regarding embedding to a specific page, canvases can have a thumbnail associated with them (we're using the manifest's thumbnail for the "cover image"). Perhaps if that is supplied we use it, otherwise default to the manifest's thumbnail? @tomcrane

[jennpb]

I'm not objecting to this, I'm just trying to understand how it would affect use cases Wellcome sees.

So if we'd embedded the UV to a specific page on the blog, but a user is reading the blog post on their phone, would it fall back to the cover page? Or would it still retain the canvas that was explicitly embedded?

[tomcrane]

Wouldn't the existing options still be available for external embed - so you could still specify the canvas index (or @id) just as you do now? That is, it's still up to the embedder what the start page is? That doesn't change.

As a writer of a blog post, I want to embed a digitised object. I want to draw the reader's attention to a particular page, so I need to "embed the book open at that page", or focused on a particular area.

The UV supports this currently, but it looks cluttered at small column widths. The design in the linked Google slides shows a simplified rendering to solve this problem.

The question is, I think - does it still look like that slide if I specifically embedded page 7 of Wunder der Vererbung instead of the cover page? Or does the responsive mode always use the first canvas/manifest thumbnail/startCanvas property?

I don't see a reason why it needs to use the front page / startCanvas, it's can create the image from the IIIF service regardless of which canvas has been specified. There's no guarantee that the first image is better as a "poster image" for this mode than the embedding user's specifically chosen image.

That is, there's no behaviour difference at all, just a rendering difference to make it look better when embedded.

[edsilv]

Makes sense. All we're doing is hiding the header, footer, left, and right panels, and adding an overlaid logo and details panel. I suppose we could hide the OSD controls too and disable zoom.

If the user is on a mobile device and clicking "view" to open fullscreen does not result in the UV being wider than the breakpoint, we could force exiting "responsive view".

[mialondon]

@jennpb 'cover page' is a confusing term - the design doesn't affect which part of the item is shown, just how much other stuff is around it.

And as discussed with @edsilv today, if you're on a small screen size for whatever reason (on a mobile device or the item is embedded on a narrow page), you get the less cluttered view on load, but when you start to interact with it, you'll get the navigation controls and indications of other panels.

(Ed, thinking it over just going full screen won't work because how would someone know that going full screen would make the controls available?)

[jennpb]

@mialondon that sounds ok then! I've always wanted a less cluttered view.

[edsilv]

@mialondon The 'view' button is a substitute for full screen in responsive view and has the same effect. This is the interaction that makes all the other panels visible. It's exactly like clicking on the image when in lightbox mode.

[edsilv]

@jennpb if you wanted to force "responsive view" for the Wellcome Library site for example, you would set the minWidthBreakPoint to a larger number. Then the only way you'd get all the other panels is by clicking on 'view' to see it full screen.

[mialondon]

@tomcrane from the user's POV, you should be able to specify the image/page that appears by default when something is embedded. @edsilv is that currently provided for in the embed function/responsive view?

[edsilv]

@mialondon I think the idea is that embedding continues to work exactly as it does now, in that you can specify which page to start on. However, the top, left, right, and bottom panels are disabled, and new UI is overlaid with a title, description, view button.

[davidxcrowe]

How is the the image specified?

Note, if no page is specified by whatever mechanism, it should use the following fall-back:

1. Thumbnail in manifest
2. startCanvas of the specified sequence
3. first canvas of the specified sequence
4. startCanvas the default sequence
5. first canvas of the default sequence

On 27 July 2016 at 11:39, Edward Silverton notifications@github.com wrote:

@mialondon https://github.com/mialondon I think the idea is that embedding continues to work exactly as it does now, in that you can specify which page to start on. However, the top, left, right, and bottom panels are disabled, and new UI is overlaid with a title, description, view button.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/UniversalViewer/universalviewer/issues/334#issuecomment-235549969, or mute the thread https://github.com/notifications/unsubscribe-auth/AEn-kf3Rbmt7Neaoul3MabwOoTv6yo-Yks5qZzV6gaJpZM4JCXKj .

[mialondon]

Here's a nice example of a book embedded in an article: http://publicdomainreview.org/collections/a-dictionary-of-victorian-slang-1909/

[LlGC-szw]

All issues will be triaged for further investigation or closure by the 28 September 2023. If your issue is still relevant and would like for it be investigated further please comment by 14 September 2023.

[mialondon]

I'm not sure if this one is still relevant.

[demiankatz]

I'm pretty sure this is already done, since UV now supports a responsive mode. But I'll mark it as ACTIVE so we can confirm this with @edsilv and close as needed.