Ghost/core/frontend/helpers/img_url.js

121 lines
4.0 KiB
JavaScript
Raw Normal View History

// 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');
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
const _ = require('lodash');
const proxy = require('./proxy');
const urlUtils = proxy.urlUtils;
const STATIC_IMAGE_URL_PREFIX = `/${urlUtils.STATIC_IMAGE_URL_PREFIX}`;
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
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;
}
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
// 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
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
if (requestedImageUrl === undefined) {
proxy.logging.warn(proxy.i18n.t('warnings.helpers.img_url.attrIsRequired'));
return;
}
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
// 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;
}
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
// CASE: if you pass an external image, there is nothing we want to do to it!
const isInternalImage = detectInternalImage(requestedImageUrl);
if (!isInternalImage) {
return requestedImageUrl;
}
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
const {requestedSize, imageSizes} = getImageSizeOptions(options);
const absoluteUrlRequested = getAbsoluteOption(options);
function applyImageSizes(image) {
return getImageWithSize(image, requestedSize, imageSizes);
}
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
function getImageUrl(image) {
return urlUtils.urlFor('image', {image}, absoluteUrlRequested);
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
}
function ensureRelativePath(image) {
return urlUtils.absoluteToRelative(image);
}
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
// 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 = urlUtils.getBlogUrl();
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
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);
🐛 Fixed img-url to output relative url by default (#10596) 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.
2019-03-11 17:20:05 +03:00
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 : '';
}