From 21cd5a3f72e0b56c9f6bfbd5cd00d49a1fb6ba10 Mon Sep 17 00:00:00 2001
From: Julianna Tetreault <32834804+juliannatetreault@users.noreply.github.com>
Date: Mon, 20 Apr 2020 16:01:08 -0600
Subject: [PATCH] [deploy] Replace Cover Image <div> Tags With <img> Tags
 (#7396)

* Replace cover image div tag with img tag in articles/show
  * Make cover images more semantic with img tag and src
  * Keep img styling for now

* Replace divs with inline img in _main_stories_feed.html.erb
  * Remove div in favor img tag to make more semantic
  * Add extra line at file end in _main_stories_feed.html.erb
  * Reword img alt text in articles/show.html.erb

* Remove unnecessary styling for cover images from stylesheets
  * Remove background image styling for main feed article
  * Remove background image styling for article show page
  * Adjust padding for main feed article
  * Adjust padding for article show page
  * Add 100% width to main feed article

* Adjust styling for article show pages
  * Add height to article show CSS
  * Adjust article show padding to be 0
  * Revert div to img change in _main_stories_feed.html.erb
  * Revert styling changes for articles.scss

* Add original styling back to article-show.scss
  * Add original styling for article show pages back
  * Hopefully avoid conflicts due to caching by keeping code

* Adjust team delightful TODO to be more explicit and readily accessible

* Update app/assets/stylesheets/article-show.scss

Co-authored-by: Ben Halpern <bendhalpern@gmail.com>
---
 app/assets/stylesheets/article-show.scss      | 9 +++++++--
 app/views/articles/show.html.erb              | 3 +--
 app/views/stories/_main_stories_feed.html.erb | 2 +-
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/assets/stylesheets/article-show.scss b/app/assets/stylesheets/article-show.scss
index c7e758003..d1c729938 100644
--- a/app/assets/stylesheets/article-show.scss
+++ b/app/assets/stylesheets/article-show.scss
@@ -53,15 +53,20 @@ article {
   padding: 0 0;
   position: relative;
 
+  /* TODO[team-delightful]: Remove background and background-size a few days post merge to avoid caching conflicts */
   .image {
     position: relative;
     width: 100%;
     margin: auto;
     max-width: 1024px;
+    z-index: 2;
     background: transparent no-repeat center center;
     background-size: cover;
-    z-index: 2;
-    padding-top: 42%;
+    height: 42vw;
+
+    @media screen and (min-width: 880px) {
+      height: 370px;
+    }
 
     @media screen and (min-width: 950px) {
       border-top-left-radius: 2px;
diff --git a/app/views/articles/show.html.erb b/app/views/articles/show.html.erb
index 5707563a0..e6a5f22fd 100644
--- a/app/views/articles/show.html.erb
+++ b/app/views/articles/show.html.erb
@@ -131,8 +131,7 @@
         <% if @article.video.present? %>
           <%= render "articles/video_player", meta_tags: true, article: @article %>
         <% elsif @article.main_image.present? %>
-          <div class="image image-final" style="background-color:<%= @article.main_image_background_hex_color %>;background-image:url(<%= cloud_cover_url(@article.main_image) %>)">
-          </div>
+          <img src="<%= cloud_cover_url(@article.main_image) %>" class="image image-final" style="background-color:<%= @article.main_image_background_hex_color %>;" />
         <% else %>
           <div class="blank-space"></div>
         <% end %>
diff --git a/app/views/stories/_main_stories_feed.html.erb b/app/views/stories/_main_stories_feed.html.erb
index 3400c23b5..fb84647a1 100644
--- a/app/views/stories/_main_stories_feed.html.erb
+++ b/app/views/stories/_main_stories_feed.html.erb
@@ -72,4 +72,4 @@
     <% end %>
     <div class="single-article-small-pic" id="article-index-hidden-div" style="display:none"></div>
   <% end %>
-</div>
\ No newline at end of file
+</div>