when transforming asset, adjust width and hight too

craftcms · Feb 13, 2024 · 3767558 · 3767558
1 parent 62610a7
commit 3767558
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 2 deletions.
diff --git a/src/controllers/CkeditorController.php b/src/controllers/CkeditorController.php
@@ -46,6 +46,8 @@ public function actionImageUrl(): Response
 
         return $this->asJson([
             'url' => $asset->getUrl($transform, false),
+            'width' => $asset->getWidth($transform),
+            'height' => $asset->getHeight($transform),
         ]);
     }
 }
diff --git a/src/web/assets/ckeditor/dist/ckeditor5-craftcms.js b/src/web/assets/ckeditor/dist/ckeditor5-craftcms.js
diff --git a/src/web/assets/ckeditor/dist/ckeditor5-craftcms.js.map b/src/web/assets/ckeditor/dist/ckeditor5-craftcms.js.map
diff --git a/src/web/assets/ckeditor/src/image/imagetransform/transformimagecommand.js b/src/web/assets/ckeditor/src/image/imagetransform/transformimagecommand.js
@@ -97,6 +97,16 @@ export default class TransformImageCommand extends Command {
         model.change((writer) => {
           const src = data.url + hash;
           writer.setAttribute('src', src, element);
+
+          // update image width and height to match the transformed size;
+          // ckeditor insists on keeping those around:
+          // https://ckeditor.com/docs/ckeditor5/latest/features/images/images-overview.html#image-width-and-height-attributes
+          if (data.width) {
+            writer.setAttribute('width', data.width, element);
+          }
+          if (data.height) {
+            writer.setAttribute('height', data.height, element);
+          }
         });
       });
     }