make feed image consistent with cover image (#17512)
* 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>
This commit is contained in:
Dwight Scott
GitHub
parent
58763c0b9d
commit
dbeb4a5aca
6 changed files with 67 additions and 36 deletions
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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? %>
|
||||
|
|
|
|||
|
|
@ -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|
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue