Extension:Media Viewer/About/en



Media Viewer aims to improve the multimedia viewing experience on Wikipedia, Commons and MediaWiki sites, to display images in larger size and with less clutter. It is being developed by the Wikimedia Foundation's new multimedia team and now has a first beta version ready for testing, as part of our new Beta Features program.

You can now test beta version v0.2 of Media Viewer on all wikis worldwide. For example, check out this demo page on MediaWiki.org (be sure to enable Media Viewer first in your Beta preferences). This version is still in development, with [//bugzilla.wikimedia.org/buglist.cgi?resolution=---&component=MultimediaViewer many known bugs], and we invite community members to report any new issues, as described below.

A newer version v0.2 can now be tested on MediaWiki.org, on this demo page (don't forget to enable Media Viewer in your Beta Features preferences page). For a sneak peek at this new version 0.2 of the Media Viewer, check out the next section below.

After you've had a chance to test it as described below, we invite you to join this discussion. Hope to see you there!

Why Media Viewer?
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.

Current features include:
 * Show images in larger media viewer panels 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

How does Media Viewer work?




Media Viewer provides two different views of an image when you click on its thumbnail on an article page: Lightbox and Full-screen View.

Lightbox View
The 'Lightbox view' for this tool includes:

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.
 * Image

In this v0.2 release, these tools are provided:
 * Viewing Tools
 * Close button (goes back to article view)
 * Full screen button (expands into full-screen view)
 * Next and Previous arrows (to browse through related images)

Here is the information that is shown immediately below the image, in a small meta-data strip (see mockup):
 * Primary Info
 * File name (Zonotrichia atricapilla)
 * Author (e.g. Alejandro Erickson)
 * Source (e.g. Bird Institute)
 * 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)

Here is the information that is shown below the fold, once you open the metadata panel (by clicking on the chevron or scrolling):
 * Secondary Info
 * Description
 * Site name and link (e.g. 'Learn more on Wikimedia Commons')
 * Uploader name (e.g. Smallbones)
 * Creation Date (e.g. 12 April, 2012)
 * Location (e.g. place name and/or geotag coordinates, if any)
 * Categories (e.g. Birds of British Columbia, Zonotrichia atricapilla … more> )
 * File usage (e.g. 'This file is being used by 5 other pages. ')
 * Permissions (e.g. special credits or restrictions) (screenshot)
 * Assessment credit (e.g. '') (screenshot)
 * More meta-data may be added to this panel over time

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. 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). In this mode, you only see the controls, the file name and the author/source/license if you hover over the image.

Bypassing the media viewer
If you would like to directly access the file description page of a given image without loading the media viewer at all, you can open the image in a new tab or window (typically accessible via right-click, or a combined keyboard+mouse action such as ctrl+click, depending on your browser and OS).

When will it be released?
A first beta version of Media Viewer will be released gradually in November 2013, as part of Beta Features, a new experimental program that will enable users to opt-in to test new beta features before they are released widely.

Media Viewer can now be tested by logged-in users on MediaWiki.org, on Meta.Wikimedia.org and on Wikimedia Commons. Based on test results, we have released it on all wikis worldwide on 21 November, 2013.

In the first release, the Media Viewer will only support the most widely used image file formats (e.g.: JPEG, GIF, PNG, TIFF, SVG), when users click on thumbnails in articles, galleries and category pages. In future releases, we plan to add support for PDF files, as well as audio and video files.

How can I help?


Can you help us test Media Viewer in coming days? The first version of this beta feature is now available for testing by logged-in users on all wikis, but we already have a lot of feedback and known bugs about it. So we invite you to test the newer version v0.2 on MediaWiki.org, on this demo page (don't forget to enable Media Viewer in your Beta Features preferences page). For a sneak peek at this new version 0.2 of the Media Viewer, check out the next section below.

To test either version of Media Viewer, click on the small 'Beta' link next to 'Preferences' in your personal menu. Then check the box next to 'Media Viewer' in the new BetaFeatures section of your user preferences — and click 'Save' (see screenshot). You can turn off any this options anytime, by reversing these steps. To test a variety of images in different file formats, you might like to check this Lightbox demo page.

Try out Media Viewer and let us know what you think on this discussion page. If you find any technical bugs, please [//bugzilla.wikimedia.org/enter_bug.cgi?product=MediaWiki%20extensions&component=MultimediaViewer report them here on Bugzilla]. Based on your feedback, we will improve this feature in coming weeks.

You can test Media Viewer with different file formats on this special test page.

Next Version


The next version 0.2 of Media Viewer will focus on a 'full-width design' as the default view, to provide a more immersive user experience. You can test this new version v0.2 on MediaWiki.org, on this demo page. When you click on a thumbnail, you will see a larger image than you do now, with only a small sliver of meta-data at the bottom of the page, as shown in this mockup, also shown to the right.

The goal is to display images to fill the browser window as much as possible, aiming for up to 100% of the browser window width and up to 90% of its height. To speed up this display, we will try to fetch the thumbnail size that is closest to 100% of the screen width but no more than 90% of the screen height (instead of asking the server to pre-render custom sizes, which is too time-consuming). Note that may propose different display rules for portraits and images with special aspect ratios.
 * Image Display

The meta-data will now be shown below the image, and only include a few items above the fold (file name, license, author, source and uploader). But you will be invited to scroll down to see a lot more meta-data below, with a clear affordance letting know how to get more info. The mockups below show examples of how this would work.
 * Meta Data

Tools will be shown below the image (thank, flag, share, full-screen) (except for the 'X' close icon and next/previous arrows, which can be shown over the image on hover, as suggested by best practices from other media sites). Next, we will also mockup audio-video playback as well in this context (play/pause, rewind, fast-forward, volume, scrollable timeline).
 * First Tools

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.

These mockups will be adjusted based on community feedback.

Again, this new version v0.2 can be tested on MediaWiki.org, on this demo page. Don't forget to enable Media Viewer in your Beta Features preferences page. Enjoy!

More Info
For more information about this tool, visit the project overview page on MediaWiki.org.

This feature was designed in collaboration with community members like you, through a series of discussions held over video conferencing, IRC and in person at Wikimania.

Media Viewer was brought to you by many Wikimedia Foundation team members, including: Fabrice Florin, Mark Holmquist, Jared Zimmerman, Gergő Tisza, Bryan Davis, Rob Lanphier, Brian Wolff, May Galloway, Keegan Peterzell, Luis Villa, Erik Moeller, Howie Fung and Tomasz Finc, to name but a few.

To learn more about other multimedia projects we're working on, visit this Multimedia project hub.