Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Example output from the picture module.
<div class="field field-name-field-image field-type-image field-label-hidden">
<div class="field-items">
<div class="field-item even" rel="og:image rdfs:seeAlso" resource="http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_tablet_1_5x/public/field/image/38054784.jpg?itok=zyO3uMRu">
<span data-picture="">
<span data-src="http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_tablet_1_5x/public/field/image/38054784.jpg?itok=zyO3uMRu" data-width="1300" data-height="867"></span>
<span data-media="all and (min-width: 0px) and (max-width: 559px)" data-srcset="http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_mobile_1x/public/field/image/38054784.jpg?itok=S7-pbzkq 1x, http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_mobile_1_5x/public/field/image/38054784.jpg?itok=J8RpvmvA 1.5x, http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_mobile_2x/public/field/image/38054784.jpg?itok=RBAKTbzw 2x" data-width="560" data-height="186"></span>
<span data-media="all and (min-width: 560px) and (max-width: 850px)" data-srcset="http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_tablet_1x/public/field/image/38054784.jpg?itok=dE_ACZ3a 1x, http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_tablet_1_5x/public/field/image/38054784.jpg?itok=zyO3uMRu 1.5x, http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_tablet_2x/public/field/image/38054784.jpg?itok=AunJjQtk 2x" data-width="850" data-height="567"></span>
<span data-media="all and (min-width: 851px)" data-srcset="http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_desk_1x/public/field/image/38054784.jpg?itok=3Or90dqg 1x, http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_desk_1_5x/public/field/image/38054784.jpg?itok=yWDYDcqA 1.5x, http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_desk_2x/public/field/image/38054784.jpg?itok=fYK9x1ab 2x" data-width="1024" data-height="683"></span>
<noscript>
<img typeof="foaf:Image" src="http://picture7w.h011.attiks.com/sites/picture7w.h011.attiks.com/files/styles/piccustom_user_tablet_1_5x/public/field/image/38054784.jpg?itok=zyO3uMRu" width="1300" height="867" alt="" />
</noscript>
</span>
</div>
</div>
</div>
/* Picture - Picture element polyfill for responsive images. Authors & copyright (c) 2012: WebLinc, David Knight. */
/* NOTE: Depends on Media object. See https://github.com/weblinc/media-match */
// Picture
(function(win) {
'use strict';
var _doc = win.document,
_picl = 0,
_ratioExpr = /\s+[\d\.]+x\s*,?/g,
_srcExpr = /[^\s]+/g,
_res = win.Media.features.resolution,
_timer = 0;
/*
parseSrcSet
*/
function parseSrcSet(src, precise) {
var ratios = src.match(_ratioExpr) || [],
ratiol = ratios.length,
srcList = src.replace(_ratioExpr, ' ').match(_srcExpr);
while (ratiol--) {
var dppx = parseFloat(ratios[ratiol]) * 96;
if (_res === dppx || (precise === false && Math.floor(_res / 96) === Math.floor(dppx / 96))) {
return srcList[ratiol];
}
}
if (typeof precise === 'undefined') {
return parseSrcSet(src, false);
}
return null;
}
win.Picture = {
// Properties
pictures: [],
// Methods
/*
parse
*/
parse: function() {
win.Picture.pictures = [];
var pics = _doc.getElementsByTagName('span'),
picl = pics.length,
pic = null;
while (picl-- && (pic = pics[picl])) {
if (pic.getAttribute('data-picture') === null) {
continue;
}
var srcs = pic.getElementsByTagName('span'),
srcl = srcs.length,
src = null,
mql = '',
srcList = {},
mediaAttr = '',
srcAttr = '',
srcDef = '',
width = '',
height = '';
while (srcl-- && (src = srcs[srcl])) {
mediaAttr = src.getAttribute('data-media');
srcAttr = src.getAttribute('data-src') || parseSrcSet(src.getAttribute('data-srcset') || '');
width = src.getAttribute('data-width') || '';
height = src.getAttribute('data-height') || '';
if (mediaAttr && srcAttr) {
srcList[mediaAttr] = {
uri: srcAttr,
width: width,
height: height
};
mql += (mql.length ? ', ' : '') + mediaAttr;
} else if (srcAttr) {
srcDef = {
uri: srcAttr,
width: width,
height: height
};
}
}
Picture.pictures.push({
element : pic,
media : mql,
src : srcList,
srcDefault : srcDef,
matches : false
});
_picl++;
}
},
/*
watch
*/
watch: function(evt) {
clearTimeout(_timer);
_timer = setTimeout(function() {
var id = _picl;
do {
var pic = win.Picture.pictures[id],
imgs = [],
img = null,
hasImg = false,
src = '',
width = '',
height = '',
prev = null,
match = false;
if (typeof pic === 'undefined') { continue; }
match = win.Media.parseMatch(pic.media, true);
if (match && !(pic.matches === match.media) || !match && pic.srcDefault.uri) {
pic.matches = (match && match.media) || match;
imgs = pic.element.getElementsByTagName('img');
if (match.media && pic.src[match.media].uri) {
src = (match.media && pic.src[match.media].uri);
width = pic.src[match.media].width;
height = pic.src[match.media].height;
} else {
src = pic.srcDefault.uri;
width = pic.srcDefault.width;
height = pic.srcDefault.height;
}
if (src) {
for (var i = 0, il = imgs.length; i < il; i++) {
img = imgs[i];
if (img.getAttribute('src') === src) {
img.className = 'match';
hasImg = true;
} else if (img.className !== 'unmatch') {
img.className = 'unmatch';
}
}
if (!hasImg) {
img = document.createElement('img');
img.alt = pic.element.getAttribute('data-title') || 'picture';
if (width) {
img.width = width;
}
if (height) {
img.height = height;
}
img.className = 'match';
pic.element.appendChild(img);
img.src = src;
}
}
} else if (!match) {
pic.matches = false;
}
} while(id--);
}, 10);
},
/*
init
*/
init: function() {
win.Picture.parse();
win.Picture.watch();
win.Media.listen(win.Picture.watch);
}
};
if (win.addEventListener) {
win.addEventListener('load', win.Picture.init);
} else {
win.attachEvent('onload', win.Picture.init);
}
})(window);;
if (Drupal && jQuery) {
// only load if Drupal and jQuery are defined.
(function ($) {
Drupal.behaviors.picture = {
attach: function (context) {
Picture.parse();
Picture.watch();
}
};
})(jQuery);
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.