Ghost/core/server/helpers/img_url.js
Fabien O'Carroll c2275ed131
Added size attribute support to img_url helper (#10182)
refs #10181 

Adds support to request a size in the img_url helper using syntax like:
    <img src="{{img_url profile_image size="small"}}"/>

Requires the image_sizes config to be defined in the themes package.json
2018-12-13 19:14:08 +07:00

75 lines
2.4 KiB
JavaScript

// Usage:
// `{{img_url feature_image}}`
// `{{img_url profile_image absolute="true"}}`
// Note:
// `{{img_url}}` - does not work, argument is required
//
// Returns the URL for the current object scope i.e. If inside a post scope will return image permalink
// `absolute` flag outputs absolute URL, else URL is relative.
const proxy = require('./proxy');
const urlService = proxy.urlService;
const STATIC_IMAGE_URL_PREFIX = `/${urlService.utils.STATIC_IMAGE_URL_PREFIX}`;
module.exports = function imgUrl(attr, options) {
// CASE: if no attribute is passed, e.g. `{{img_url}}` we show a warning
if (arguments.length < 2) {
proxy.logging.warn(proxy.i18n.t('warnings.helpers.img_url.attrIsRequired'));
return;
}
const absolute = options && options.hash && options.hash.absolute;
const size = options && options.hash && options.hash.size;
const imageSizes = options && options.data && options.data.config && options.data.config.image_sizes;
const image = getImageWithSize(attr, size, imageSizes);
// CASE: if attribute is passed, but it is undefined, then the attribute was
// an unknown value, e.g. {{img_url feature_img}} and we also show a warning
if (image === undefined) {
proxy.logging.warn(proxy.i18n.t('warnings.helpers.img_url.attrIsRequired'));
return;
}
if (image) {
return urlService.utils.urlFor('image', {image}, absolute);
}
// CASE: if you pass e.g. cover_image, but it is not set, then attr is null!
// in this case we don't show a warning
};
function getImageWithSize(imagePath, requestedSize, imageSizes) {
if (!imagePath) {
return imagePath;
}
if (!requestedSize) {
return imagePath;
}
if (/https?:\/\//.test(imagePath) && !imagePath.startsWith(urlService.utils.getBlogUrl())) {
return imagePath;
}
if (!imageSizes || !imageSizes[requestedSize]) {
return imagePath;
}
const {width, height} = imageSizes[requestedSize];
if (!width && !height) {
return imagePath;
}
const [imgBlogUrl, imageName] = imagePath.split(STATIC_IMAGE_URL_PREFIX);
const sizeDirectoryName = prefixIfPresent('w', width) + prefixIfPresent('h', height);
return [imgBlogUrl, STATIC_IMAGE_URL_PREFIX, `/size/${sizeDirectoryName}`, imageName].join('');
}
function prefixIfPresent(prefix, string) {
return string ? prefix + string : '';
}