✨ 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

core/server/helpers/img_url.js

@@ -7,8 +7,9 @@
 // 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.
 
-var proxy = require('./proxy'),
+const proxy = require('./proxy');
-    urlService = proxy.urlService;
+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
@@ -17,19 +18,57 @@ module.exports = function imgUrl(attr, options) {
         return;
     }
 
-    var absolute = options && options.hash && options.hash.absolute;
+    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 (attr === undefined) {
+    if (image === undefined) {
         proxy.logging.warn(proxy.i18n.t('warnings.helpers.img_url.attrIsRequired'));
         return;
     }
 
-    if (attr) {
+    if (image) {
-        return urlService.utils.urlFor('image', {image: attr}, absolute);
+        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 : '';
+}

core/server/services/themes/config/index.js

@@ -1,6 +1,6 @@
 var _ = require('lodash'),
     defaultConfig = require('./defaults'),
-    allowedKeys = ['posts_per_page'];
+    allowedKeys = ['posts_per_page', 'image_sizes'];
 
 module.exports.create = function configLoader(packageJson) {
     var config = _.cloneDeep(defaultConfig);

core/server/services/themes/middleware.js

@@ -71,6 +71,7 @@ themeMiddleware.updateTemplateData = function updateTemplateData(req, res, next)
 
     if (activeTheme.get()) {
         themeData.posts_per_page = activeTheme.get().config('posts_per_page');
+        themeData.image_sizes = activeTheme.get().config('image_sizes');
     }
 
     // Request-specific information

core/test/unit/helpers/img_url_spec.js

@@ -92,4 +92,49 @@ describe('{{image}} helper', function () {
             rendered.should.equal('http://example.com/picture.jpg');
         });
     });
+
+    describe('image_sizes', function () {
+        before(function () {
+            configUtils.set({url: 'http://localhost:82832'});
+        });
+        after(function () {
+            configUtils.restore();
+        });
+        it('should output correct url for absolute paths which are internal', function () {
+            var rendered = helpers.img_url('http://localhost:82832/content/images/my-coole-img.jpg', {
+                hash: {
+                    size: 'medium',
+                },
+                data: {
+                    config: {
+                        image_sizes: {
+                            medium: {
+                                width: 400
+                            }
+                        }
+                    }
+                }
+            });
+            should.exist(rendered);
+            rendered.should.equal('http://localhost:82832/content/images/size/w400/my-coole-img.jpg');
+    });
+        it('should output the correct url for relative paths', function () {
+            var rendered = helpers.img_url('/content/images/my-coole-img.jpg', {
+                hash: {
+                    size: 'medium',
+                },
+                data: {
+                    config: {
+                        image_sizes: {
+                            medium: {
+                                width: 400
+                            }
+                        }
+                    }
+                }
+            });
+            should.exist(rendered);
+            rendered.should.equal('/content/images/size/w400/my-coole-img.jpg');
+        });
+    });
 });

core/test/unit/services/themes/middleware_spec.js

@@ -95,7 +95,7 @@ describe('Themes', function () {
 
         describe('updateTemplateData', function () {
             var updateTemplateData = middleware[1],
-                themeDataExpectedProps = ['posts_per_page'],
+                themeDataExpectedProps = ['posts_per_page', 'image_sizes'],
                 blogDataExpectedProps = [
                     'url', 'title', 'description', 'logo', 'cover_image', 'icon', 'twitter', 'facebook', 'navigation',
                     'timezone', 'amp'