Initial stab at responsive images for screen densities.
authorBrion Vibber <brion@pobox.com>
Tue, 18 Sep 2012 07:18:50 +0000 (00:18 -0700)
committerBrion Vibber <brion@pobox.com>
Thu, 11 Oct 2012 17:54:21 +0000 (10:54 -0700)
commit966cda2f802cd6cf08d9b73f75fc4b0e7beab625
tree0203914d8bd1dc3fa823d3a81cefaf2373e27a23
parent19745cb831252e7a0cd32df0cc515b8dd5356204
Initial stab at responsive images for screen densities.

* adds $wgResponsiveImages setting, defaulting to true, to enable the feature
* adds 'srcset' attribute with 1.5x and 2x URLs to image links and image thumbs
* adds jquery.hidpi plugin to check pixel density and implement partial 'srcset' polyfill
** $.devicePixelRatio() returns window.devicePixelRatio, with compat fallback for IE 10
** $().hidpi() performs a 'srcset' polyfill for browsers with no native 'srcset' support
* adds mediawiki.hidpi RL script to trigger hidpi loads after main images load

Note that this is a work in progress. There will be places where this doesn't yet work which output their imgs differently. If moving from a low to high-DPI screen on a MacBook Pro Retina display, you won't see images load until you reload.

Confirmed basic images and thumbs in wikitext appear to work in Safari 6, Chrome 21, Firefox 18 nightly on MacBook Pro Retina display, and IE 10 in Windows 8 at 150% zoom, 200% zoom, and 140% and 180%-ratio Metro tablet sizes.

Internally this is still a bit of a hack; Linker::makeImageLink and Linker::makeThumbLink explicitly ask for 1.5x and 2x scaled versions and insert their URLs, if different, into the original thumbnail object which (in default handler) outputs the srcset. This means that a number of places that handle images differently won't see the higher-resolution versions, such as <gallery> and the large thumbnail on the File: description page.

At some point we may wish to redo some of how the MediaHandler stuff works so that requesting a single thumbnail automatically produces the extra sizes in all circumstances. We might also consider outputting a 'srcset' or multiple src sizes in 'imageinfo' API requests, which would make ApiForeignRepo/InstantCommons more efficient. (Currently it has to make three requests for each image to get the three sizes.)

Change-Id: Id80ebd07a1a9f401a2c2bfeb21aae987e5aa863b
14 files changed:
RELEASE-NOTES-1.21
includes/DefaultSettings.php
includes/Html.php
includes/Linker.php
includes/OutputPage.php
includes/media/MediaTransformOutput.php
resources/Resources.php
resources/jquery/jquery.hidpi.js [new file with mode: 0644]
resources/mediawiki/mediawiki.hidpi.js [new file with mode: 0644]
tests/parser/parserTest.inc
tests/parser/parserTests.txt
tests/phpunit/includes/parser/NewParserTest.php
tests/qunit/QUnitTestResources.php
tests/qunit/suites/resources/jquery/jquery.hidpi.test.js [new file with mode: 0644]