Page MenuHomePhabricator

Full Zoom Feature in Media Viewer
Open, LowestPublic

Description

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

Narrative

As a user, I want to be able to zoom on large image files in Media Viewer, so I can see the details in a variety of sizes.

Note: This is a proposal for the full version of this feature, which requires a lot of development time. For a simpler linkversion that could be implemented sooner, check out T77423.

Acceptance Criteria

We would like to enable zooming in the Media Viewer, for large images (and/or extra wide or tall mediafiles), with features like:

  • Zoom button (magnifying glass with plus sign) is present when the zoom level is 100%, and allows to increase the zoom level.
  • At 100% zoom level, when the user hovers the zoom icon, an overview thumbnail (navigation pane) appears with the zoom controls.
  • When the image is zoomed, the overview thumbnail becomes fixed (is visible and permanently shown regardless of the cursor position).
  • The overview thumbnail indicates which area of the image is being shown, and allows the user to move the active area.
  • the overview thumbnail allows the user to zoom-in ( + ), zoom-out ( - ) and reset the zoom level (an expand button that appears on a corner of the thumbnail when the user hovers it).
  • When the image is zoomed, users are able to pan it. A grabbing cursor (or move cursor on those browsers not supporting the grab cursor) will be used over the image.
  • Shortcuts for zoom will be provided to avoid clicking and repositioning: shift+scroll and "+" and "-" keys will increase/decrease the zoom level centering the zoom area to the current mouse position. In addition, regular scroll can be considered to trigger zoom if it happens over the zoom control or the thumbnail overview.
  • You can select several levels of zoom, depending on the size of the original (2x, 3x, 5x, 10x?)
  • By default, wide media files are scaled vertically to 2/3 (if resolution allows), and the zoom mode is auto-enabled.
  • By default, tall media files are scaled horizontally to 2/3 (if resolution allows), and the zoom mode is auto-enabled.

See also community requests and related bugs below.More specifics will be addedlater in the Notes section below.

Note that this tool is a major development effort, which is likely to take weeks to build. Since we don't have the capacity to develop it in coming months, we are considering this much simpler interim proposal: #504 Basic Zoom.

Also note that Commons already has a nice here in Commons preferences .

Design notes

A prototype is available to illustrate most of the aspects described above.

media-viewer-zoom.png (458×622 px, 509 KB)

See preliminarymockups below, fromPau's original design exploration forextreme media sizes, which describes how the zoom mode could work, and howto adjust small, tall, and wide images. Note that the early prototypes were presenting the zoom icon disconnected from the navigation pane, just ignore that part.

Screen_Shot_2014-02-06_at_1.42.51_PM.png (474×721 px, 426 KB)

Screen_Shot_2014-02-06_at_1.43.20_PM.png (481×721 px, 32 KB)

Community Requests

Media Vision Talk Page # 1:

Any possibility of a "magnifying glass" tool that allows you to see a portion of an image at full resolution? (Should be entirely feasible, I've built things like this, though it would take some tricky tuning to make it work acceptably in such an open-ended environment. Still, bandwidths are going up...) - talk 00:53, 10 January 2014

Other community feedback :

Zooming would be useful. There is no obvious interface for getting to a larger version or the original media file. (FocalPoint, Daniele Pugliesi, Michael Z.)

About Media Viewer

Read more on MediaWiki product page .

Related Bugs

Event Timeline

MingleTerminator raised the priority of this task from to Medium.Dec 8 2014, 4:26 PM
In mingle on 2014-02-07 at 13:50:51, @Pginer-WMF wrote:

Need zoom icon, drag cursor icon and navigation panel assets.

In mingle on 2014-02-07 at 13:51:35, @Pginer-WMF wrote:

Need clarifications on how to support multiple zoom levels, how to zoom back and get out of zoom mode.

In mingle on 2014-02-10 at 15:45:23, @Gilles wrote:

What lets the user zoom in and out? On touch devices we can use the pinch gesture, but on desktop the scrollwheel is already captured by the browser and we need it for revealing/hiding the metadata panel.

The mockup suggests a single magnifier icon, which presumably could be clicked to cycle through predetermined zoom levels, but if there are many levels I think that two icons would be more appropriate, for zooming in and out. "To get out of zoom mode, click on the Zoom button again" definitely doesn't sound like that button was intended for zoom level anyway.

Since on the technical side of things we will need to load higher resolution images as the person zooms in, it would be nice to have that progress reflected in the UI (eg. 1-pixel tall discreet progress bar). Otherwise the user might give up before the details are loaded.

In mingle on 2014-02-11 at 00:42:22, @Tgr wrote:

Commons has a decent zoom viewer as an external tool (see the little zoom links below the image, e.g. https://commons.wikimedia.org/wiki/File:Bryce_Amphitheater_from_Sunrise_Point_Highres_2013.jpg )

Do we want something similar? (That is, do we want to be able to zoom into insanely huge images?) That is a very complex technical task, and we probably shouldn't try to reinvent the wheel.

In mingle on 2014-02-12 at 17:11:33, @Fabrice_Florin wrote:

Thanks, Gergo. I added a note about the ZoomViewer gadget in the card itself, as well as contacted its author, Daniel Schwen, to seek his advice about this feature.

Here is his email response:

"Quick comment on the mingle: Georgo said something about not reinventing the wheel. I agree. Opensource solutions exist to do all the work. VIPS (which, as I understand is either already in use or about to be used for scaling images) to generate the multi resolution pyramid data for zooming and IIP for the front- and backend (serving tiles and UI).
With that it was super easy to get the zoomviewer up and running in a master of hours."

In mingle on 2014-02-27 at 16:18:28, @Pginer-WMF wrote:

I have created a mockup with some ideas for zoom support: http://pauginer.github.io/prototypes/media-viewer/desk/mm-zoom2.html

Mass-removing the Multimedia tag from MediaViewer tasks, as this is now being worked on by the Reading department, not Editing's Multimedia team.

Tgr set Security to None.
Jdlrobson lowered the priority of this task from Medium to Lowest.Dec 17 2015, 9:06 PM
Jdlrobson added a subscriber: Jdlrobson.