🐛 Fixed images not having srcset or sizes attributes (#12800)

closes https://github.com/TryGhost/Team/issues/567

- bumped `@tryghost/kg-default-cards` with a version containing a bugfix for detecting absolute URLs as local content images when they match the site url supplied as an option when rendering
- this bug surfaced because of the change in https://github.com/TryGhost/Ghost/pull/12787 - the renderer is now seeing absolute URLs when passed content from the model layer rather than `__GHOST_URL__` URLs. We didn't hit it in 3.x because that was passing content with relative URLs.
This commit is contained in:
Kevin Ansfield 2021-03-20 22:17:43 +00:00 committed by GitHub
parent eb5f7a8e2d
commit 9ac7ed5f3b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 52 additions and 7 deletions

View File

@ -53,7 +53,7 @@
"@tryghost/job-manager": "0.8.1",
"@tryghost/kg-card-factory": "2.2.0",
"@tryghost/kg-default-atoms": "2.0.4",
"@tryghost/kg-default-cards": "4.0.1",
"@tryghost/kg-default-cards": "4.0.2",
"@tryghost/kg-markdown-html-renderer": "4.0.0",
"@tryghost/kg-mobiledoc-html-renderer": "4.0.0",
"@tryghost/limit-service": "0.3.0",

View File

@ -139,6 +139,39 @@ describe('lib/mobiledoc', function () {
.should.eql('<figure class="kg-card kg-image-card kg-width-wide kg-card-hascaption"><img src="__GHOST_URL__/content/images/2018/04/NatGeo06.jpg" class="kg-image" alt loading="lazy" width="2000" height="1000" srcset="__GHOST_URL__/content/images/size/w600/2018/04/NatGeo06.jpg 600w, __GHOST_URL__/content/images/size/w1000/2018/04/NatGeo06.jpg 1000w, __GHOST_URL__/content/images/size/w1600/2018/04/NatGeo06.jpg 1600w, __GHOST_URL__/content/images/size/w2400/2018/04/NatGeo06.jpg 2400w" sizes="(min-width: 1200px) 1200px"><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="__GHOST_URL__/content/images/test.png" width="1000" height="500" loading="lazy" alt srcset="__GHOST_URL__/content/images/size/w600/test.png 600w, __GHOST_URL__/content/images/test.png 1000w" sizes="(min-width: 720px) 720px"></div></div></div></figure>');
});
it('renders srcsets for absolute images', function () {
let mobiledoc = {
version: '0.3.1',
atoms: [],
cards: [
['image', {
cardWidth: 'wide',
src: 'http://127.0.0.1:2369/content/images/2018/04/NatGeo06.jpg',
width: 4000,
height: 2000,
caption: 'Birdies'
}],
['gallery', {
images: [{
row: 0,
fileName: 'test.png',
src: 'http://127.0.0.1:2369/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="http://127.0.0.1:2369/content/images/2018/04/NatGeo06.jpg" class="kg-image" alt loading="lazy" width="2000" height="1000" srcset="http://127.0.0.1:2369/content/images/size/w600/2018/04/NatGeo06.jpg 600w, http://127.0.0.1:2369/content/images/size/w1000/2018/04/NatGeo06.jpg 1000w, http://127.0.0.1:2369/content/images/size/w1600/2018/04/NatGeo06.jpg 1600w, http://127.0.0.1:2369/content/images/size/w2400/2018/04/NatGeo06.jpg 2400w" sizes="(min-width: 1200px) 1200px"><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="http://127.0.0.1:2369/content/images/test.png" width="1000" height="500" loading="lazy" alt srcset="http://127.0.0.1:2369/content/images/size/w600/test.png 600w, http://127.0.0.1:2369/content/images/test.png 1000w" sizes="(min-width: 720px) 720px"></div></div></div></figure>');
});
it('respects srcsets config', function () {
configUtils.set('imageOptimization:srcsets', false);

View File

@ -521,17 +521,17 @@
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-atoms/-/kg-default-atoms-2.0.4.tgz#0c7885343019bae8fffc01b95fb5ae0e8d463ba9"
integrity sha512-IAqcbWpjtrS7z50DufQPBBS4c4/BL9SsYylHui2V1F5FBY9JxJTdq4fq3xlgg8bqSUwhWuBn1xGA07JX1dah1w==
"@tryghost/kg-default-cards@4.0.1":
version "4.0.1"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-4.0.1.tgz#bb63902f987e209b9572932f02a61d76adaf862e"
integrity sha512-aEyfVLLgcnePKUiUdqk1CutFp3eEVoNi5mIBi3vVjSsjIoXs7RZXlOd1wg4Ji1kr4AATYQS9GETDBFu9j8ziIA==
"@tryghost/kg-default-cards@4.0.2":
version "4.0.2"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-4.0.2.tgz#bb33e817ad1f063fc74454eda2bf96c528a0aa87"
integrity sha512-JhDKdGA3nyPZUkO1cf2GVkc0E0GowXhuG4tBLmv7opTU2ywqGVsAEoVXlmrzRQ3B3nGXih3alHSxnq8vHnnNeA==
dependencies:
"@tryghost/kg-markdown-html-renderer" "^4.0.0"
"@tryghost/kg-markdown-html-renderer" "^4.0.1"
"@tryghost/url-utils" "^1.1.0-rc.1"
handlebars "^4.7.6"
juice "^7.0.0"
"@tryghost/kg-markdown-html-renderer@4.0.0", "@tryghost/kg-markdown-html-renderer@^4.0.0":
"@tryghost/kg-markdown-html-renderer@4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@tryghost/kg-markdown-html-renderer/-/kg-markdown-html-renderer-4.0.0.tgz#1d084904dae8f10c56aee0dfc7d2edfd4db208c5"
integrity sha512-VAirSqAve309Rr2PC/Jg4uRGq6+/qbmqXMaSpzW0E/cB1d+I8sWG1Wfkj6RiS0I6Ge1hHYU9nsPYP2DJIRe8uw==
@ -543,6 +543,18 @@
markdown-it-mark "^3.0.0"
semver "^7.3.4"
"@tryghost/kg-markdown-html-renderer@^4.0.1":
version "4.0.1"
resolved "https://registry.yarnpkg.com/@tryghost/kg-markdown-html-renderer/-/kg-markdown-html-renderer-4.0.1.tgz#ebf1e91b6aa2a158f18de18637812da954466680"
integrity sha512-oElHA6TilCVpu/pWJ00ekcVh98R8z9nJKeToGBx/dzL0l6zHW+pYwjYuU7vtjeh28X81Jq6HLz8vSEIOQ0W/bA==
dependencies:
markdown-it "^12.0.0"
markdown-it-footnote "^3.0.2"
markdown-it-image-lazy-loading "^1.0.2"
markdown-it-lazy-headers "^0.1.3"
markdown-it-mark "^3.0.0"
semver "^7.3.4"
"@tryghost/kg-mobiledoc-html-renderer@4.0.0":
version "4.0.0"
resolved "https://registry.yarnpkg.com/@tryghost/kg-mobiledoc-html-renderer/-/kg-mobiledoc-html-renderer-4.0.0.tgz#310f8343535225c2fb766ddca85cc6d59ebc29c1"