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..e719f6d72 100644
--- a/spec/features/topical_event_spec.rb
+++ b/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"))
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",
diff --git a/spec/fixtures/content_store/topical_event_with_no_image_variants.json b/spec/fixtures/content_store/topical_event_with_no_image_variants.json
new file mode 100644
index 000000000..293f6f73c
--- /dev/null
+++ b/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"
+ }
+ ]
+ }
+}