a2aa66ca73
closes #10595 * Added breaking test for img-url helper Input from the content API was absolute, adding this test to verify my fix * Updated existing test to breaking test for img-url Had made a dumb assumption when building images sizes, this updates the test to fail so we can verify the fix * Refactored img-url to return as early as possible This makes it a little easier to parse what's going on, and it also allows us to remove the check for existence of the image url in the getImageSizes function * Refactored img-url config parsing to clean up core logic Superficial refactor to make future changes able to focus on what rather than how. * Refactored internal image detection into helper We're gonna need to know if the image is internal or not, when we force the path to relative, if we pull this out now, we have access in the top level logic * Removed duplicate checks for internal image Cleaning up and moving "higher-level" logic into the main function of the module * Renamed attr -> requestedImageUrl Superficial refactor, trying to be more explicit about identifiers * 🐛 Fixed img-url to output relative url by default Includes a check to isInternalImage as we never want to make external images relative. * Returned early if img-url recieves external url After realising we never want to deal with external urls, we can continue to return as early as possible, letting us remove checks and simplify the more complex logic for internal images. * Cleaned up the internal image logic Defining the three functions in order helps to see what operations are going to happen and in which order, we can then return the result of each operation applied to the next operation.
121 lines
4.1 KiB
JavaScript
121 lines
4.1 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 url = require('url');
|
|
const _ = require('lodash');
|
|
const proxy = require('./proxy');
|
|
const urlService = proxy.urlService;
|
|
const STATIC_IMAGE_URL_PREFIX = `/${urlService.utils.STATIC_IMAGE_URL_PREFIX}`;
|
|
|
|
module.exports = function imgUrl(requestedImageUrl, options) {
|
|
// CASE: if no url 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;
|
|
}
|
|
|
|
// CASE: if url 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 (requestedImageUrl === undefined) {
|
|
proxy.logging.warn(proxy.i18n.t('warnings.helpers.img_url.attrIsRequired'));
|
|
return;
|
|
}
|
|
|
|
// CASE: if you pass e.g. cover_image, but it is not set, then requestedImageUrl is null!
|
|
// in this case we don't show a warning
|
|
if (requestedImageUrl === null) {
|
|
return;
|
|
}
|
|
|
|
// CASE: if you pass an external image, there is nothing we want to do to it!
|
|
const isInternalImage = detectInternalImage(requestedImageUrl);
|
|
if (!isInternalImage) {
|
|
return requestedImageUrl;
|
|
}
|
|
|
|
const {requestedSize, imageSizes} = getImageSizeOptions(options);
|
|
const absoluteUrlRequested = getAbsoluteOption(options);
|
|
|
|
function applyImageSizes(image) {
|
|
return getImageWithSize(image, requestedSize, imageSizes);
|
|
}
|
|
|
|
function getImageUrl(image) {
|
|
return urlService.utils.urlFor('image', {image}, absoluteUrlRequested);
|
|
}
|
|
|
|
function ensureRelativePath(image) {
|
|
return urlService.utils.absoluteToRelative(image);
|
|
}
|
|
|
|
// CASE: only make paths relative if we didn't get a request for an absolute url
|
|
const maybeEnsureRelativePath = !absoluteUrlRequested ? ensureRelativePath : _.identity;
|
|
|
|
return maybeEnsureRelativePath(
|
|
getImageUrl(
|
|
applyImageSizes(requestedImageUrl)
|
|
)
|
|
);
|
|
};
|
|
|
|
function getAbsoluteOption(options) {
|
|
const absoluteOption = options && options.hash && options.hash.absolute;
|
|
|
|
return absoluteOption ? !!absoluteOption && absoluteOption !== 'false' : false;
|
|
}
|
|
|
|
function getImageSizeOptions(options) {
|
|
const requestedSize = options && options.hash && options.hash.size;
|
|
const imageSizes = options && options.data && options.data.config && options.data.config.image_sizes;
|
|
|
|
return {
|
|
requestedSize,
|
|
imageSizes
|
|
};
|
|
}
|
|
|
|
function detectInternalImage(requestedImageUrl) {
|
|
const siteUrl = urlService.utils.getBlogUrl();
|
|
const isAbsoluteImage = /https?:\/\//.test(requestedImageUrl);
|
|
const isAbsoluteInternalImage = isAbsoluteImage && requestedImageUrl.startsWith(siteUrl);
|
|
|
|
// CASE: imagePath is a "protocol relative" url e.g. "//www.gravatar.com/ava..."
|
|
// by resolving the the imagePath relative to the blog url, we can then
|
|
// detect if the imagePath is external, or internal.
|
|
const isRelativeInternalImage = !isAbsoluteImage && url.resolve(siteUrl, requestedImageUrl).startsWith(siteUrl);
|
|
|
|
return isAbsoluteInternalImage || isRelativeInternalImage;
|
|
}
|
|
|
|
function getImageWithSize(imagePath, requestedSize, imageSizes) {
|
|
if (!requestedSize) {
|
|
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 : '';
|
|
}
|