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,19 @@
     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
+    let(:content_item) { fetch_fixture("topical_event_with_no_image_variants") }
+    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",

spec/fixtures/content_store/topical_event_with_no_image_variants.json

@@ -0,0 +1,64 @@
+{
+  "base_path": "/government/topical-events/something-very-topical",
+  "title": "Something very topical",
+  "description": "This event is happening soon",
+  "links": {
+    "organisations": [
+      {
+        "content_id": "very-topical-id",
+        "title": "Department of topical affairs",
+        "base_path": "government/organisations/department-for-topical-affairs",
+        "details": {
+          "logo": {
+            "crest": "single-identity"
+          },
+          "brand": "department-for-topical-affairs"
+        }
+      },
+      {
+        "content_id": "emphasised-topical-id",
+        "title": "Department of emphasised topical affairs",
+        "base_path": "government/organisations/department-for-emphasised-topical-affairs",
+        "details": {
+          "logo": {
+            "crest": "single-identity"
+          },
+          "brand": "department-for-emphasised-topical-affairs"
+       }
+      }
+    ]
+  },
+  "details": {
+    "about_page_link_text": "Read more about this event",
+    "body": "This is a very important topical event.",
+    "image": {
+      "url": "https://www.gov.uk/some-image.png",
+      "alt_text": "Text describing the image"
+    },
+    "end_date": "2016-04-28T00:00:00+00:00",
+    "emphasised_organisations": ["emphasised-topical-id"],
+    "ordered_featured_documents": [
+      {
+        "href": "https://www.gov.uk/somewhere",
+        "image": {
+          "url": "https://www.gov.uk/someimage.png",
+          "alt_text": "Alt text for the image"
+        },
+        "title": "A document related to this event",
+        "summary": "Very interesting document content. However this goes over the 160 character limit so when displayed this should be truncated in order to display the content neatly on the page."
+      }
+    ],
+    "social_media_links": [
+      {
+        "href": "https://www.facebook.com/a-topical-event",
+        "title": "Facebook",
+        "service_type": "facebook"
+      },
+      {
+        "href": "https://www.twitter.com/a-topical-event",
+        "title": "Twitter",
+        "service_type": "twitter"
+      }
+    ]
+  }
+}