TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-26 04:13:30 +03:00
Code Issues Projects Releases Wiki Activity

✨ Added sizes attribute to in-content <img> elements

Browse Source 
no issue

- by including `sizes` with media-queries that match typical content widths we can give the browser better hints as to which responsive image size to fetch resulting in more performant pages
- also fixes `srcset` output where "unknown" sizes were used instead of linking to the original image src which was causing 302 redirects and slowing image loading in some cases
This commit is contained in:
Kevin Ansfield 2020-06-19 11:39:08 +01:00
parent b05527b159
commit edd997402b
3 changed files with 7 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -48,7 +48,7 @@
"@tryghost/image-transform": "0.2.4",
"@tryghost/kg-card-factory": "2.1.1",
"@tryghost/kg-default-atoms": "2.0.1",
"@tryghost/kg-default-cards": "2.2.1",
"@tryghost/kg-default-cards": "2.3.1",
"@tryghost/kg-markdown-html-renderer": "2.0.1",
"@tryghost/kg-mobiledoc-html-renderer": "3.0.1",
"@tryghost/magic-link": "0.4.9",

4
test/unit/lib/mobiledoc_spec.js
View File

@ -76,7 +76,7 @@ describe('lib/mobiledoc', function () {
};
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 width="4000" height="2000" 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" sizes="(min-width: 1200px) 1200px"><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/test.png 1000w" sizes="(min-width: 720px) 720px"></div></div></div></figure>');
});
it('respects srcsets config', function () {
@ -111,7 +111,7 @@ describe('lib/mobiledoc', function () {
};
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>');
.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 width="4000" height="2000"><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>');
});
});

8
yarn.lock
View File

@ -443,10 +443,10 @@
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-atoms/-/kg-default-atoms-2.0.1.tgz#3223ef5210d73af02c53795e5a5f1a9c5fc5bd92"
integrity sha512-0/Fx98ZIj/gyPglKg9HQP+cKPSBpbue1pnzh3E8hR4WXzqnSWMFA8VTUyMeI+8oNwxkxhZrWt5KifngHbBfw2A==
"@tryghost/kg-default-cards@2.2.1":
version "2.2.1"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-2.2.1.tgz#e7ab335f85bcbb714c268c30c21ffe3d8edef557"
integrity sha512-fUGn63XHmR6IoFu3O6sB9H8ozKjNpvGLmq6do8Y/2+XNmfXcGpu4mBvbrsz5dZ7SIPzkeDVJtKp9PcMjM/oCzw==
"@tryghost/kg-default-cards@2.3.1":
version "2.3.1"
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-2.3.1.tgz#d3eb1f180cab7a56433f17e603e00fa2fc105366"
integrity sha512-k5wJvWr2Xx6NOdSiaPmTihLCo7QJCvzFLe2kEskc4fn9u/YzZWQCQfmJVKNrsQ7MG8V06z8uOcXBUsQY3/4uGQ==
dependencies:
"@tryghost/kg-markdown-html-renderer" "^2.0.1"
"@tryghost/url-utils" "^0.6.14"