content: image: remove width/height slots

3 files changed, 33 insertions, 22 deletions

diff --git a/src/content/dependencies/generateCoverArtwork.js b/src/content/dependencies/generateCoverArtwork.js
index 0335e54c..90c9db98 100644
--- a/src/content/dependencies/generateCoverArtwork.js
+++ b/src/content/dependencies/generateCoverArtwork.js
@@ -74,7 +74,7 @@ export default {
     const sizeSlots =
       (square
         ? {square: true}
-        : {width: slots.dimensions[0], height: slots.dimensions[1]});
+        : {dimensions: slots.dimensions});
 
     switch (slots.mode) {
       case 'primary':
diff --git a/src/content/dependencies/image.js b/src/content/dependencies/image.js
index 134f99c9..93e76583 100644
--- a/src/content/dependencies/image.js
+++ b/src/content/dependencies/image.js
@@ -69,8 +69,6 @@ export default {
     },
 
     alt: {type: 'string'},
-    width: {type: 'number'},
-    height: {type: 'number'},
 
     attributes: {
       type: 'attributes',
@@ -139,8 +137,13 @@ export default {
       !isMissingImageFile &&
       !empty(contentWarnings);
 
+    const hasBothDimensions =
+      !!(slots.dimensions &&
+         slots.dimensions[0] !== null &&
+         slots.dimensions[1] !== null);
+
     const willSquare =
-      (slots.dimensions
+      (hasBothDimensions
         ? slots.dimensions[0] === slots.dimensions[1]
         : slots.square);
 
@@ -148,8 +151,12 @@ export default {
       {class: 'image'},
 
       slots.alt && {alt: slots.alt},
-      slots.width && {width: slots.width},
-      slots.height && {height: slots.height},
+
+      slots.dimensions?.[0] &&
+        {width: slots.dimensions[0]},
+
+      slots.dimensions?.[1] &&
+        {width: slots.dimensions[1]},
     ]);
 
     const isPlaceholder =
diff --git a/src/content/dependencies/transformContent.js b/src/content/dependencies/transformContent.js
index f1ea957e..0904cde6 100644
--- a/src/content/dependencies/transformContent.js
+++ b/src/content/dependencies/transformContent.js
@@ -294,6 +294,25 @@ export default {
 
             const image = relations.images[imageIndex++];
 
+            image.setSlots({
+              src,
+
+              link: link ?? true,
+              warnings: warnings ?? null,
+              thumb: slots.thumb,
+            });
+
+            if (width || height) {
+              image.setSlot('dimensions', [width ?? null, height ?? null]);
+            }
+
+            image.setSlot('attributes', [
+              {class: 'content-image'},
+
+              pixelate &&
+                {class: 'pixelate'},
+            ]);
+
             return {
               type: 'processed-image',
               inline: false,
@@ -302,22 +321,7 @@ export default {
                   align === 'center' &&
                     {class: 'align-center'},
 
-                  image.slots({
-                    src,
-
-                    link: link ?? true,
-                    width: width ?? null,
-                    height: height ?? null,
-                    warnings: warnings ?? null,
-                    thumb: slots.thumb,
-
-                    attributes: [
-                      {class: 'content-image'},
-
-                      pixelate &&
-                        {class: 'pixelate'},
-                    ],
-                  })),
+                  image),
             };
           }