From a272b8a2272cd9370c3300c11d33c76e33d8c451 Mon Sep 17 00:00:00 2001 From: Meigo Kukk Date: Thu, 8 Oct 2020 10:29:15 +0300 Subject: [PATCH 1/5] =?UTF-8?q?images=20-=20=F0=9F=8E=A8=20update=20pictur?= =?UTF-8?q?e=20source=20markup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Update picture source markup and make sizes attribute configurable from shortcode. --- packages/images/utils/helpers.js | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/packages/images/utils/helpers.js b/packages/images/utils/helpers.js index 68c0ca5..5a0a4b7 100644 --- a/packages/images/utils/helpers.js +++ b/packages/images/utils/helpers.js @@ -25,28 +25,31 @@ function getSrcsets(maxWidth, fileSizes) { }; } -function getSources(sizes, srcsets) { +function getSources(sizes, srcsets, srcSizes) { const sources = { webp: [], jpeg: [], png: [], }; - sizes.forEach((size, i, arr) => { - Object.keys(srcsets).forEach((type) => { - if (!srcsets[type][size]) return; - let source = ` { + let type = srcset[0]; + let items = srcset[1]; - if (i + 1 < arr.length) { - source += `media="(min-width: ${size}px)" `; - } - source += `/>`; + if(Object.keys(items).length === 0) return; - sources[type].push(source); + let source = ` { + source += `${item[1]} ${item[0]}w, `; // ☝ image src with width w descriptor }); + source = source.replace(/,\s*$/, ""); + source += `" sizes="${srcSizes ? srcSizes : '100vw'}" `; // ☝ sizes attribute must be set if w descriptors are used + source += `>`; + + sources[type] = [source]; }); return sources; From 6afab5d97904f184948612e2351d7eabdd7609e1 Mon Sep 17 00:00:00 2001 From: Meigo Kukk Date: Thu, 8 Oct 2020 10:29:58 +0300 Subject: [PATCH 2/5] =?UTF-8?q?images=20-=20=F0=9F=8E=A8=20update=20pictur?= =?UTF-8?q?e=20source=20markup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Update picture source markup and make sizes attribute configurable from shortcode. --- packages/images/utils/imageStore.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/images/utils/imageStore.js b/packages/images/utils/imageStore.js index 7d6c590..b1368c2 100644 --- a/packages/images/utils/imageStore.js +++ b/packages/images/utils/imageStore.js @@ -20,7 +20,7 @@ const imageStore = (manifest, plugin) => { //todo title const { sizes, srcsets } = getSrcsets(maxWidth, file.sizes); - const sources = getSources(sizes, srcsets); + const sources = getSources(sizes, srcsets, opts.sizes); let picture = ``; From 58b62c66db064c3865beaa6ad7895a5dfe09a961 Mon Sep 17 00:00:00 2001 From: Meigo Kukk Date: Thu, 8 Oct 2020 14:13:52 +0300 Subject: [PATCH 3/5] =?UTF-8?q?images=20-=20=F0=9F=8E=A8=20update=20pictur?= =?UTF-8?q?e=20source=20markup?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/images/utils/helpers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/images/utils/helpers.js b/packages/images/utils/helpers.js index 5a0a4b7..57cd564 100644 --- a/packages/images/utils/helpers.js +++ b/packages/images/utils/helpers.js @@ -36,7 +36,7 @@ function getSources(sizes, srcsets, srcSizes) { let type = srcset[0]; let items = srcset[1]; - if(Object.keys(items).length === 0) return; + if (Object.keys(items).length === 0) return; let source = ` Date: Fri, 9 Oct 2020 05:56:26 +0300 Subject: [PATCH 4/5] change source sizes to vanillalazy data-sizes --- packages/images/utils/helpers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/images/utils/helpers.js b/packages/images/utils/helpers.js index 57cd564..353187f 100644 --- a/packages/images/utils/helpers.js +++ b/packages/images/utils/helpers.js @@ -46,7 +46,7 @@ function getSources(sizes, srcsets, srcSizes) { source += `${item[1]} ${item[0]}w, `; // ☝ image src with width w descriptor }); source = source.replace(/,\s*$/, ""); - source += `" sizes="${srcSizes ? srcSizes : '100vw'}" `; // ☝ sizes attribute must be set if w descriptors are used + source += `" data-sizes="${srcSizes ? srcSizes : '100vw'}" `; // ☝ sizes attribute must be set if w descriptors are used source += `>`; sources[type] = [source]; From 36f765d1eeb7ea43e6d0eeffd0f4bdde1ed930c3 Mon Sep 17 00:00:00 2001 From: Nick Reese Date: Thu, 15 Oct 2020 15:28:57 -0400 Subject: [PATCH 5/5] Remove scale causing issues? --- packages/images/utils/helpers.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/images/utils/helpers.js b/packages/images/utils/helpers.js index 353187f..c53aaf5 100644 --- a/packages/images/utils/helpers.js +++ b/packages/images/utils/helpers.js @@ -9,7 +9,7 @@ function getSrcsets(maxWidth, fileSizes) { let thisSrcSet = out[cv.format][cv.width] || ''; // let thisSrcSet = ''; if (cv.scale === 1) thisSrcSet = `${cv.relative}${thisSrcSet}`; - if (cv.scale === 2 && thisSrcSet.length) thisSrcSet = `${thisSrcSet}, ${cv.relative} 2x`; + //if (cv.scale === 2 && thisSrcSet.length) thisSrcSet = `${thisSrcSet}, ${cv.relative} 2x`; out[cv.format][cv.width] = thisSrcSet; return out; },