mirror of
https://github.com/TryGhost/Ghost.git
synced 2025-02-17 23:44:39 -05:00
a051ab3b69
fixes https://github.com/TryGhost/Team/issues/1652 fixes https://github.com/TryGhost/Ghost/issues/13319 **Image formatting** Added support for changing the format of images via the `handle-image-sizes` middleware (e.g. format SVG to png, jpeg, webp) This change was required: - Not all browsers support SVG favicons, so we need to convert them to PNGs - We can't fit image resizing and formatting in the `serve-favicon` middleware: we need to store the resized image to avoid resizing on every request. This system was already present in the `handle-image-sizes` middleware. To format an uploaded image: - Original URL: https://localhost/blog/content/images/2022/05/giphy.gif - To resize: https://localhost/blog/content/images/size/w256h256/2022/05/giphy.gif (already supported) - To resize and format to webp: https://localhost/blog/content/images/size/w256h256/format/webp/2022/05/giphy.gif - Animations are preserved when converting Gifs to Webp and in reverse, and also when only resizing (https://github.com/TryGhost/Ghost/issues/13319) **Favicons** - Custom favicons are no longer served via `/favicon.png` or `/favicon.ico` (only for default favicon), but use their full path - Added support for uploading more image extensions in Ghost as a favicon: .jpg, .jpeg, .gif, .webp and .svg are now supported (already supported .png and .ico). - File extensions other than jpg/jpeg, png, or ico will always get transformed to the image/png format to guarantee browser support (webp and svg images are not yet supported as favicons by all browsers). For all image formats, other than .ico files: - Allowed to upload images larger than 1000px in width and height, they will get cropped to 256x256px. - Allowed uploading favicons that are not square. They will get cropped automatically. - Allowed to upload larger files, up to 20MB (will get served at a lower file size after being resized) For .svg files: - The minimum size of 60x60px is no longer required. For .ico files: - The file size limit is increased to 200kb (coming from 100kb)
216 lines
8.8 KiB
JavaScript
216 lines
8.8 KiB
JavaScript
const should = require('should');
|
|
const sinon = require('sinon');
|
|
const _ = require('lodash');
|
|
const path = require('path');
|
|
const BlogIcon = require('../../../../../core/server/lib/image/blog-icon');
|
|
|
|
describe('lib/image: blog icon', function () {
|
|
describe('getIconUrl', function () {
|
|
it('custom uploaded ico blog icon', function () {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {
|
|
urlFor: (key, boolean) => [key, boolean]
|
|
}, settingsCache: {
|
|
get: (key) => {
|
|
if (key === 'icon') {
|
|
return '/content/images/2017/04/my-icon.ico';
|
|
}
|
|
}
|
|
}});
|
|
blogIcon.getIconUrl().should.deepEqual([{relativeUrl: '/content/images/2017/04/my-icon.ico'}, undefined]);
|
|
});
|
|
|
|
it('custom uploaded png blog icon', function () {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {
|
|
urlFor: (key, boolean) => [key, boolean]
|
|
}, settingsCache: {
|
|
get: (key) => {
|
|
if (key === 'icon') {
|
|
return '/content/images/2017/04/my-icon.png';
|
|
}
|
|
}
|
|
}});
|
|
blogIcon.getIconUrl().should.deepEqual([{relativeUrl: '/content/images/size/w256h256/2017/04/my-icon.png'}, undefined]);
|
|
});
|
|
|
|
it('default ico blog icon', function () {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {
|
|
urlFor: key => key
|
|
}, settingsCache: {
|
|
get: () => {}
|
|
}});
|
|
blogIcon.getIconUrl().should.deepEqual({relativeUrl: '/favicon.ico'});
|
|
});
|
|
|
|
describe('absolute URL', function () {
|
|
it('custom uploaded ico blog icon', function () {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {
|
|
urlFor: (key, boolean) => [key, boolean]
|
|
}, settingsCache: {
|
|
get: (key) => {
|
|
if (key === 'icon') {
|
|
return '/content/images/2017/04/my-icon.ico';
|
|
}
|
|
}
|
|
}});
|
|
blogIcon.getIconUrl(true).should.deepEqual([{relativeUrl: '/content/images/2017/04/my-icon.ico'}, true]);
|
|
});
|
|
|
|
it('custom uploaded png blog icon', function () {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {
|
|
urlFor: (key, boolean) => [key, boolean]
|
|
}, settingsCache: {
|
|
get: (key) => {
|
|
if (key === 'icon') {
|
|
return '/content/images/2017/04/my-icon.png';
|
|
}
|
|
}
|
|
}});
|
|
blogIcon.getIconUrl(true).should.deepEqual([{relativeUrl: '/content/images/size/w256h256/2017/04/my-icon.png'}, true]);
|
|
});
|
|
|
|
it('default ico blog icon', function () {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {
|
|
urlFor: (key, boolean) => [key, boolean]
|
|
}, settingsCache: {
|
|
get: () => {}
|
|
}});
|
|
blogIcon.getIconUrl(true).should.deepEqual([{relativeUrl: '/favicon.ico'}, true]);
|
|
});
|
|
});
|
|
});
|
|
|
|
describe('getIconPath', function () {
|
|
it('custom uploaded ico blog icon', function () {
|
|
const stub = sinon.stub();
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {
|
|
getLocalImagesStoragePath: stub
|
|
}, urlUtils: {}, settingsCache: {
|
|
get: (key) => {
|
|
if (key === 'icon') {
|
|
return '/content/images/2017/04/my-icon.ico';
|
|
}
|
|
}
|
|
}});
|
|
|
|
blogIcon.getIconPath();
|
|
stub.calledOnce.should.be.true();
|
|
});
|
|
|
|
it('custom uploaded png blog icon', function () {
|
|
const stub = sinon.stub();
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {
|
|
getLocalImagesStoragePath: stub
|
|
}, urlUtils: {}, settingsCache: {
|
|
get: (key) => {
|
|
if (key === 'icon') {
|
|
return '/content/images/2017/04/my-icon.png';
|
|
}
|
|
}
|
|
}});
|
|
|
|
blogIcon.getIconPath();
|
|
stub.calledOnce.should.be.true();
|
|
});
|
|
|
|
it('default ico blog icon', function () {
|
|
const root = '/home/test';
|
|
const blogIcon = new BlogIcon({config: {
|
|
get: (key) => {
|
|
if (key === 'paths:publicFilePath') {
|
|
return root;
|
|
}
|
|
}
|
|
}, storageUtils: {}, urlUtils: {}, settingsCache: {
|
|
get: () => {}
|
|
}});
|
|
blogIcon.getIconPath().should.eql(path.join(root, 'favicon.ico'));
|
|
});
|
|
});
|
|
|
|
describe('getIconType', function () {
|
|
it('returns x-icon for ico icons', function () {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {}, settingsCache: {}});
|
|
blogIcon.getIconType('favicon.ico').should.eql('x-icon');
|
|
});
|
|
|
|
it('returns png for png icon', function () {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {}, settingsCache: {}});
|
|
blogIcon.getIconType('favicon.png').should.eql('png');
|
|
});
|
|
|
|
it('returns x-icon for ico icons when the icon is cached', function () {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {}, settingsCache: {
|
|
get: (key) => {
|
|
if (key === 'icon') {
|
|
return 'favicon.ico';
|
|
}
|
|
}
|
|
}});
|
|
blogIcon.getIconType().should.eql('x-icon');
|
|
});
|
|
|
|
it('returns png for png icon when the icon is cached', function () {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {}, settingsCache: {
|
|
get: (key) => {
|
|
if (key === 'icon') {
|
|
return 'favicon.png';
|
|
}
|
|
}
|
|
}});
|
|
blogIcon.getIconType().should.eql('png');
|
|
});
|
|
});
|
|
|
|
describe('getIconDimensions', function () {
|
|
it('[success] returns .ico dimensions', function (done) {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {}, settingsCache: {}});
|
|
blogIcon.getIconDimensions(path.join(__dirname, '../../../../utils/fixtures/images/favicon.ico'))
|
|
.then(function (result) {
|
|
should.exist(result);
|
|
result.should.eql({
|
|
width: 48,
|
|
height: 48
|
|
});
|
|
done();
|
|
}).catch(done);
|
|
});
|
|
|
|
it('[success] returns .png dimensions', function (done) {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {}, settingsCache: {}});
|
|
blogIcon.getIconDimensions(path.join(__dirname, '../../../../utils/fixtures/images/favicon.png'))
|
|
.then(function (result) {
|
|
should.exist(result);
|
|
result.should.eql({
|
|
width: 100,
|
|
height: 100
|
|
});
|
|
done();
|
|
}).catch(done);
|
|
});
|
|
|
|
it('[success] returns .ico dimensions for icon with multiple sizes', function (done) {
|
|
const blogIcon = new BlogIcon({config: {}, storageUtils: {}, urlUtils: {}, settingsCache: {}});
|
|
blogIcon.getIconDimensions(path.join(__dirname, '../../../../utils/fixtures/images/favicon_multi_sizes.ico'))
|
|
.then(function (result) {
|
|
should.exist(result);
|
|
result.should.eql({
|
|
width: 64,
|
|
height: 64
|
|
});
|
|
done();
|
|
}).catch(done);
|
|
});
|
|
|
|
it('[failure] return error message', function (done) {
|
|
const blogIcon = new BlogIcon({config: {}, tpl: key => key
|
|
, storageUtils: {}, urlUtils: {}, settingsCache: {}});
|
|
|
|
blogIcon.getIconDimensions(path.join(__dirname, '../../../../utils/fixtures/images/favicon_multi_sizes_FILE_DOES_NOT_EXIST.ico'))
|
|
.catch(function (error) {
|
|
should.exist(error);
|
|
error.message.should.eql('Could not fetch icon dimensions.');
|
|
done();
|
|
});
|
|
});
|
|
});
|
|
});
|