mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-25 20:03:12 +03:00
✨ Added responsive-image srcset attribute to image and gallery card output
no issue - adds a set of hardcoded "content image sizes" to the base config - adjusts `handle-image-sizes` middleware to always allow the hardcoded content image sizes to be genreated - updates `@tryghost/kg-card-factory` to allow passthrough of options to card renderers - updates `@tryghost/kg-default-cards` to add `srcset` output for image and gallery cards
This commit is contained in:
Kevin Ansfield
parent
4a90e8f1ee
commit
70b205618f
@ -27,7 +27,8 @@ module.exports = {
|
||||
const defaultCards = require('@tryghost/kg-default-cards');
|
||||
|
||||
cardFactory = new CardFactory({
|
||||
siteUrl: config.get('url')
|
||||
siteUrl: config.get('url'),
|
||||
contentImageSizes: config.get('imageOptimization:contentImageSizes')
|
||||
});
|
||||
|
||||
cards = defaultCards.map((card) => {
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
const _ = require('lodash');
|
||||
const path = require('path');
|
||||
const imageTransform = require('@tryghost/image-transform');
|
||||
const storage = require('../../../adapters/storage');
|
||||
const activeTheme = require('../../../../frontend/services/themes/active');
|
||||
const config = require('../../../../shared/config');
|
||||
|
||||
const SIZE_PATH_REGEX = /^\/size\/([^/]+)\//;
|
||||
const TRAILING_SLASH_REGEX = /\/+$/;
|
||||
@ -33,19 +35,26 @@ module.exports = function (req, res, next) {
|
||||
return redirectToOriginal();
|
||||
}
|
||||
|
||||
const imageSizes = activeTheme.get().config('image_sizes');
|
||||
// CASE: no image_sizes config
|
||||
const contentImageSizes = config.get('imageOptimization:contentImageSizes');
|
||||
const themeImageSizes = activeTheme.get().config('image_sizes');
|
||||
const imageSizes = _.merge({}, themeImageSizes, contentImageSizes);
|
||||
|
||||
// CASE: no image_sizes config (NOTE - unlikely to be reachable now we have content sizes)
|
||||
if (!imageSizes) {
|
||||
return redirectToOriginal();
|
||||
}
|
||||
|
||||
const imageDimensions = Object.keys(imageSizes).reduce((dimensions, size) => {
|
||||
// build a new object with keys that match the strings used in size paths like "w640h480"
|
||||
const imageDimensions = {};
|
||||
Object.keys(imageSizes).forEach((size) => {
|
||||
const {width, height} = imageSizes[size];
|
||||
const dimension = (width ? 'w' + width : '') + (height ? 'h' + height : '');
|
||||
return Object.assign({
|
||||
[dimension]: imageSizes[size]
|
||||
}, dimensions);
|
||||
}, {});
|
||||
|
||||
// if there are duplicate size names the first encountered wins
|
||||
if (!imageDimensions[dimension]) {
|
||||
imageDimensions[dimension] = imageSizes[size];
|
||||
}
|
||||
});
|
||||
|
||||
const imageDimensionConfig = imageDimensions[requestedDimension];
|
||||
// CASE: unknown dimension
|
||||
@ -54,7 +63,7 @@ module.exports = function (req, res, next) {
|
||||
}
|
||||
|
||||
const storageInstance = storage.getStorage();
|
||||
// CASE: unsupported storage adapter but theme is using custom image_sizes
|
||||
// CASE: unsupported storage adapter
|
||||
if (typeof storageInstance.saveRaw !== 'function') {
|
||||
return redirectToOriginal();
|
||||
}
|
||||
|
||||
@ -75,5 +75,13 @@
|
||||
"content": "v2/content"
|
||||
}
|
||||
}
|
||||
},
|
||||
"imageOptimization": {
|
||||
"contentImageSizes": {
|
||||
"w600": {"width": 600},
|
||||
"w1000": {"width": 1000},
|
||||
"w1600": {"width": 1600},
|
||||
"w2400": {"width": 2400}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -46,9 +46,9 @@
|
||||
"@tryghost/errors": "0.2.0",
|
||||
"@tryghost/helpers": "1.1.27",
|
||||
"@tryghost/image-transform": "0.2.4",
|
||||
"@tryghost/kg-card-factory": "2.0.0",
|
||||
"@tryghost/kg-card-factory": "2.1.1",
|
||||
"@tryghost/kg-default-atoms": "2.0.1",
|
||||
"@tryghost/kg-default-cards": "2.0.2",
|
||||
"@tryghost/kg-default-cards": "2.1.0",
|
||||
"@tryghost/kg-markdown-html-renderer": "2.0.0",
|
||||
"@tryghost/kg-mobiledoc-html-renderer": "3.0.0",
|
||||
"@tryghost/magic-link": "^0.4.8",
|
||||
|
||||
@ -36,8 +36,9 @@ describe('lib/mobiledoc', function () {
|
||||
}],
|
||||
['gallery', {
|
||||
images: [{
|
||||
row: 0,
|
||||
fileName: 'test.png',
|
||||
src: '/test.png',
|
||||
src: '/content/images/test.png',
|
||||
width: 1000,
|
||||
height: 500
|
||||
}]
|
||||
@ -67,7 +68,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"><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></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" 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" srcset="/content/images/size/w600/test.png 600w, /content/images/size/w1000/test.png 1000w, /content/images/size/w1600/test.png 1600w, /content/images/size/w2400/test.png 2400w"></div></div></div></figure>');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
30
yarn.lock
30
yarn.lock
@ -428,10 +428,10 @@
|
||||
optionalDependencies:
|
||||
sharp "0.25.3"
|
||||
|
||||
"@tryghost/kg-card-factory@2.0.0":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@tryghost/kg-card-factory/-/kg-card-factory-2.0.0.tgz#1fc651f132a5adc7b053987f2df5d9ec181865f9"
|
||||
integrity sha512-i8CoC4kBR6OOYMzIqSHBC5PgT6RVl48FjOQcCo1A6965ez+1SUIKVjAXHKbNs4xvAtSY64GMXkJAd+FWoqz2Cw==
|
||||
"@tryghost/kg-card-factory@2.1.1":
|
||||
version "2.1.1"
|
||||
resolved "https://registry.yarnpkg.com/@tryghost/kg-card-factory/-/kg-card-factory-2.1.1.tgz#c157da23969bec651a021b79656c249420921e89"
|
||||
integrity sha512-BFdDQReNgpDewfGWU841MRDUWUb9Ci1rs/09voBzswvQYsR6pxb0yxUxLj9UjgZznWkk8rj2elnby0PevnJ9gA==
|
||||
|
||||
"@tryghost/kg-clean-basic-html@^0.1.8":
|
||||
version "0.1.8"
|
||||
@ -443,15 +443,15 @@
|
||||
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.0.2":
|
||||
version "2.0.2"
|
||||
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-2.0.2.tgz#cb8027134aa99752954e2e71ff61ecd82684ef29"
|
||||
integrity sha512-0Zp4Ad51VFFWYBySbSol8K71qrWi7pmBgMy5pffZe/vYomeOUT3pxWWsfu+nu0GMfwyrCbuSPBLnJ/u7GtiJjg==
|
||||
"@tryghost/kg-default-cards@2.1.0":
|
||||
version "2.1.0"
|
||||
resolved "https://registry.yarnpkg.com/@tryghost/kg-default-cards/-/kg-default-cards-2.1.0.tgz#a218079d2e6662fe5b0117740faecf94cde6fd35"
|
||||
integrity sha512-8OKPFm210ACzjojmQLPCcRVNattc66Ub+Re5QsG6x09q7+xNV4IiTRt7L+pU4UizmHQ7y6jOFTWXH35az0O1Qw==
|
||||
dependencies:
|
||||
"@tryghost/kg-markdown-html-renderer" "^2.0.0"
|
||||
"@tryghost/kg-markdown-html-renderer" "^2.0.1"
|
||||
"@tryghost/url-utils" "^0.6.14"
|
||||
|
||||
"@tryghost/kg-markdown-html-renderer@2.0.0", "@tryghost/kg-markdown-html-renderer@^2.0.0":
|
||||
"@tryghost/kg-markdown-html-renderer@2.0.0":
|
||||
version "2.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@tryghost/kg-markdown-html-renderer/-/kg-markdown-html-renderer-2.0.0.tgz#a54e571dff69aa25a4af4345fd290eb7f60848a9"
|
||||
integrity sha512-bIh0te/NBgb9ZP12a6CDYQR92zD7mFINNW8MJEleYQEinJT38PSRborKDtcXID4yTVCY44n2ux5FnSSFi1XChg==
|
||||
@ -461,6 +461,16 @@
|
||||
markdown-it-lazy-headers "^0.1.3"
|
||||
markdown-it-mark "^3.0.0"
|
||||
|
||||
"@tryghost/kg-markdown-html-renderer@^2.0.1":
|
||||
version "2.0.1"
|
||||
resolved "https://registry.yarnpkg.com/@tryghost/kg-markdown-html-renderer/-/kg-markdown-html-renderer-2.0.1.tgz#2932b540c743aa59554f427b7debee527763d700"
|
||||
integrity sha512-NWRMnpcmqsLsjylqS6+EclLP0+mlAmCT1pjwcehlp+P8UWfWopwdOEOgfQO0lYOxlq3LIj2vfarXxEJoTV43GA==
|
||||
dependencies:
|
||||
markdown-it "^11.0.0"
|
||||
markdown-it-footnote "^3.0.2"
|
||||
markdown-it-lazy-headers "^0.1.3"
|
||||
markdown-it-mark "^3.0.0"
|
||||
|
||||
"@tryghost/kg-mobiledoc-html-renderer@3.0.0":
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/@tryghost/kg-mobiledoc-html-renderer/-/kg-mobiledoc-html-renderer-3.0.0.tgz#06e529bc83aeeae658a5d98d8c7011e8461ad5c9"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user