diff --git a/app/assets/stylesheets/billboards.scss b/app/assets/stylesheets/billboards.scss index 1cc28afd5..216eeaecf 100644 --- a/app/assets/stylesheets/billboards.scss +++ b/app/assets/stylesheets/billboards.scss @@ -40,6 +40,48 @@ display: block; } +.crayons-card.hero-billboard .ltag_cta { + display: block; +} + +.hero-billboard { + margin: var(--su-2) 0 0; + h1, + h2, + h3, + p { + text-align: center; + } + + @media (max-width: $breakpoint-s) { + display: block; + } + + @media (min-width: $breakpoint-m) { + margin: var(--su-2) var(--su-2) 0; + } + + @media (min-width: $breakpoint-l) { + margin: var(--su-4) var(--su-4) 0; + } + + @media (min-width: $breakpoint-xl) { + max-width: var(--site-width); + margin: var(--su-4) var(--su-4) 0; + } + + @media (min-width: 1284px) { + max-width: var(--site-width); + margin: var(--su-4) auto 0; + } +} + +@media (min-width: $breakpoint-s) { + .hero-billboard h1 { + font-size: var(--fs-3xl); + } +} + // these are inline CTA's //refers to the below the comments billboard on the article page //refers to the feed/stories where we use story diff --git a/app/controllers/stories_controller.rb b/app/controllers/stories_controller.rb index 949034f80..83c82b243 100644 --- a/app/controllers/stories_controller.rb +++ b/app/controllers/stories_controller.rb @@ -48,6 +48,10 @@ class StoriesController < ApplicationController private + def assign_hero_banner + @hero_display_ad = DisplayAd.for_display(area: "home_hero", user_signed_in: user_signed_in?) + end + def assign_hero_html return if Campaign.current.hero_html_variant_name.blank? @@ -125,6 +129,7 @@ class StoriesController < ApplicationController def handle_base_index @home_page = true assign_feed_stories unless user_signed_in? # Feed fetched async for signed-in users + assign_hero_banner assign_hero_html assign_podcasts get_latest_campaign_articles if Campaign.current.show_in_sidebar? diff --git a/app/models/display_ad.rb b/app/models/display_ad.rb index 6f5e340ce..8542f904b 100644 --- a/app/models/display_ad.rb +++ b/app/models/display_ad.rb @@ -6,7 +6,7 @@ class DisplayAd < ApplicationRecord belongs_to :audience_segment, optional: true # rubocop:disable Layout/LineLength - ALLOWED_PLACEMENT_AREAS = %w[sidebar_left sidebar_left_2 sidebar_right feed_first feed_second feed_third post_sidebar post_comments].freeze + ALLOWED_PLACEMENT_AREAS = %w[sidebar_left sidebar_left_2 sidebar_right feed_first feed_second feed_third home_hero post_sidebar post_comments].freeze # rubocop:enable Layout/LineLength ALLOWED_PLACEMENT_AREAS_HUMAN_READABLE = ["Sidebar Left (First Position)", "Sidebar Left (Second Position)", @@ -14,6 +14,7 @@ class DisplayAd < ApplicationRecord "Home Feed First", "Home Feed Second", "Home Feed Third", + "Home Hero", "Sidebar Right (Individual Post)", "Below the comment section"].freeze @@ -35,6 +36,7 @@ class DisplayAd < ApplicationRecord validates :body_markdown, presence: true validates :organization, presence: true, if: :community? validate :validate_tag + validate :validate_in_house_hero_ads before_save :process_markdown after_save :generate_display_ad_name @@ -96,6 +98,12 @@ class DisplayAd < ApplicationRecord validate_tag_name(tag_list) end + def validate_in_house_hero_ads + return unless placement_area == "home_hero" && type_of != "in_house" + + errors.add(:type_of, "must be in_house if display ad is a Home Hero") + end + def audience_segment_type=(type) self.audience_segment = if type.blank? nil diff --git a/app/views/articles/index.html.erb b/app/views/articles/index.html.erb index 717a3e7e7..a1d992a53 100644 --- a/app/views/articles/index.html.erb +++ b/app/views/articles/index.html.erb @@ -26,6 +26,9 @@ <%= javascript_packs_with_chunks_tag "homePage", defer: true %> <% cache(release_adjusted_cache_key("main-stories-index-#{params}-#{user_signed_in?}"), expires_in: 90.seconds) do %> + <% if @hero_display_ad && FeatureFlag.enabled?(:hero_billboard) %> + <%= render partial: "shared/display_ad", locals: { display_ad: @hero_display_ad, data_context_type: DisplayAdEvent::CONTEXT_TYPE_HOME } %> + <% end %>