From c45041ff126211b60aed775502bc418f05dd9d75 Mon Sep 17 00:00:00 2001 From: Leena Gupte Date: Tue, 18 Dec 2018 15:33:13 +0000 Subject: [PATCH 1/3] Allow an image credit to be displayed Adds a margin to the bottom of the caption in desktop view. This works as a line-break between the caption and in the image credit. The extra line isn't displayed on mobiles as this follows the pattern being developed for displaying image credits on inline images --- app/assets/stylesheets/components/_figure.scss | 8 ++++++++ app/views/components/_figure.html.erb | 15 ++++++++++++--- test/components/figure_test.rb | 17 ++++++++++++++++- 3 files changed, 36 insertions(+), 4 deletions(-) diff --git a/app/assets/stylesheets/components/_figure.scss b/app/assets/stylesheets/components/_figure.scss index 096152c69..e63d383bf 100644 --- a/app/assets/stylesheets/components/_figure.scss +++ b/app/assets/stylesheets/components/_figure.scss @@ -36,3 +36,11 @@ margin-top: $gutter-one-third; } } + +.app-c-figure__figcaption-text { + margin-bottom: 0; + + @include media(desktop, tablet) { + margin-bottom: $gutter-one-third; + } +} diff --git a/app/views/components/_figure.html.erb b/app/views/components/_figure.html.erb index 8a313a84b..8bb15a5e2 100644 --- a/app/views/components/_figure.html.erb +++ b/app/views/components/_figure.html.erb @@ -1,12 +1,21 @@ <% alt ||= '' caption ||= '' + credit ||= '' %>
<%= alt %> - <% unless caption.blank? %>
- <%= caption %> + <% unless caption.blank? %> +

+ <%= caption %> +

+ <% end %> + + <% if credit.present? %> +

+ Image credit: <%= credit %> +

+ <% end %>
- <% end %>
diff --git a/test/components/figure_test.rb b/test/components/figure_test.rb index a033cf093..c35313546 100644 --- a/test/components/figure_test.rb +++ b/test/components/figure_test.rb @@ -21,6 +21,21 @@ def component_name render_component(src: '/image', alt: 'image alt text', caption: 'This is a caption') assert_select ".app-c-figure__image[src=\"/image\"]" assert_select ".app-c-figure__image[alt=\"image alt text\"]" - assert_select ".app-c-figure__figcaption", text: 'This is a caption' + assert_select ".app-c-figure__figcaption .app-c-figure__figcaption-text", text: 'This is a caption' + end + + test "renders a figure with credit correctly" do + render_component(src: '/image', alt: 'image alt text', credit: 'Creative Commons') + assert_select ".app-c-figure__image[src=\"/image\"]" + assert_select ".app-c-figure__image[alt=\"image alt text\"]" + assert_select ".app-c-figure__figcaption .app-c-figure__figcaption-credit", text: 'Image credit: Creative Commons' + end + + test "renders a figure with caption and credit correctly" do + render_component(src: '/image', alt: 'image alt text', caption: 'This is a caption', credit: 'Creative Commons') + assert_select ".app-c-figure__image[src=\"/image\"]" + assert_select ".app-c-figure__image[alt=\"image alt text\"]" + assert_select ".app-c-figure__figcaption .app-c-figure__figcaption-text", text: 'This is a caption' + assert_select ".app-c-figure__figcaption .app-c-figure__figcaption-credit", text: 'Image credit: Creative Commons' end end From b0f2b1fa81692e9139badf88e2ec1c6cd46b34c7 Mon Sep 17 00:00:00 2001 From: Leena Gupte Date: Wed, 19 Dec 2018 14:25:21 +0000 Subject: [PATCH 2/3] Move Image credit text to translation file The translations default to English if there isn't an entry for a locale. --- app/views/components/_figure.html.erb | 2 +- config/locales/en.yml | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/app/views/components/_figure.html.erb b/app/views/components/_figure.html.erb index 8bb15a5e2..b01922310 100644 --- a/app/views/components/_figure.html.erb +++ b/app/views/components/_figure.html.erb @@ -14,7 +14,7 @@ <% if credit.present? %>

- Image credit: <%= credit %> + <%= I18n.t("components.figure.image_credit", credit: credit) %>

<% end %> diff --git a/config/locales/en.yml b/config/locales/en.yml index 88fd8f6ad..a72efd4a2 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -26,6 +26,8 @@ en: common: last_updated: "Last updated" components: + figure: + image_credit: "Image credit: %{credit}" share_links: share_this_page: "Share this page" publisher_metadata: From 9cfd02428d6fbfd8222ff8ad119a06492dca2f0f Mon Sep 17 00:00:00 2001 From: Leena Gupte Date: Tue, 18 Dec 2018 15:38:44 +0000 Subject: [PATCH 3/3] Display an image credit with the lead image Content Items affected: * Case Study * Fatality Notice * News Articles * Speech * Take Part * World Location News Article At the moment only the Content Publisher app supports image credits, so they will only be displayed on news articles for the time being. --- app/views/content_items/case_study.html.erb | 1 + app/views/content_items/fatality_notice.html.erb | 1 + app/views/content_items/news_article.html.erb | 1 + app/views/content_items/speech.html.erb | 1 + app/views/content_items/take_part.html.erb | 1 + app/views/content_items/world_location_news_article.html.erb | 1 + 6 files changed, 6 insertions(+) diff --git a/app/views/content_items/case_study.html.erb b/app/views/content_items/case_study.html.erb index d5b4ec610..432e47e62 100644 --- a/app/views/content_items/case_study.html.erb +++ b/app/views/content_items/case_study.html.erb @@ -23,6 +23,7 @@ <%= render 'components/figure', src: @content_item.image["url"], alt: @content_item.image["alt_text"], + credit: @content_item.image["credit"], caption: @content_item.image["caption"] if @content_item.image %> <%= render 'govuk_publishing_components/components/govspeak', diff --git a/app/views/content_items/fatality_notice.html.erb b/app/views/content_items/fatality_notice.html.erb index 5b38a04e4..75443db0b 100644 --- a/app/views/content_items/fatality_notice.html.erb +++ b/app/views/content_items/fatality_notice.html.erb @@ -25,6 +25,7 @@ <%= render 'components/figure', src: @content_item.image["url"], alt: @content_item.image["alt_text"], + credit: @content_item.image["credit"], caption: @content_item.image["caption"] if @content_item.image %> <%= render 'govuk_publishing_components/components/govspeak', content: @content_item.body.html_safe, diff --git a/app/views/content_items/news_article.html.erb b/app/views/content_items/news_article.html.erb index d08840834..d5020e379 100644 --- a/app/views/content_items/news_article.html.erb +++ b/app/views/content_items/news_article.html.erb @@ -24,6 +24,7 @@ <%= render 'components/figure', src: @content_item.image["url"], alt: @content_item.image["alt_text"], + credit: @content_item.image["credit"], caption: @content_item.image["caption"] if @content_item.image %> <%= render 'govuk_publishing_components/components/govspeak', content: @content_item.body.html_safe, diff --git a/app/views/content_items/speech.html.erb b/app/views/content_items/speech.html.erb index c1767c1db..9b932b52c 100644 --- a/app/views/content_items/speech.html.erb +++ b/app/views/content_items/speech.html.erb @@ -27,6 +27,7 @@ <%= render 'components/figure', src: @content_item.image["url"], alt: @content_item.image["alt_text"], + credit: @content_item.image["credit"], caption: @content_item.image["caption"] if @content_item.image %> <%= render 'govuk_publishing_components/components/govspeak', diff --git a/app/views/content_items/take_part.html.erb b/app/views/content_items/take_part.html.erb index ce8e152ea..4661d37e8 100644 --- a/app/views/content_items/take_part.html.erb +++ b/app/views/content_items/take_part.html.erb @@ -18,6 +18,7 @@ <%= render 'components/figure', src: @content_item.image["url"], alt: @content_item.image["alt_text"], + credit: @content_item.image["credit"], caption: @content_item.image["caption"] if @content_item.image %> <%= render 'govuk_publishing_components/components/govspeak', diff --git a/app/views/content_items/world_location_news_article.html.erb b/app/views/content_items/world_location_news_article.html.erb index 7c8cbda44..55361e084 100644 --- a/app/views/content_items/world_location_news_article.html.erb +++ b/app/views/content_items/world_location_news_article.html.erb @@ -24,6 +24,7 @@ <%= render 'components/figure', src: @content_item.image["url"], alt: @content_item.image["alt_text"], + credit: @content_item.image["credit"], caption: @content_item.image["caption"] if @content_item.image %> <%= render 'govuk_publishing_components/components/govspeak',