Reading/Multimedia/Media Viewer



This is the project hub for Media Viewer, a new tool under development by Wikimedia Foundation's mm>Special:MyLanguage/Multimedia|new multimedia team. For a quick overview of this project, visit aboutmv>mw:Multimedia/About_Media_Viewer|'About Media Viewer'.

This new multimedia browser displays images in larger size on Wikipedia and Wikimedia sites, where it is being gradually as the default viewing experience, as described in release-plan>Multimedia/Media_Viewer/Release_Plan|this release plan.

Media Viewer has been tested extensively on many large wikis around the world, and the feedback collected from thousands of users suggests that this tool is generally useful to them, as outlined in these survey results.

We invite you to about>Special:MyLanguage/Multimedia/About_Media_Viewer#How_can_I_help.3F|test Media Viewer as well: you can learn more media-viewer>Special:MyLanguage/Help:Multimedia/Media_Viewer|in this help page. After you've tried the tool, we invite you to let us know what you think and join the discussion. To participate in future discussions and keep up with our work, mail>mail:multimedia|subscribe to our multimedia mailing list.

Purpose
The purpose of this tool is to:
 * Provide a richer multimedia experience, to match user expectations
 * Display images in larger size, on the same page as the thumbnail you click on
 * Reduce confusion when users click on thumbnails (bypass duplicate file info page on Wikipedias)

It aims to serve all users of Wikipedia, Commons and other MediaWiki sites. Note that this media viewer now only supports still images, but we plan to support other file formats such as video, audio and slides in the next version.

Minimum Viable Product
Features for the minimum viable product include:
 * Show images in larger, media viewer panel when you click on them
 * Modal panel opens up as overlay (on same page where you clicked)
 * Large image appears without clutter, for a more immersive experience
 * Information about the image can be accessed easily
 * Images can be shown in full-screen mode
 * Images in a collection can be browsed easily

Workflow
The thumbnails to the right show the reader workflow we are looking to support:
 * Overview of reader workflows (shown above for reference)
 * Proposed workflow for viewing images with Media Viewer

Lightbox View




Media Viewer provides two different views of an image when you click on its thumbnail on an article page: Lightbox and Full-screen View. The 'Lightbox view' for this tool is described below.

Image
The image is shown in large size against a black background, as an overlay that fills up the entire browser page where you clicked on the thumbnail. This makes the image stand out more and removes some of the visual clutter typically found on a text-heavy page.

In the image view, the browser window will be obscured to hide its contents, but not the entire screen (unlike the Full-screen view where the entire screen will be darkened).

Tools
In this v0.2 release, these tools are provided:
 * Close button (goes back to article view)
 * Full screen button (expands into full-screen view)
 * [https://mingle.corp.wikimedia.org/projects/multimedia/cards/63 Next and Previous arrows] (to browse through related images)

Primary Info
Here are the most important information fields that will be shown prominently near the image, as shown in the first version of this tool (see mockup):
 * [https://mingle.corp.wikimedia.org/projects/multimedia/cards/31 File name] (Zonotrichia atricapilla)
 * [https://mingle.corp.wikimedia.org/projects/multimedia/cards/40 Author] (e.g. Alejandro Erickson)
 * [https://mingle.corp.wikimedia.org/projects/multimedia/cards/40 Source] (e.g. Bird Institute)
 * [https://mingle.corp.wikimedia.org/projects/multimedia/cards/34 License Info] (e.g. CC-BY-SA-2.0) (or link to license info)
 * Chevron icon for opening the metadata panel to reveal more info (see below)

The first mockup to the right shows how this information would be presented to the user, to minimize clutter near the image, but still keep important metadata as prominent as possible. Please click on the specific features above to see the latest mockups and specifications.

Secondary Info
Here is the information that is shown below the fold, once you open the metadata panel (by clicking on the chevron or scrolling):
 * [<tvar|url1>https://mingle.corp.wikimedia.org/projects/multimedia/cards/33</> Description]
 * [<tvar|url2>https://mingle.corp.wikimedia.org/projects/multimedia/cards/30</> Site name and link] (e.g. 'Learn more on Wikimedia Commons')
 * [<tvar|url3>https://mingle.corp.wikimedia.org/projects/multimedia/cards/32</> Uploader name] (e.g. Smallbones)
 * [<tvar|url4>https://mingle.corp.wikimedia.org/projects/multimedia/cards/47</> Creation Date] (e.g. 12 April, 2012)
 * [<tvar|url5>https://mingle.corp.wikimedia.org/projects/multimedia/cards/42</> Location] (e.g. place name and/or geotag coordinates, if any)
 * [<tvar|url6>https://mingle.corp.wikimedia.org/projects/multimedia/cards/41</> Categories] (e.g. Birds of British Columbia, Zonotrichia atricapilla … more> )
 * [<tvar|url7>https://mingle.corp.wikimedia.org/projects/multimedia/cards/44</> File usage] (e.g. 'This file is being used by 5 other pages. <See all>')
 * [<tvar|url8>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/118</> Permissions] (e.g. special credits or restrictions)
 * [<tvar|url9>https://mingle.corp.wikimedia.org/projects/multimedia/cards/45</> Assessment credit] (e.g. '<Featured Picture>')
 * More meta-data may be added to this panel over time, as proposed below
 * File format / size (e.g. JPEG, 4928 x 3264 px (more), 3.8 Mb)
 * Tool used for upload (e.g. 'Via Flickr')

The second mockup to the right shows how this information would be presented to the user, to minimize clutter near the image, but still keep important metadata as prominent as possible. Please click on the specific features above to see the latest mockups and specifications.

Full-screen View


The 'full-screen view' for this tool will show a large image across the entire screen, with minimal information and buttons available on hover. This is the view that lets you focus exclusively on the image, with no other distractions.

Full image
When you click on the full screen icon, you see the largest version of the image that fits within the user's entire screen (not just the browser window).

Information
In this mode, you only see the controls, the file name and the author/source/license if you hover over the image.

If desired by users, it may be possible to include more information below the image, available by scrolling down.

New Tools




We are now working on these new tools and features for version v0.2:
 * [<tvar|url1>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/147</> Use/share this file] (screenshot)
 * [<tvar|url2>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/148</> Embed this file] (screenshot)
 * [<tvar|url3>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/79</> Download this file] (screenshot)
 * [<tvar|url4>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/199</> Access Media Viewer on Commons]

We're also working on a range of other features such as faster image load and better user interface. We invite you to test and discuss features in development, so we can improve them based on your feedback. Please join this discussion about Media Viewer, where new features are regularly listed. We would love it if you could try the ones labeled ‘ready for testing’. You can also review our specifications for features that are ‘coming soon’ — and hope you can help test them as well later this month (we release new code every Thursday).

Current Release
Media Viewer 0.2 is being gradually released worldwide. This deployment started with limited tests on a few pilot sites in April 2014, then wider releases in May 2014. Media Viewer is now scheduled to be released on all wikis by mid-June, as described in release-plan>Multimedia/Media_Viewer/Release_Plan</>|this release plan.

To prepare for this release, we invite you to test the latest version lbdemo>Special:MyLanguage/Lightbox demo</>|on this demo page on MediaWiki.org or on your home wiki. If your site has not yet enabled Media Viewer by default, you can enable it as a Beta feature beta-prefs>Special:Preferences#mw-prefsection-betafeatures</>|in your preferences), as outlined in the next section. Learn more media-viewer>Special:MyLanguage/Help:Multimedia/Media_Viewer</>|in this help page.

How can I help?


Can you help test Media Viewer in coming days? You can try the latest version on lbdemo>Special:MyLanguage/Lightbox demo</>|this demo page on MediaWiki.org, or test earlier versions on your home wiki.

If Media Viewer has not yet been enabled by default on your wiki, you can test it as a Beta Feature: click on the small 'Beta' link next to 'Preferences' in your personal menu. Then check the box next to 'Media Viewer' in the beta-prefs>Special:Preferences#mw-prefsection-betafeatures</>|Beta Features section of your user preferences — and click 'Save' (see screenshot). You can turn off any this option anytime, by reversing these steps. Learn more media-viewer>Special:MyLanguage/Help:Multimedia/Media_Viewer#How_can_I_try_Media_Viewer.3F</>|in this help page.

After you've tried Media Viewer, please let us know what you think on discussion>Talk:Multimedia/About_Media_Viewer</>|this discussion page. If you find any technical bugs, please [<tvar|bugzilla>//bugzilla.wikimedia.org/enter_bug.cgi?product=MediaWiki%20extensions&component=MultimediaViewer</> report them here on Bugzilla].

Try out Media Viewer and let us know what you think on talkmv>Talk:Multimedia/About_Media_Viewer</>|this discussion page. If you find any technical bugs, please [<tvar|bzillaurl>//bugzilla.wikimedia.org/enter_bug.cgi?product=MediaWiki%20extensions&component=MultimediaViewer</> report them here on Bugzilla].

Tens of thousands of beta testers have now tried Media Viewer around the world. Here is an media-viewer>Special:MyLanguage/Multimedia/Media_Viewer#Feedback</>|overview of the feedback they have kindly given us to help improve this tool. Many of their suggestions have been implemented (or are about to), as part of our [<tvar|plan-url>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/grid?aggregate_property%5Bcolumn%5D=story+points&aggregate_property%5Brow%5D=story+points&aggregate_type%5Bcolumn%5D=sum&aggregate_type%5Brow%5D=sum&color_by=type&filters%5B%5D=%5BType%5D%5Bis%5D%5BStory%5D&filters%5B%5D=%5BType%5D%5Bis%5D%5BBug%5D&filters%5B%5D=%5BType%5D%5Bis%5D%5BTech+debt%5D&filters%5B%5D=%5BType%5D%5Bis%5D%5BScope+Increase+%28UNPLANNED%29%5D&filters%5B%5D=%5BCycle%5D%5Bis%5D%5B%28Current+cycle%29%5D&filters%5B%5D=%5BCycle%5D%5Bis%5D%5B%5D&filters%5B%5D=%5BSprint%5D%5Bis%5D%5B%5D&group_by%5Blane%5D=priority&group_by%5Brow%5D=status&lanes=Must+have%2CShould+have%2CCould+have&style=grid&tab=Current+cycle</> current release plan].

Note: in this current release, the Media Viewer will only support the most widely used image file formats (e.g.: JPEG, GIF, PNG, TIFF, SVG). In future releases, we plan to add support for more file formats, such as PDF, audio and video files. See the next section.

Next Versions


The next version 0.3 of Media Viewer will focus on zooming on large images and adding more features requested by our community. And version 0.4 will support more file formats (e.g. slides, video, audio). For an overview of what we're considering for these future versions, check our vision2016>commons:Commons:Multimedia_Features/Vision_2016</>|2016 multimedia vision, as well as our annual plan for multimedia in 2014-15.

Here are some features we are considering for future versions:
 * [<tvar|url1>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/167</> Zoom on this file]
 * [<tvar|url2>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/172</> Show file collection panel]
 * [<tvar|url3>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/161</> View files in slideshow mode]
 * [<tvar|url4>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/160</> Show PDF slides]
 * [<tvar|url5>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/162</> Play Video files]
 * [<tvar|url6>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/163</> Play Audio files]
 * [<tvar|url7>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/167</> Support Developer Plugins]
 * [<tvar|url8>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/201</> Mobile Version of Media Viewer]

A consistent user interface will be provided for time-based and audio-video playback tools above (play/pause, rewind, volume, timeline). In future versions, we plan to provide more feedback tools below the image (e.g. thank, flag), as suggested by [<tvar|bp-othermedia>https://docs.google.com/a/wikimedia.org/presentation/d/1wZvLx_Q-bpCCMBjz2Y643uyye1RvYgAaaYFq02lDgxU/edit</> best practices from other media sites]. We will also start working on mobile versions of the Media Viewer, in collaboration with the mobile team.

Desktop Mockups
Here are some preliminary mockups of designs we're exploring for desktop computers.

These mockups will be adjusted based on community feedback.

Mobile Mockups
Here are some preliminary mockups of designs we're exploring for mobile devices.

We will update mobile specifications on [<tvar|url>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards/201</> this Mingle card] in coming weeks. This work would be done in collaboration with our mobile team. These new versions will not be available until later this year, but you can test version v0.2 right away, as described above. Enjoy!

Future releases
For future releases beyond this fiscal year, we are considering these features:
 * Watchlist (add this file to your watchlist)
 * Thanks (send notification to uploader to show appreciation, through notifications)
 * Flag (reports this file as inappropriate on Commons)
 * Tag (tag this file with a new category, geolocation or intersecting tags)
 * Related files button (show thumbnails of files in same gallery/category)
 * Add Category button (for categorizing files in Media Viewer)
 * Discussion button? (goes to Commons talk page)
 * Edit button? (goes to Commons edit page)

These tools would help users take action on the media they are viewing. For example, a user might want to add a file to their watchlist, or thank the person who uploaded the file, flag a file as inappropriate, tag it with a new category, etc. These tools could be offered in a toolbar below the image, or further down in the metadata panel.

Feedback
Here is some of the feedback we have received about Media Viewer since its deployment in early November. We have already implemented or are working on many of these recommendations (see Tasks below) and will update this section again based on feedback received after the global deployment of Media Viewer 2.0.

Favorable Responses

 * Very clean and useful! (Kelvinsong)


 * [Glad you're working on] a better media viewer. (Amada44)


 * I is nice I can enlarge thumbnails wihtout having to go to another page. (Arcane21, Cornel24)


 * I like that I can see all the most relevant information about the image in 1 page only and the graphic display. (Daniele Pugliesi)

Recommendations for improvement

 * Performance
 * Really slow -- slower than loading the file page. (Mono, Arcane21, Ragesoss, Another Believer, Daniele Pugliesi, Cornel24, Holger1959)


 * Style and layout
 * The transparent background against the file information is distracting. I would prefer that the text have an opaque background -- preferably darker. (Ragesoss, Another Believer, equazcion, Daniele Pugliesi, Cornel24, Kelvinsong, Daniele Pugliesi)
 * 'Use This File' popup could be prettier. (Kelvinsong)
 * Smiley face in front of 'Uploaded by' is confusing, should use an arrow instead (Ainali, Daniele Pugliesi)
 * I expected the closing X on the top right position, not left (Barcex, Raymond, Gryllida)
 * Image size
 * 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.)
 * Quicklinks to other image sizes are a must. (MarkJurgens, Daniele Pugliesi, Elitre)
 * I'd make the initial view/popup show a larger image size. (MarkJurgens, Daniele Pugliesi, Frank Schulenburg)
 * The file information should be balanced centrally with the image, instead of jutting to the left. (Ragesoss)
 * Add more clearly visible link to file info. (Gryllida)


 * Text, interface, content
 * Integrate 'Use this File' link -- to attribute files correctly, with a quick summary of author, source and license. (Amada44, Elitre, Church of emacs, Rsocol)
 * "Use this file" menu should have the option to "copy to clipboard" to be used together with the VisualEditor. (Micru)
 * Add left and right arrows to navigate to other media in the article. (Micru, Daniele Pugliesi)
 * It could be nice to see a slideshow of the images in the same Commons category or in the same Wikipedia page. (Daniele Pugliesi)
 * 'Created by' date above the uploader name is confusing for old images (Ainali)


 * Bugs
 * Each field has its own issues mostly due large variety of Commons:Infoboxes and how they are used. Here are detailed recommendations for each (Jarekt, Elitre)
 * Support for multiple page documents (Djvu, PDF, PPT, etc). (Micru, Gryllida)


 * Simply adjust the settings in preferences (appearance / file) for quick viewing … for a result better and faster than what is proposed by this beta. (Archaeodontosaurus)

Based on this feedback, development tasks for Media Viewer are regularly added to the Multimedia team's [<tvar|url>https://wikimedia.mingle.thoughtworks.com/projects/multimedia/cards?favorite_id=11322&view=Media+Viewer+-+All+Releases</> Mingle project management site].

Code
Our work in progress can be viewed [<tvar|lbdemo>http://en.wikipedia.beta.wmflabs.org/wiki/Lightbox_demo</> on this beta site], where new features are rolled out all the time (you'll need to create a test account to log-in and use the Beta Features preference, as described in the 'How can I help' section above.)

The code for Media Viewer is made possible by two separate extensions:
 * ext-mmv>Special:MyLanguage/Extension:MultimediaViewer</>|Multimedia Viewer Extension - the front-end extension that displays media files and information
 * ext-commonsmd>Special:MyLanguage/Extension:CommonsMetadata</>|Commons Meta Data - the back-end API that serves information to the Media Viewer

More Info
For a shorter description of this tool, visit this aboutmv>Special:MyLanguage/Multimedia/About Media Viewer</>|project overview page.

This feature was designed in collaboration with community members like you, through a series of discussions held over round2>m:Roundtables/Roundtable_5</>|video conferences, irc>m:Special:MyLanguage/IRC_office_hours/Office_hours_2013-07-18b</>|IRC, and round3>m:Roundtables/Roundtable_3</>|in person at Wikimania.

Media Viewer was brought to you by many Wikimedia Foundation team members, including: <tvar|users1>Fabrice Florin, Gilles Dubuc, Mark Holmquist, Gergő Tisza, Pau Giner, Jared Zimmerman, May Galloway, Brian Wolff, Bryan Davis, Keegan Peterzell, Rob Lanphier, Erik Moeller, Howie Fung</> and <tvar|users2>Tomasz Finc,</> to name but a few.

To learn more about other multimedia projects we're working on, visit this mm>Special:MyLanguage/Multimedia</>|Multimedia project hub.