Featured Image for News content type needs definition for dimensions, ratio and display

[irinaz]

News content type has one "Featured Image" field that is used in three settings

• News item page
• News index page
• Home page
  We need to provide clear instructions for content editors what is size and ratio of the image that will work well in all three settings.

Figma design

[herbdool]

So that @irinaz can publish a blog post, I've made a change to the news_home image style on live and also did the same in a PR linked here.

The news_home style is only used in the Latest News block on the front page. On individual news/blog posts there is no image style applied.

I ended up making the ratio 4:3 (800x600) because it's close to the ratio of that in Figma (which is something like 416x320). The scale is brought down to 800 wide and then cropped to 600 height. The actual ratio doesn't appear that way in the Latest News block since the image portion is set to be 1/3 the width of that block on large screens and the image is set with object-fit: cover so it gets enlarged until the image covers the entire 1/3. And this will depend on how long the summary text is in the other 2/3.

Perhaps we should add object-position: top left; to match the cropping in the image style which focuses on that. Right now when the image is enlarged to fill the 1/3 it will overflow on both left and right.

At any rate, the actual implementation on live is more dynamic than what is in Figma (a good thing) so things may need to be further tweaked, depending on feedback from @jenlampton or @wesruv on what was intended here.

[herbdool]

I added object-position: top left; to the PR. Won't see it on live until this PR gets merged.

[irinaz]

@herbdool , thank you for making this change! This is already much better than what we had before.
@jenlampton , I am reopening this ticket so I can continue working on the following task in the issue

• We need to provide clear instructions for content editors what is size and ratio of the image that will work well in all three settings.