Foreign Affairs Style Guide

Sponsored Article -- Lead Image

The Lead Image at the top of body on Sponsored Article page

Redmine Prototyping Ticket(s)

Data Sources:

Sponsor Label

selector: .article-lead-image--sponsored-logo
data_source: field_sponsor
comments: This field is possible combination of static text and image. Example - Sponsor Content presented by Boeing(Boeing may be an image). This image will be served from Google DFP.

Image

selector: .article-lead-image--sponsored
data_source: field_image
comments: First image from the multivalue image entity

Credit

selector: @todo
data_source: .article-lead-image__photo-credit
comments: Credit field for the first image from the image entity

Caption

selector: .article-lead-image__caption
data_source: field_image
comments: Caption field for the first image from the image entity

Images Styles:

Name: x-large

      <div class="article-lead-image--sponsored" style="background-image: url('/fa_prototype/assets/images/sponsored-article-background.jpg');">
  <!-- background image -->
  <div class="article__sponsored-area with-lead-image">
    <span>Sponsor Content presented by
      <img class="article-lead-image--sponsored-logo"alt="Boeing Logo" src="/fa_prototype/assets/images/boeing-logo-white.png">
    </span>
  </div>
  <div class="container">
    <div class="article-lead-image__figcaption">
      <span class="article-lead-image__photo-credit">Jonathan Doe / Reuters</span>
      <span class="article-lead-image__caption">He who controls the Spice: Caption would go here and extend across like this. He who controls the Spice: Caption would go here and extend across like this.  <a href="#"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="54.3 329.2 891.5 891.6" enable-background="new 54.3 329.2 891.5 891.6" xml:space="preserve">
<g>
	<g>
		<polygon points="945.8,719.3 555.7,719.3 555.7,329.2 444.3,329.2 444.3,719.3 54.3,719.3 54.3,830.7 444.3,830.7 444.3,1220.8 
			555.7,1220.8 555.7,830.7 945.8,830.7 		"/>
	</g>
</g>
</svg>
</a> </span>
    </div>
  </div>
</div>