Render TopicalEvent image src set with image urls that are provided b…

…y 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

@@ -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

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 %>
 

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"))

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",