Pass width and height through to image cropper

This removes one more place where we were hardcoding 960 x 640, and may be good enough to make the image cropper work for other image dimensions. That still requires further testing though, as there may be issues with the aspect ratio of the component when the target aspect ratio is different.
alphagov · Nov 4, 2024 · ad656b5 · ad656b5
1 parent d50ac7a
commit ad656b5
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 3 deletions.
diff --git a/app/assets/javascripts/components/image-cropper.js b/app/assets/javascripts/components/image-cropper.js
@@ -8,8 +8,8 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
     this.$image = this.$imageCropper.querySelector(
       '.app-c-image-cropper__image'
     )
-    this.$targetWidth = 960
-    this.$targetHeight = 640
+    this.$targetWidth = parseInt(this.$imageCropper.dataset.width, 10)
+    this.$targetHeight = parseInt(this.$imageCropper.dataset.height, 10)
   }
 
   ImageCropper.prototype.init = function () {

diff --git a/app/controllers/admin/edition_images_controller.rb b/app/controllers/admin/edition_images_controller.rb
@@ -37,6 +37,9 @@ def create
       PublishingApiDocumentRepublishingWorker.perform_async(@edition.document_id)
       redirect_to edit_admin_edition_image_path(@edition, @new_image.id), notice: "#{@new_image.filename} successfully uploaded"
     elsif new_image_needs_cropping?
+      image_kind_config = @new_image.image_data.image_kind_config
+      @valid_width = image_kind_config.valid_width
+      @valid_height = image_kind_config.valid_height
       @data_url = image_data_url
       render :crop
     else

diff --git a/app/views/admin/edition_images/crop.html.erb b/app/views/admin/edition_images/crop.html.erb
@@ -19,6 +19,8 @@
         src: @data_url,
         filename: @new_image.filename,
         type: @new_image.content_type,
+        width: @valid_width,
+        height: @valid_height,
       } %>
 
       <div class="govuk-button-group govuk-!-margin-bottom-6">

diff --git a/app/views/components/_image_cropper.html.erb b/app/views/components/_image_cropper.html.erb
@@ -1,4 +1,4 @@
-<%= tag.div class: "app-c-image-cropper", tabindex: "0", data: {module: "image-cropper", filename:, type:}, "aria-live" => "polite" do %>
+<%= tag.div class: "app-c-image-cropper", tabindex: "0", data: { module: "image-cropper", filename:, type:, width:, height: }, "aria-live" => "polite" do %>
   <input type="file" class="js-cropped-image-input" name="<%= name %>" hidden>
   <%= tag.div class: "app-c-image-cropper__container" do %>
     <%= tag.img class: "app-c-image-cropper__image",

diff --git a/spec/javascripts/components/image-cropper-spec.js b/spec/javascripts/components/image-cropper-spec.js
@@ -10,6 +10,8 @@ describe('GOVUK.Modules.ImageCropper', () => {
     component = document.createElement('div')
     component.setAttribute('data-filename', 'test.png')
     component.setAttribute('data-type', 'image/png')
+    component.setAttribute('data-width', '960')
+    component.setAttribute('data-height', '640')
     component.setAttribute('class', 'app-c-image-cropper')
     component.innerHTML = `
       <input type="file" class="js-cropped-image-input" name="image" hidden>

diff --git a/test/components/image_cropper_test.rb b/test/components/image_cropper_test.rb
@@ -17,6 +17,8 @@ def component_name
       src: "src",
       filename: "filename",
       type: "type",
+      width: 960,
+      height: 640,
     })
 
     assert_select ".app-c-image-cropper"