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 %>
- <%= 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
+ %>
<% 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",