Added imageOptimization:srcsets config to allow disabling of srcset attrs in content

no issue

- pass `srcsets` value through to mobiledoc renderer
  - it will stop adding `srcset` attributes to images when explicitly set to `false`
- adds `reload()` method to `mobiledocLib` so that memoized instances of the renderer can be reset during tests that change config values
This commit is contained in:
Kevin Ansfield 2020-06-15 16:45:36 +01:00
parent 73e14b4235
commit ce8bc9d4bf
3 changed files with 48 additions and 2 deletions

View File

@ -28,7 +28,8 @@ module.exports = {
cardFactory = new CardFactory({ cardFactory = new CardFactory({
siteUrl: config.get('url'), siteUrl: config.get('url'),
contentImageSizes: config.get('imageOptimization:contentImageSizes') contentImageSizes: config.get('imageOptimization:contentImageSizes'),
srcsets: config.get('imageOptimization:srcsets')
}); });
cards = defaultCards.map((card) => { cards = defaultCards.map((card) => {
@ -75,5 +76,12 @@ module.exports = {
}); });
}; };
} }
},
// allow config changes to be picked up - useful in tests
reload() {
cardFactory = null;
cards = null;
mobiledocHtmlRenderer = null;
} }
}; };

View File

@ -102,7 +102,8 @@
} }
}, },
"imageOptimization": { "imageOptimization": {
"resize": true "resize": true,
"srcsets": true
}, },
"compress": true, "compress": true,
"preloadHeaders": false, "preloadHeaders": false,

View File

@ -9,6 +9,8 @@ describe('lib/mobiledoc', function () {
afterEach(function () { afterEach(function () {
configUtils.restore(); configUtils.restore();
// ensure config changes are reset and picked up by next test
mobiledocLib.reload();
}); });
describe('mobiledocHtmlRenderer', function () { describe('mobiledocHtmlRenderer', function () {
@ -72,5 +74,40 @@ describe('lib/mobiledoc', function () {
mobiledocLib.mobiledocHtmlRenderer.render(mobiledoc) mobiledocLib.mobiledocHtmlRenderer.render(mobiledoc)
.should.eql('<p>One<br>Two</p><!--kg-card-begin: markdown--><h1 id="markdowncard">Markdown card</h1>\n<p>Some markdown</p>\n<!--kg-card-end: markdown--><p>Three</p><hr><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="/content/images/2018/04/NatGeo06.jpg" class="kg-image" alt srcset="/content/images/size/w600/2018/04/NatGeo06.jpg 600w, /content/images/size/w1000/2018/04/NatGeo06.jpg 1000w, /content/images/size/w1600/2018/04/NatGeo06.jpg 1600w, /content/images/size/w2400/2018/04/NatGeo06.jpg 2400w"><figcaption>Birdies</figcaption></figure><p>Four</p><!--kg-card-begin: html--><h2>HTML card</h2>\n<div><p>Some HTML</p></div><!--kg-card-end: html--><figure class="kg-card kg-embed-card"><h2>Embed card</h2></figure><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/test.png" width="1000" height="500" alt srcset="/content/images/size/w600/test.png 600w, /content/images/size/w1000/test.png 1000w"></div></div></div></figure>'); .should.eql('<p>One<br>Two</p><!--kg-card-begin: markdown--><h1 id="markdowncard">Markdown card</h1>\n<p>Some markdown</p>\n<!--kg-card-end: markdown--><p>Three</p><hr><figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="/content/images/2018/04/NatGeo06.jpg" class="kg-image" alt srcset="/content/images/size/w600/2018/04/NatGeo06.jpg 600w, /content/images/size/w1000/2018/04/NatGeo06.jpg 1000w, /content/images/size/w1600/2018/04/NatGeo06.jpg 1600w, /content/images/size/w2400/2018/04/NatGeo06.jpg 2400w"><figcaption>Birdies</figcaption></figure><p>Four</p><!--kg-card-begin: html--><h2>HTML card</h2>\n<div><p>Some HTML</p></div><!--kg-card-end: html--><figure class="kg-card kg-embed-card"><h2>Embed card</h2></figure><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/test.png" width="1000" height="500" alt srcset="/content/images/size/w600/test.png 600w, /content/images/size/w1000/test.png 1000w"></div></div></div></figure>');
}); });
it('respects srcsets config', function () {
configUtils.set('imageOptimization:srcsets', false);
let mobiledoc = {
version: '0.3.1',
atoms: [],
cards: [
['image', {
cardWidth: 'wide',
src: '/content/images/2018/04/NatGeo06.jpg',
width: 4000,
height: 2000,
caption: 'Birdies'
}],
['gallery', {
images: [{
row: 0,
fileName: 'test.png',
src: '/content/images/test.png',
width: 1000,
height: 500
}]
}]
],
markups: [],
sections: [
[10, 0],
[10, 1]
]
};
mobiledocLib.mobiledocHtmlRenderer.render(mobiledoc)
.should.eql('<figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="/content/images/2018/04/NatGeo06.jpg" class="kg-image" alt><figcaption>Birdies</figcaption></figure><figure class="kg-card kg-gallery-card kg-width-wide"><div class="kg-gallery-container"><div class="kg-gallery-row"><div class="kg-gallery-image"><img src="/content/images/test.png" width="1000" height="500" alt></div></div></div></figure>');
});
}); });
}); });