From 35062979150402db1fc6894fa2bf5252a8b33795 Mon Sep 17 00:00:00 2001
From: Tuomas Nylund <tuomas.nylund@thoughtworks.com>
Date: Mon, 30 Oct 2023 11:58:00 +0000
Subject: [PATCH] Render TopicalEvent image src set with image urls that are
 provided by Whitehall.

Whitehall has changed to start using modern Asset Manager urls for each asset. This means that the
image urls are no longer guessable. Each image variant has its own unique id. In order for the srcset
to work correctly, the image urls must be collected from content source.
---
 app/models/topical_event.rb                   | 28 +++++++++----------
 app/views/topical_events/show.html.erb        |  8 +++++-
 spec/features/topical_event_spec.rb           | 17 +++++++++++
 .../fixtures/content_store/topical_event.json |  2 ++
 4 files changed, 40 insertions(+), 15 deletions(-)

diff --git a/app/models/topical_event.rb b/app/models/topical_event.rb
index cfaab63a0..7b735567c 100644
--- a/app/models/topical_event.rb
+++ b/app/models/topical_event.rb
@@ -23,23 +23,23 @@ def image_url
     @content_item.content_item_data.dig("details", "image", "url")
   end
 
-  def image_alt_text
-    @content_item.content_item_data.dig("details", "image", "alt_text")
+  def image_medium_resolution_url
+    @content_item.content_item_data.dig("details", "image", "medium_resolution_url")
+  end
+
+  def image_high_resolution_url
+    @content_item.content_item_data.dig("details", "image", "high_resolution_url")
   end
 
   def image_srcset
-    [
-      { url: sized_image_url(960), size: "960w" },
-      { url: sized_image_url(712), size: "712w" },
-      { url: sized_image_url(630), size: "630w" },
-      { url: sized_image_url(465), size: "465w" },
-      { url: sized_image_url(300), size: "300w" },
-      { url: sized_image_url(216), size: "216w" },
-    ]
-  end
-
-  def sized_image_url(width)
-    image_url.gsub("/s300_", "/s#{width}_")
+    set = {}
+    set[image_medium_resolution_url] = "2x" if image_medium_resolution_url
+    set[image_high_resolution_url] = "3x" if image_high_resolution_url
+    set
+  end
+
+  def image_alt_text
+    @content_item.content_item_data.dig("details", "image", "alt_text")
   end
 
   def body
diff --git a/app/views/topical_events/show.html.erb b/app/views/topical_events/show.html.erb
index eedd941be..ff219a31d 100644
--- a/app/views/topical_events/show.html.erb
+++ b/app/views/topical_events/show.html.erb
@@ -58,7 +58,13 @@
 
     <% if @topical_event.image_url %>
       <div class="topical-events__image">
-      <%= image_tag(@topical_event.image_url, alt: @topical_event.image_alt_text, srcset: { @topical_event.image_srcset[2][:url] => "2x", @topical_event.image_srcset[0][:url] => "3x",}) %>
+      <%=
+        if @topical_event.image_srcset.any?
+          image_tag(@topical_event.image_url, alt: @topical_event.image_alt_text, srcset: @topical_event.image_srcset)
+        else
+          image_tag(@topical_event.image_url, alt: @topical_event.image_alt_text)
+        end
+      %>
       </div>
     <% end %>
 
diff --git a/spec/features/topical_event_spec.rb b/spec/features/topical_event_spec.rb
index c65f723f2..49de509d3 100644
--- a/spec/features/topical_event_spec.rb
+++ b/spec/features/topical_event_spec.rb
@@ -30,6 +30,23 @@
     expect(page).to have_css("img[src='https://www.gov.uk/some-image.png'][alt='Text describing the image']")
   end
 
+  it "includes image srcset for various image sizes" do
+    visit base_path
+    expect(page).to have_css("img[srcset='https://www.gov.uk/some-medium-image.png 2x, https://www.gov.uk/some-high-image.png 3x']")
+  end
+
+  context "when the image has no variants" do
+    before do
+      content_item["details"]["image"].delete("medium_resolution_url")
+      content_item["details"]["image"].delete("high_resolution_url")
+      stub_content_store_has_item(base_path, content_item)
+    end
+    it "omits srcset if there are no higher res image sizes" do
+      visit base_path
+      expect(page).not_to have_css("img[srcset]")
+    end
+  end
+
   it "sets the body text" do
     visit base_path
     expect(page).to have_text(content_item.dig("details", "body"))
diff --git a/spec/fixtures/content_store/topical_event.json b/spec/fixtures/content_store/topical_event.json
index 293f6f73c..56ed33de4 100644
--- a/spec/fixtures/content_store/topical_event.json
+++ b/spec/fixtures/content_store/topical_event.json
@@ -33,6 +33,8 @@
     "body": "This is a very important topical event.",
     "image": {
       "url": "https://www.gov.uk/some-image.png",
+      "medium_resolution_url": "https://www.gov.uk/some-medium-image.png",
+      "high_resolution_url": "https://www.gov.uk/some-high-image.png",
       "alt_text": "Text describing the image"
     },
     "end_date": "2016-04-28T00:00:00+00:00",