Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
14 changed files
with
269 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,119 @@ | ||
| /** | ||
| * Responsive images based on 'srcset' and 'window.devicePixelRatio' emulation where needed. | ||
| * | ||
| * Call $().hidpi() on a document or part of a document to replace image srcs in that section. | ||
| * | ||
| * $.devicePixelRatio() can be used to supplement window.devicePixelRatio with support on | ||
| * some additional browsers. | ||
| */ | ||
| ( function ( $ ) { | ||
|
|
||
| /** | ||
| * Detect reported or approximate device pixel ratio. | ||
| * 1.0 means 1 CSS pixel is 1 hardware pixel | ||
| * 2.0 means 1 CSS pixel is 2 hardware pixels | ||
| * etc | ||
| * | ||
| * Uses window.devicePixelRatio if available, or CSS media queries on IE. | ||
| * | ||
| * @method | ||
| * @returns {number} Device pixel ratio | ||
| */ | ||
| $.devicePixelRatio = function () { | ||
| if ( window.devicePixelRatio !== undefined ) { | ||
| // Most web browsers: | ||
| // * WebKit (Safari, Chrome, Android browser, etc) | ||
| // * Opera | ||
| // * Firefox 18+ | ||
| return window.devicePixelRatio; | ||
| } else if ( window.msMatchMedia !== undefined ) { | ||
| // Windows 8 desktops / tablets, probably Windows Phone 8 | ||
| // | ||
| // IE 10 doesn't report pixel ratio directly, but we can get the | ||
| // screen DPI and divide by 96. We'll bracket to [1, 1.5, 2.0] for | ||
| // simplicity, but you may get different values depending on zoom | ||
| // factor, size of screen and orientation in Metro IE. | ||
| if ( window.msMatchMedia( '(min-resolution: 192dpi)' ).matches ) { | ||
| return 2; | ||
| } else if ( window.msMatchMedia( '(min-resolution: 144dpi)' ).matches ) { | ||
| return 1.5; | ||
| } else { | ||
| return 1; | ||
| } | ||
| } else { | ||
| // Legacy browsers... | ||
| // Assume 1 if unknown. | ||
| return 1; | ||
| } | ||
| }; | ||
|
|
||
| /** | ||
| * Implement responsive images based on srcset attributes, if browser has no | ||
| * native srcset support. | ||
| * | ||
| * @method | ||
| * @returns {jQuery} This selection | ||
| */ | ||
| $.fn.hidpi = function () { | ||
| var $target = this, | ||
| // @todo add support for dpi media query checks on Firefox, IE | ||
| devicePixelRatio = $.devicePixelRatio(), | ||
| testImage = new Image(); | ||
|
|
||
| if ( devicePixelRatio > 1 && testImage.srcset === undefined ) { | ||
| // No native srcset support. | ||
| $target.find( 'img' ).each( function () { | ||
| var $img = $( this ), | ||
| srcset = $img.attr( 'srcset' ), | ||
| match; | ||
| if ( typeof srcset === 'string' && srcset !== '' ) { | ||
| match = $.matchSrcSet( devicePixelRatio, srcset ); | ||
| if (match !== null ) { | ||
| $img.attr( 'src', match ); | ||
| } | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| return $target; | ||
| }; | ||
|
|
||
| /** | ||
| * Match a srcset entry for the given device pixel ratio | ||
| * | ||
| * @param {number} devicePixelRatio | ||
| * @param {string} srcset | ||
| * @return {mixed} null or the matching src string | ||
| * | ||
| * Exposed for testing. | ||
| */ | ||
| $.matchSrcSet = function ( devicePixelRatio, srcset ) { | ||
| var candidates, | ||
| candidate, | ||
| bits, | ||
| src, | ||
| i, | ||
| ratioStr, | ||
| ratio, | ||
| selectedRatio = 1, | ||
| selectedSrc = null; | ||
| candidates = srcset.split( / *, */ ); | ||
| for ( i = 0; i < candidates.length; i++ ) { | ||
| candidate = candidates[i]; | ||
| bits = candidate.split( / +/ ); | ||
| src = bits[0]; | ||
| if ( bits.length > 1 && bits[1].charAt( bits[1].length - 1 ) === 'x' ) { | ||
| ratioStr = bits[1].substr( 0, bits[1].length - 1 ); | ||
| ratio = parseFloat( ratioStr ); | ||
| if ( ratio > devicePixelRatio ) { | ||
| // Too big, skip! | ||
| } else if ( ratio > selectedRatio ) { | ||
| selectedRatio = ratio; | ||
| selectedSrc = src; | ||
| } | ||
| } | ||
| } | ||
| return selectedSrc; | ||
| }; | ||
|
|
||
| }( jQuery ) ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| $( function() { | ||
| // Apply hidpi images on DOM-ready | ||
| // Some may have already partly preloaded at low resolution. | ||
| $( 'body' ).hidpi(); | ||
| } ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.