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.

[jponch]

I met with @irinaz and talked through some possible design solutions for the problem of the featured news item image on the homepage. A quick summary of what we discussed is as follows:

• Authors/editors of news items don't always have a great deal of time to find, source, and prepare great "feature" images for news items. Therefore, if we can reduce that burden, it's likely helpful.
• Perhaps the best solution would be to only display the news image on the actual detail page for the news story. This would allow for a single format to work, and the image would only be seen in the context of the story.
• We therefore need a way to feature a news item on the homepage that doesn't require an image.

I created a few quick examples of how you might approach this. These are attached below, and also available in this Figma file.

Featured news with a single item, no image

Featured news with a single item, no image, but higher priority/contrast

Featured news with multiple items

I hope these are helpful :)

[irinaz]

@jenlampton , here is my understanding of next steps

• make news image not requried
• change display on home page to have two recent news

- change display on /news page