From 6dd767c9d3bee8e774d6f75788af450c463420c4 Mon Sep 17 00:00:00 2001 From: Shawn Jansepar Date: Sun, 19 Oct 2014 20:01:29 -0700 Subject: [PATCH 1/4] Allow for writing the srcset attribute --- resizeImages.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/resizeImages.js b/resizeImages.js index fa58fe7..f6c8f9c 100644 --- a/resizeImages.js +++ b/resizeImages.js @@ -157,7 +157,9 @@ ResizeImages.getImageURL = function(url, options) { */ ResizeImages._rewriteSrcAttribute = function(element, opts, srcVal){ - srcVal = element.getAttribute(opts.sourceAttribute) || srcVal; + srcVal = element.getAttribute(opts.sourceAttribute) || + element.getAttribute(opts.sourceSetAttribute) || + srcVal; if (srcVal) { var url = Utils.absolutify(srcVal); if (Utils.httpUrl(url)) { @@ -167,10 +169,12 @@ ResizeImages._rewriteSrcAttribute = function(element, opts, srcVal){ element.setAttribute(opts.targetAttribute, ResizeImages.getImageURL(url, opts)); element.setAttribute('data-orig-src', srcVal); // if using resize when not capturing, remove the sourceAttribute - // as long as it's not "src", which is the target attribute used - // when not capturing. + // or sourceSetAttribute as long as it's not "src", which is the target + // attribute used when not capturing. if (!capturing && opts.sourceAttribute != opts.targetAttribute) { element.removeAttribute(opts.sourceAttribute); + } else if (!capturing && opts.sourceSetAttribute != opts.targetAttribute) { + element.removeAttribute(opts.sourceSetAttribute); } } } @@ -396,6 +400,7 @@ ResizeImages.defaults = { host: 'ir0.mobify.com', projectName: "oss-" + location.hostname.replace(/[^\w]/g, '-'), sourceAttribute: "x-src", + sourceSetAttribute: "x-src", targetAttribute: (capturing ? "x-src" : "src"), webp: ResizeImages.supportsWebp(), resize: true, From 7094b7e2c11bc8a3e1e4130f1a51fd2a56d4342d Mon Sep 17 00:00:00 2001 From: Shawn Jansepar Date: Mon, 20 Oct 2014 01:10:01 -0700 Subject: [PATCH 2/4] Fix resize for picture elements --- resizeImages.js | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/resizeImages.js b/resizeImages.js index f6c8f9c..7eedbe1 100644 --- a/resizeImages.js +++ b/resizeImages.js @@ -166,14 +166,17 @@ ResizeImages._rewriteSrcAttribute = function(element, opts, srcVal){ if (opts.onerror) { element.setAttribute('onerror', opts.onerror); } - element.setAttribute(opts.targetAttribute, ResizeImages.getImageURL(url, opts)); + // if the element is a source element, then we always want to set srcset rather then src + var targetAttribute = (element.nodeName === 'SOURCE') ? opts.targetSrcSetAttribute : opts.targetSrcAttribute; + + element.setAttribute(targetAttribute, ResizeImages.getImageURL(url, opts)); element.setAttribute('data-orig-src', srcVal); // if using resize when not capturing, remove the sourceAttribute // or sourceSetAttribute as long as it's not "src", which is the target // attribute used when not capturing. - if (!capturing && opts.sourceAttribute != opts.targetAttribute) { + if (!capturing && opts.sourceAttribute != opts.targetSrcAttribute) { element.removeAttribute(opts.sourceAttribute); - } else if (!capturing && opts.sourceSetAttribute != opts.targetAttribute) { + } else if (!capturing && opts.sourceSetAttribute != opts.targetSrcSetAttribute) { element.removeAttribute(opts.sourceSetAttribute); } } @@ -365,11 +368,14 @@ ResizeImages.resize = function(elements, options) { } var opts = ResizeImages.processOptions(options); - for(var i=0; i < elements.length; i++) { + for (var i=0; i < elements.length; i++) { var element = elements[i]; - // For an `img`, simply modify the src attribute if (element.nodeName === 'IMG' && !element.hasAttribute('mobify-optimized')) { + // Skip this image if it's parent is a picture element + if (element.parentNode && element.parentNode.nodeName === 'PICTURE') { + continue; + } element.setAttribute('mobify-optimized', ''); ResizeImages._rewriteSrcAttribute(element, opts); } @@ -400,8 +406,9 @@ ResizeImages.defaults = { host: 'ir0.mobify.com', projectName: "oss-" + location.hostname.replace(/[^\w]/g, '-'), sourceAttribute: "x-src", - sourceSetAttribute: "x-src", - targetAttribute: (capturing ? "x-src" : "src"), + sourceSetAttribute: "x-srcset", + targetSrcAttribute: (capturing ? "x-src" : "src"), + targetSrcSetAttribute: (capturing ? "x-srcset" : "srcset"), webp: ResizeImages.supportsWebp(), resize: true, onerror: 'ResizeImages.restoreOriginalSrc(event);' From 041874df3da4c08ce850b531eb13f2aa2a645048 Mon Sep 17 00:00:00 2001 From: Shawn Jansepar Date: Wed, 22 Oct 2014 22:22:27 -0700 Subject: [PATCH 3/4] Fixes tests --- tests/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/tests/index.html b/tests/index.html index 0409ef8..c19bbc7 100644 --- a/tests/index.html +++ b/tests/index.html @@ -50,7 +50,7 @@
- + @@ -457,6 +457,7 @@ maxHeight: 480, webp: false, sourceAttribute: 'src', + sourceSetAttribute: 'srcset', devicePixelRatio: 1 }); @@ -467,16 +468,15 @@ "if source not properly parsed (iOS 4.3), src for img element inside of a picture element should remain"); return; } - - equal(images[0].querySelectorAll("#width-and-src")[0].getAttribute("src"), + equal(images[0].querySelectorAll("#width-and-src")[0].getAttribute("srcset"), "//ir0.mobify.com/project-test1/c8/300/480/http://www.mobify.com/i/phone-tablet-small.png", "source in picture has width overridden, and uses own src"); - equal(images[0].querySelectorAll("#width-and-no-src")[0].getAttribute("src"), + equal(images[0].querySelectorAll("#width-and-no-src")[0].getAttribute("srcset"), "//ir0.mobify.com/project-test1/c8/400/480/http://www.mobify.com/i/phone-tablet.png", "source in picture has width overridden, and uses data-src in picture"); - equal(images[0].querySelectorAll("#no-width-and-no-src")[0].getAttribute("src"), + equal(images[0].querySelectorAll("#no-width-and-no-src")[0].getAttribute("srcset"), "//ir0.mobify.com/project-test1/c8/1280/480/http://www.mobify.com/i/phone-tablet.png", "source in picture has no width overide, and uses data-src in picture"); }); @@ -579,7 +579,7 @@ resize: false, projectName: "test", sourceAttribute: "x-src", - targetAttribute: "x-src", + targetSrcAttribute: "x-src", webp: false }; var options = Utils.extend({}, baseOptions, From 07d39614ea4d31402e160776be0b0d86408a3b77 Mon Sep 17 00:00:00 2001 From: Noah Adams Date: Thu, 23 Oct 2014 15:16:00 -0700 Subject: [PATCH 4/4] update changelog and bump version in prep for release --- CHANGELOG | 3 +++ bower.json | 2 +- package.json | 2 +- 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/CHANGELOG b/CHANGELOG index 0e96a37..da7824c 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -1,2 +1,5 @@ +1.0.3 + - Supports rewriting `srcset` attribute in `` elements in `` + element. 1.0.2 - Sets default cacheHours to 8 diff --git a/bower.json b/bower.json index 6c05632..fbc63f0 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "imageresize-client", - "version": "1.0.2", + "version": "1.0.3", "main": "resizeImages.js", "dependencies": { "mobifyjs-utils": "git://github.com/mobify/mobifyjs-utils.git#1.0.0" diff --git a/package.json b/package.json index ac78b2e..9242782 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "imageresize-client", - "version": "1.0.2", + "version": "1.0.3", "devDependencies": { "grunt": "~0.4.0", "grunt-express": "~0.3.6",