From 240dfea79ad5241a3365f9645cfb0a4a3bfe5955 Mon Sep 17 00:00:00 2001
From: Patrick Cartlidge <patrickcartlidge@gmail.com>
Date: Fri, 15 May 2026 13:59:18 +0100
Subject: [PATCH] Add `variant` parameter to `ImageProcessingChecker`

To prevent the incorrect variant of an image being used, you can now
specify a `variant` in the `ImageProcessingChecker` so that the correct
variant of an image will be rendered instead of the previous behaviour
(the first non-original image).
---
 .../admin/modules/image-processing-checker.js |  5 ++--
 .../edition_images/image_component.html.erb   |  2 +-
 .../modules/image-processing-checker.spec.js  | 23 ++++++++++++++++++-
 3 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/admin/modules/image-processing-checker.js b/app/assets/javascripts/admin/modules/image-processing-checker.js
index d6cb68e409d..92c3592e5a8 100644
--- a/app/assets/javascripts/admin/modules/image-processing-checker.js
+++ b/app/assets/javascripts/admin/modules/image-processing-checker.js
@@ -9,6 +9,7 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
     constructor($root) {
       this.$root = $root
       this.imageLink = this.$root.dataset.imageLink
+      this.variant = this.$root.dataset.variant || 'original'
 
       this.timeoutDuration =
         parseInt(this.$root.dataset.timeoutDuration, 10) ||
@@ -95,13 +96,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {}
 
         if (imgElement) {
           const previewAsset = assets.find(
-            ({ variant }) => variant !== 'original'
+            ({ variant }) => variant === this.variant
           )
 
           // images with multiple assets can have
           // transformed variants so we should not use
           // the `original` asset if this is the case
-          imgElement.src = previewAsset ? previewAsset.url : assets[0].url
+          imgElement.src = previewAsset.url
         }
 
         this.updateImageStatus(this.imagePreview)
diff --git a/app/components/admin/edition_images/image_component.html.erb b/app/components/admin/edition_images/image_component.html.erb
index c8fda618341..d1d3595a354 100644
--- a/app/components/admin/edition_images/image_component.html.erb
+++ b/app/components/admin/edition_images/image_component.html.erb
@@ -1,4 +1,4 @@
- <li data-module="image-processing-checker" data-image-link="<%= admin_edition_image_path(edition, image) %>" class="govuk-grid-row">
+ <li data-module="image-processing-checker" data-image-link="<%= admin_edition_image_path(edition, image) %>" data-variant="s960" class="govuk-grid-row">
   <template class="js-image-preview">
     <div class="govuk-grid-column-one-third">
       <img src="" alt="" class="app-view-edition-resource__preview">
diff --git a/spec/javascripts/admin/modules/image-processing-checker.spec.js b/spec/javascripts/admin/modules/image-processing-checker.spec.js
index f2d6ac8e056..522ce8ab62f 100644
--- a/spec/javascripts/admin/modules/image-processing-checker.spec.js
+++ b/spec/javascripts/admin/modules/image-processing-checker.spec.js
@@ -55,7 +55,7 @@ describe('GOVUK.Modules.ImageProcessingChecker', function () {
 
   afterEach(() => imagePreview.remove())
 
-  it('should replace the processing status with the image preview', (done) => {
+  it('should replace the processing status with the original image', (done) => {
     spyOn(window, 'fetch').and.resolveTo(okResponse)
     // eslint-disable-next-line no-new
     new GOVUK.Modules.ImageProcessingChecker(imagePreview)
@@ -64,6 +64,27 @@ describe('GOVUK.Modules.ImageProcessingChecker', function () {
 
     window.setTimeout(() => {
       expect(imagePreview.querySelector('img'))
+      expect(imagePreview.querySelector('img').src).toBe(
+        'http://assets.gov.uk/media/960x640.png'
+      )
+      done()
+    }, imageProcessingTimeout * 2)
+  })
+
+  it('should replace the processing status with a specific image if `variant` specified', (done) => {
+    imagePreview.dataset.variant = 's960'
+
+    spyOn(window, 'fetch').and.resolveTo(okResponse)
+    // eslint-disable-next-line no-new
+    new GOVUK.Modules.ImageProcessingChecker(imagePreview)
+
+    expect(imagePreview.querySelector('img')).toBe(null)
+
+    window.setTimeout(() => {
+      expect(imagePreview.querySelector('img'))
+      expect(imagePreview.querySelector('img').src).toBe(
+        'http://assets.gov.uk/media/s960_960x640.png'
+      )
       done()
     }, imageProcessingTimeout * 2)
   })