User:Magnus Manske/wikipic

From MediaWiki.org
Jump to: navigation, search

My submission for the slideshow challenge.

Rationale[edit | edit source]

The challenge asks "How can we bring the millions of pictures in Wikipedia to our readers beyond the current low resolution thumbnails in articles?". This does not refer to the images in an article (of which there are often few), but to the whole of Wikipedia and Commons. However, a user will likely not be satisfied with viewing random images, but presumably would like to see "more like this". Therefore, this script attempts to find images related to one selected by the user, through categories, gallery pages, and linked/backlinked pages.

How to use wikipic[edit | edit source]

Edit your common.js subpage and add the following line:

importScriptURI("//www.mediawiki.org/w/index.php?title=User:Magnus_Manske/wikipic.js&action=raw&ctype=text/javascript");

If you use a JavaScript blocker such as NoScript, make sure it allows scripts from www.wikimedia.org.

Functions[edit | edit source]

wikipic can be used on Wikipedia, Wikibooks, and other Wikimedia projects. It adds a "tab" to each image in an article, which appears when you hover over the image with the mouse:

Hover tab in Opera 11.5

wikipic comes with four functions, though there is always room for more in the tab.

File information[edit | edit source]

The file information button Tango-style info icon.svg opens a dialog box with a zoomed version of the file, and meta-data such as size, description, author, date, license(s), and categories. Some of these are linked to relevant pages that will open in a new window/tab. The ides is that one can see information about the file without having to leave the page, and follow up while keeping the "source page" state.

File information dialog in Internet Explorer 8

The images is by default shown on a black background for enhanced contrast. Clicking on the background toggles between black and white.

Related files[edit | edit source]

This Gnome-emblem-photos.svg function loads up to ~120 related images as thumbnails into a dialog box. The files are found by looking at categories and galleries (both on the local wiki and on Commons, if applicable) that contain the original image (the one with the tab), of the same file type. If this yields only few results, images from pages on the local wiki related to the current page via in- and outgoing links are investigated. The aim is to try to stay "in context", but at the same time to emphasize the variety and vast numbers of images on Wikimedia projects.

Related files dialig in Google Chrome 16

The thumbnails are rather small, to pack a large number of them into view. However, they are loaded in a larger size than displayed; hovering over one of the small thumbnails shows the "full", larger thumbnail, with file name and size. Clicking on the large thumbnail leads to the respective file description page in a new tab/window.

Slideshow[edit | edit source]

For a Farm-Fresh slideshow.png slideshow, up to 50 files are retrieved in the same way as the "related files" search. These are then shown in a dialog box, similar to the "file information" dialog, but with auto-forward every 4 seconds, and pause/play/last/next/first/last buttons for manual control. Clicking on the image, the buttons, or the links will automatically pause the slideshow before performing the required function.

Slideshow dialog in Firefox 8
Note: this function has been deactivated in the current version (the icon will start the fullscreen mode instead), but is still available (slideshow_fullscreen_only=false).

Full-screen slideshow[edit | edit source]

The Full-screen slideshow View-fullscreen.svg is identical to the "normal" slideshow, except it uses the entire browser window. Image metadata can be dismissed. Some controls will fade out but reappear once the mouse is moved. Return to the normal browser window via the escape key or the close button in the bottom-right corner.

Full-screen slideshow in Firefox 8

Properties[edit | edit source]

  • Protocol-neutral (automatically uses http or https depending on the protocol used to load the page)
  • Works transparently with both local and Commons images
  • Completely written in JavaScript/CSS, using the Wiki(m|p)edia API; no extension necessary
  • Extensive use of jQuery maintains cross-browser compatability (even works on IE8!)
  • Tablet compatible: touch an image but release outside the image (so to not "click" on it) will show/hide the tab; the same gesture will show the larger thumbnail in "related files" (tested on Motorola Xoom/Android 3.X)
  • i18n build-in (currently en and de)
  • Many parameters adjustable at the head of the object definition
  • Related images are discovered trhough various methods, sorted by occurrences ("most related" first), then randomized within the sort order; this ensures that relevant images are shown first, while keeping variety through randomization
  • Attempts to parse metadata from {{Information}} and related templates. Detects license categories and displays appropriate icons where available.

Cross-browser[edit | edit source]

Mac 
Firefox 8 OK, Safari 5.1 OK, Opera 11.5 OK, Google Chrome 17 OK
Windows XP 
IE 8 OK
Android 3.X 
Firefox OK, Google Chrome OK (both need "escape" button for full-screen mode)

Known issues[edit | edit source]

  • In "related images", sometimes the thumbnails appear to "stall" loading for a few seconds; this is not an issue with wikipic, but with the server-side thumbnail generation, even though I try to use "standard" thumbnail sizes that should mostly exist
  • Not tested for video/audio.
  • Rarely, slideshow stops altogether. Some minor bug, no time to find it...

Code[edit | edit source]

I hereby release the wikipic code under GPLv.2.0+. JavaScript and CSS file are all that's required.