Page MenuHomePhabricator

Media Viewer Link on file pages
Closed, ResolvedPublic

Description

Migrated from: https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/199

Narrative

As a user, I want the option to view files in Media Viewer directly from the file page, so that I can browse them in larger size.

Acceptance Criteria

We recommend adding anew 'Media Viewer' linkon file pages, so users can view them in a more immersive user experience.

This feature is particularly needed because the 'Share this file' links ( #147 ) will open the Media Viewer over file info pages: if a user clicks on a 'Share this file' link, then closes the Media Viewer, they would have no way to get back to the Media Viewer from the file info page. Unless we build this feature ...

This feature includes these elements:

  • ‘View expanded’ link (text linkbelow the image, after the 'Original image size' link)
  • A Media Viewer icon would precede the text link and make it more visible, as well as more inviting
  • The Media Viewer opens when you click on the link(with the current file selected)
  • The link URL would be the same as Share this file' link ( #147 ) (something like: commons.org/sunrise.jpg#mediaviewer)
  • Anyone can open that link, even if they are not logged in or do not have Beta Features turned on.

<u>Note</u>: Another option worthconsidering for the future would be to use the image as the target to go to the Media Viewer, with a secondary action that would go directly to the original image: an icon for this secondary action would appear on hover, as shown in this mockup .

We are now discussing this option with our community as a possible alternative, as outlined in this ticket:

  • #463 Click on Commons Files to open Media Viewer

Design Notes / Mockups

Here is a mockup showing the 'View expanded' button. This mockup is also posted here on Commons .

Media-Viewer-Link-Commons-Expand-Image-B.png (860×1 px, 964 KB)

Related Changesets

https://gerrit.wikimedia.org/r/124750

Related Stories

#463 Click on Commons Files to open Media Viewer​

#8 Media Viewer Front-end

#147 Share this file

Event Timeline

MingleTerminator raised the priority of this task from to High.
MingleTerminator added a project: Multimedia.
In mingle on 2014-02-07 at 13:53:05, @Pginer-WMF wrote:

It could benefit from a small ‘media viewer’ icon. We need to think how to present the feature so that connects with the user goals (avoiding internal terms such as "Media Viewer" if possible)

In mingle on 2014-02-10 at 21:06:40, @Tgr wrote:

A somewhat related problem is that there is no way to know whether a click on a given image will open MediaViewer or not. Maybe MV could have its own icon (any eye, a magnifying glass or something like that) and that could be used consistently: on hover, below the thumbnail (where we have that weird TV screen icon thingy now that nobody ever recognizes or uses), on the description page... possibly even after some text-only links on description pages, see e.g. https://bugzilla.wikimedia.org/show_bug.cgi?id=61085

In mingle on 2014-02-10 at 21:11:43, @Tgr wrote:

Using the description page as a starting point to browse to other images uploaded at the same time is IMO very obscure, cumbersome to implement, and I'm not sure there is any real need for it. Browsing images according to some existing special pages (new images, images uploaded by the same user, recently uploaded images filtered by tag) would be useful, but doing that on the special page would be both more obvious and easier to implement.

In mingle on 2014-03-03 at 17:23:11, @Pginer-WMF wrote:

I would present this as a simple "expand" action: http://i.imgur.com/JC5DZ59.png
(on smaller windows, the icon can flow below the image, but in most cases it will be in the top-right corner, consistent with the media viewer designs).

An alternative, if we want to place it below the current metadata: http://i.imgur.com/zcIYubG.png

In mingle on 2014-03-04 at 01:02:02, @Fabrice_Florin wrote:

I recommend we go with the second mockup (B?), which is shown more prominently below the image, where I am more likely to see it. I also like that is labeled (‘View expanded’) and that the icon ties it in with the image we have been using in connection with the Media Viewer (is it becoming the project ‘logo’?). In the first mockup (A?) I did not notice the little ‘enlarge' icon with no label in the image’s upper right column, because the Commons page is already so cluttered, nothing stands out there anymore. So while that might be a fall-back if the community objects to the more prominent treatment, it would probably not address the use case originally proposed in the Mingle card (help users who close Media Viewer enlarge the image again).

In mingle on 2014-03-07 at 16:32:54, @Pginer-WMF wrote:

Based on user behaviour trying to click on the image to go to the media viewer, I would consider to use the image as he target to go to the Media Viewer with a secondary action to go directly for the image (which will appear on hover): http://i.imgur.com/DEeNhvt.png

If that is problematic or not feasible, I'm fine with the "view expanded" button.

In mingle on 2014-04-04 at 23:15:35, @Tgr wrote:

Needs icon.

In mingle on 2014-04-08 at 21:31:29, @MarkTraceur wrote:

https://gerrit.wikimedia.org/r/124750 still needs icon.

Specifically: A 29x24 SVG icon that meets the mockup's requirements.

Pau, you can add it directly to the patchset if you want.

In mingle on 2014-04-09 at 10:51:23, @Pginer-WMF wrote:

I added it to the parchset.
Some additional comments:

  • I checked that the dimensions you mentioned represent the whole space for the image inside the button, so I left some additional space around the image to make it fit properly.
  • I made a RTL version of the image which is available at https://dl.dropboxusercontent.com/u/30377416/design/expand-rtl.svg . I tried to rename the image sin the patchset but those were no longer appearing (not sure what else CSSJanus nees).
  • The expand button is supposed to be a mw-ui-button, so we can use the class and avoid re-styling it again here.
In mingle on 2014-04-09 at 10:53:19, @Pginer-WMF wrote:

Removing the "design" tag. Please, add it if anything else is needed.

In mingle on 2014-04-10 at 07:45:50, @Gilles wrote:

Moving this back to development, doesn't work when logged out on beta: http://en.wikipedia.beta.wmflabs.org/wiki/File:Snowman.JPG

I think this is because logged out will only react to hash urls, and thus the code you've introduced in bootstrap to add the link to the page won't run on pageload when logged out.

In mingle on 2014-04-10 at 07:50:16, @Gilles wrote:

Nevermind, it just appeared... the i18n doesn't work, though?

In mingle on 2014-04-10 at 11:41:42, @Gilles wrote:

Could be an issue with the ongoing i18n cache snafu, I've replied to the relevant mailing list thread about it.

In mingle on 2014-04-10 at 16:13:03, @Gilles wrote:

I got confirmation that this is the i18n job failing, nothing to do with the commit.