October 2011 Coding Challenge/Slideshow

Slideshow Challenge

How can we bring the millions of pictures in Wikipedia to our readers beyond the current low resolution thumbnails in articles? Find a way to invoke a beautiful, interactive HTML5 slideshow that works well on the desktop (extra points for tablet or mobile implementations), from any Wikipedia article.

Most readers only ever encounter the thumbnail view of images in a Wikipedia article. To see the full-size version, you have to manually click through, after which you end up on a page like this one. Not bad, but not particularly user-friendly either. Wouldn't it be nice to have a beautiful slideshow with captions that can be invoked right from the article?

On Wikimedia Commons, our media repository, people have gone through some effort to showcase our best images. You can try it directly or – if you're logged into commons – check out the user preferences and activate the "Slideshow". This is a community-created JavaScript that you can use as a benchmark for your own development; the code can be found in MediaWiki:GallerySlideshow.js and MediaWiki:Gadget-GallerySlideshow.js. When activated, it adds a "Show slideshow" link to all content-pages containing galleries and especially categories like this one.

Your slideshow implementation should work beautifully without browser plug-ins.

Things to think about:

• If I'm a Wikipedia reader, how do I activate a slideshow?
• How will captions be surfaced?
• How will users interact with the slideshow on a tablet or a smartphone?
• How to deal with different screen resolutions?
• How do I get access to other image-related metadata, e.g. licensing information?
• If a Wikipedia article links to related images on Wikimedia Commons (e.g. through Template:Commons or Template:Commons category), how can those be surfaced in the slideshow?

Additional pointers

User Scripts

All pages on MediaWiki sites include some built-in MediaWiki JavaScript code. Users can add their own code to this preload process by writing and uploading User Scripts, which are loaded whenever that logged-in user loads a page. Here's a brief guide explaining how those User Scripts work. Using that guide, you should be ready to have your own JavaScript code that's local to your login up and running within half an hour or less.

Image scaling

All Wikimedia Foundation sites depend on image scalers for supported media formats. This is an example of a full image URL. This is an example of a scaled image URL.

General new developer resources

Becoming a MediaWiki hacker

Here's a good introduction on what's involved in becoming a MediaWiki hacker, including instructions for installing your own MediaWiki instance.

IRC: #mediawiki

IRC is short for Internet Relay Chat, and open source developers talk on IRC all the time. The IRC Primer is a good overview of how IRC works. Friendly MediaWiki developers can be found on the #mediawiki channel on irc.freenode.net (web interface). If you are having difficulties figuring out how to write MediaWiki code, you can ask for help there. Be aware, though: if you want someone to help you, do some homework first. If the answer to your question can be found easily by typing the question into Google, you might not want to ask it on IRC.

Mailing list: wikitech-l

If someone isn't immediately available to help you on IRC, you can also join the wikitech-l mailing list and ask questions there. The same rules for asking questions on IRC apply for asking questions on mailing lists.

Coding conventions

Coding conventions are extremely important in the MediaWiki universe. Read them and understand them. If you do not conform to them, your chances of winning go down significantly.

Pre-commit checklist

Here's a useful pre-commit checklist. Before you decide that your submission is final, go through this checklist. You'll be glad you did.

Security for developers

Wikipedia gets half a billion visits every month, so good security practices are extremely important. Be sure to review the security documentation for Mediawiki developers.

Unit testing

Great code starts with a good test. We (as well as your peers, employers or customers) are greatly impressed by thorough unit testing. Of course, before your code is included in Wikipedia itself, good unit tests will be required. Here's some good documentation for writing unit tests in PHP and Javascript.

Browser Compatibility

Because Wikipedia is viewed by so many users, browser compatibility matters. (Remember: 0.1% of 500 million users is still half a million users.) Your new code may not work on every browser, but you must not break older browsers, either. Be sure to familiarize yourself with Wikipedia's browser compatibility policy.