Structured content image size units (#1692)

* Add support for sizeUnits on image content

* Update test data

1 files changed, 12 insertions, 8 deletions

diff --git a/ext/js/display/display-generator.js b/ext/js/display/display-generator.js
index 2131d805..484dc6a9 100644
--- a/ext/js/display/display-generator.js
+++ b/ext/js/display/display-generator.js
@@ -340,19 +340,20 @@ class DisplayGenerator {
     }
 
     _createDefinitionImage(data, dictionary) {
-        const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible, verticalAlign} = data;
+        const {path, width, height, preferredWidth, preferredHeight, title, pixelated, collapsed, collapsible, verticalAlign, sizeUnits} = data;
 
-        const usedWidth = (
-            typeof preferredWidth === 'number' ?
-            preferredWidth :
-            width
-        );
+        const hasPreferredWidth = (typeof preferredWidth === 'number');
+        const hasPreferredHeight = (typeof preferredHeight === 'number');
         const aspectRatio = (
-            typeof preferredWidth === 'number' &&
-            typeof preferredHeight === 'number' ?
+            hasPreferredWidth && hasPreferredHeight ?
             preferredWidth / preferredHeight :
             width / height
         );
+        const usedWidth = (
+            hasPreferredWidth ?
+            preferredWidth :
+            (hasPreferredHeight ? preferredHeight * aspectRatio : width)
+        );
 
         const node = this._templates.instantiate('gloss-item-image');
         node.dataset.path = path;
@@ -364,6 +365,9 @@ class DisplayGenerator {
         if (typeof verticalAlign === 'string') {
             node.dataset.verticalAlign = verticalAlign;
         }
+        if (typeof sizeUnits === 'string' && (hasPreferredWidth || hasPreferredHeight)) {
+            node.dataset.sizeUnits = sizeUnits;
+        }
 
         const imageContainer = node.querySelector('.gloss-image-container');
         imageContainer.style.width = `${usedWidth}em`;