From dbeb4a5acab200fcde40963868dafab5809f4a98 Mon Sep 17 00:00:00 2001
From: Dwight Scott <dwight@forem.com>
Date: Thu, 19 May 2022 13:40:00 -0400
Subject: [PATCH] make feed image consistent with cover image (#17512)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* make feed image consistent with cover image

* small tweaks for the logged out view of the feed cover image`

* update feed cover image for logged in users

* update to reflect new cover image

* reverting to see if the build, builds?

* snapshot tests

* update spec to look for the right class

* too long by ONE character 121/120 🙄

* Update app/javascript/articles/components/ArticleCoverImage.jsx

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/views/articles/_single_story.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* Update app/views/articles/_single_story.html.erb

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>

* no need for the anchor tag to have a bg color

* update snapshot test expectations

* remove unnecessary span with hidden class

Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
---
 app/assets/stylesheets/views/article.scss     |  9 ++++
 .../__snapshots__/Article.test.jsx.snap       | 50 +++++++++++--------
 .../articles/components/ArticleCoverImage.jsx | 26 +++++++---
 app/views/articles/_single_story.html.erb     | 10 ++--
 app/views/stories/feeds/show.json.jbuilder    |  2 +-
 spec/requests/stories_index_spec.rb           |  6 ++-
 6 files changed, 67 insertions(+), 36 deletions(-)

diff --git a/app/assets/stylesheets/views/article.scss b/app/assets/stylesheets/views/article.scss
index 6255df646..11fec68f2 100644
--- a/app/assets/stylesheets/views/article.scss
+++ b/app/assets/stylesheets/views/article.scss
@@ -26,6 +26,15 @@
       object-fit: scale-down;
       width: 100%;
       height: 100%;
+
+      &__feed {
+        padding-top: 0;
+        padding-bottom: 0;
+        height: 100%;
+        width: 100%;
+        aspect-ratio: auto 650 / 275;
+        object-fit: scale-down;
+      }
     }
   }
 
diff --git a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
index b9f4e2fc7..e1c1427ee 100644
--- a/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
+++ b/app/javascript/articles/__tests__/__snapshots__/Article.test.jsx.snap
@@ -20,18 +20,23 @@ Object {
         <div
           role="presentation"
         >
-          <a
-            class="crayons-story__cover"
-            href="/some-post/path"
-            style="background-image: url(/images/10.png);"
-            title="Unbranded Home Loan Account"
+          <div
+            class="crayons-article__cover crayons-article__cover__image__feed"
           >
-            <span
-              class="hidden"
+            <a
+              class="crayons-article__cover__image__feed crayons-story__cover__image"
+              href="/some-post/path"
+              title="Unbranded Home Loan Account"
             >
-              Unbranded Home Loan Account
-            </span>
-          </a>
+              <img
+                alt="Unbranded Home Loan Account"
+                class="crayons-article__cover__image__feed"
+                height="275"
+                src="/images/10.png"
+                width="650"
+              />
+            </a>
+          </div>
           <div
             class="crayons-story__body"
           >
@@ -270,18 +275,23 @@ Object {
       <div
         role="presentation"
       >
-        <a
-          class="crayons-story__cover"
-          href="/some-post/path"
-          style="background-image: url(/images/10.png);"
-          title="Unbranded Home Loan Account"
+        <div
+          class="crayons-article__cover crayons-article__cover__image__feed"
         >
-          <span
-            class="hidden"
+          <a
+            class="crayons-article__cover__image__feed crayons-story__cover__image"
+            href="/some-post/path"
+            title="Unbranded Home Loan Account"
           >
-            Unbranded Home Loan Account
-          </span>
-        </a>
+            <img
+              alt="Unbranded Home Loan Account"
+              class="crayons-article__cover__image__feed"
+              height="275"
+              src="/images/10.png"
+              width="650"
+            />
+          </a>
+        </div>
         <div
           class="crayons-story__body"
         >
diff --git a/app/javascript/articles/components/ArticleCoverImage.jsx b/app/javascript/articles/components/ArticleCoverImage.jsx
index 40f08ffbf..ca3269113 100644
--- a/app/javascript/articles/components/ArticleCoverImage.jsx
+++ b/app/javascript/articles/components/ArticleCoverImage.jsx
@@ -3,14 +3,24 @@ import { articlePropTypes } from '../../common-prop-types';
 
 export const ArticleCoverImage = ({ article }) => {
   return (
-    <a
-      href={article.path}
-      className="crayons-story__cover"
-      title={article.title}
-      style={{ backgroundImage: `url(${article.main_image})` }}
-    >
-      <span class="hidden">{article.title}</span>
-    </a>
+    <div className="crayons-article__cover crayons-article__cover__image__feed">
+      <a
+        href={article.path}
+        className="crayons-article__cover__image__feed crayons-story__cover__image"
+        title={article.title}
+      >
+        <img
+          className="crayons-article__cover__image__feed"
+          src={article.main_image}
+          width="650"
+          height="275"
+          alt={article.title}
+          style={{
+            backgroundColor: `${article.main_image_background_hex_color}`,
+          }}
+        />
+      </a>
+    </div>
   );
 };
 
diff --git a/app/views/articles/_single_story.html.erb b/app/views/articles/_single_story.html.erb
index c90711183..cddde25b5 100644
--- a/app/views/articles/_single_story.html.erb
+++ b/app/views/articles/_single_story.html.erb
@@ -4,11 +4,11 @@
     <div id="featured-story-marker" data-featured-article="articles-<%= story.id %>"></div>
   <% end %>
   <% if featured == true || (feed_style_preference == "rich" && story.main_image.present?) %>
-    <a href="<%= story.path %>" title="<%= story.title %>" aria-label="article"
-      style="background-color: <%= story.main_image_background_hex_color %>; background-image: url(<%= cloud_cover_url(story.main_image) %>);"
-      class="crayons-story__cover crayons-story__cover__image">
-      <span class="hidden"><%= story.title %></span>
-    </a>
+    <div class="crayons-article__cover crayons-article__cover__image__feed">
+      <a href="<%= story.path %>" title="<%= story.title %>" aria-label="article" class="crayons-article__cover__image__feed crayons-story__cover__image">
+        <img src="<%= cloud_cover_url(story.main_image) %>" width="650" height="275" style="background-color:<%= story.main_image_background_hex_color %>;" class="crayons-article__cover__image__feed" alt="Cover image for <%= story.title %>">
+      </a>
+    </div>
   <% end %>
 
   <% if story.video.present? && story.video_thumbnail_url.present? %>
diff --git a/app/views/stories/feeds/show.json.jbuilder b/app/views/stories/feeds/show.json.jbuilder
index 409a666fb..9ba1b6570 100644
--- a/app/views/stories/feeds/show.json.jbuilder
+++ b/app/views/stories/feeds/show.json.jbuilder
@@ -6,7 +6,7 @@ article_attributes_to_include = %i[
 article_methods_to_include = %i[
   readable_publish_date flare_tag class_name
   cloudinary_video_url video_duration_in_minutes published_at_int
-  published_timestamp
+  published_timestamp main_image_background_hex_color
 ]
 
 json.array!(@stories) do |article|
diff --git a/spec/requests/stories_index_spec.rb b/spec/requests/stories_index_spec.rb
index efdef9996..4c29a2adf 100644
--- a/spec/requests/stories_index_spec.rb
+++ b/spec/requests/stories_index_spec.rb
@@ -174,7 +174,7 @@ RSpec.describe "StoriesIndex", type: :request do
 
       allow(Settings::UserExperience).to receive(:feed_style).and_return("basic")
       get "/"
-      expect(response.body.scan(/(?=class="crayons-story__cover crayons-story__cover__image)/).count).to be 1
+      expect(response.body.scan(/(?=class="crayons-article__cover crayons-article__cover__image__feed)/).count).to be 1
     end
 
     it "shows multiple cover images if rich feed style" do
@@ -182,7 +182,9 @@ RSpec.describe "StoriesIndex", type: :request do
 
       allow(Settings::UserExperience).to receive(:feed_style).and_return("rich")
       get "/"
-      expect(response.body.scan(/(?=class="crayons-story__cover crayons-story__cover__image)/).count).to be > 1
+      # rubocop:disable Layout/LineLength
+      expect(response.body.scan(/(?=class="crayons-article__cover crayons-article__cover__image__feed)/).count).to be > 1
+      # rubocop:enable Layout/LineLength
     end
 
     context "with campaign hero" do