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" + } + ] + } +}