Aspect ratio incorrect in article cards - MediumPosts component

[mjabbink]

@alisonjoseph edited 10/27
Update MediumPost component Images to be 16:9 aspect ratio at all breakpoints (mobile included)

---

@mjabbink commented on Fri Oct 08 2021

These new article images are not the correct aspect ratio.

https://medium.com/carbondesign/carbon-v11-beta-2-7d0aa4e732d1

current aspect ratio (incorrect)

expected aspect ratio

[mjabbink]

FYI @alisonjoseph

[mjabbink]

@vpicone This seems fresh of the press in the last day or two. Not sure what happened to affect the aspect ratio of the images?

[mjabbink]

https://www.carbondesignsystem.com/whats-happening/news-and-articles/#latest-news

images in below set are getting cropped from their original format.

[mjabbink]

@thyhmdo It looks like what is causing this is two different sizes for Medium articles. @jeanservaas what have we been using because we did not have this problem before.

The cards needs to have the same image size and the illustrations should be that same aspect ratio when we create them to avoid cropping or changing aspect ratios which is happening now.

All the latest ones in “Latest news” are getting cropped.

These have different aspect ratios

[vpicone]

@sstrubberg Any ideas? Looks like the aspect ratio is 'correct' at certain viewport widths.

[thyhmdo]

@mjabbink I changed it after the fact you mentioned that the ratio was incorrect. I'm not sure what size or certain aspect ratio it should be so I followed the background image suggestion on Medium "at least 1500px wide and 750px high, and maintaining a 2:1 width to height ratio" (that's why the bottom image was like that.

For the top image, I tried to match the size that Jeannie created for V11 images.

So, should I follow the aspect ratio / size on Gatsby or what dimension you'd suggest for this?

[mjabbink]

@thyhmdo I was under the impression we used 2:1 which would work for Medium but it sounds like @jeanservaas was using 16:9 as an aspect ration which will also work in Medium. I would prefer to stick with what have been using for several years now if it also works for Medium. 16:9 is a common aspect ration across most digital systems/platforms/experiences.

[mjabbink]

@vpicone @sstrubberg IN mobile the proportions/rules are wrong as well. The cards are now using square 1:1 aspect ratio for the image and it’s bleeding edge to edge. So it looks like several issues are going wrong both for desktop and then a different set of issues in mobile

The images below show v11 correct and the new issue in the live Carbon site.

.
Wrong proportion and bleeding to edges of screen

.
.
.
Correct proportion and using margins correctly

[mjabbink]

They seem to be displaying nicely in the theme demo site so maybe a Carbon site issue?
https://gatsby-theme-carbon-git-search-box-carbon-design-system.vercel.app/components/ArticleCard/

[mjabbink]

If it’s not clear this is a priority to solve. I suspect it’s a fairly easy problem to resolve given it used to be correct so please let’s use the dedicated dev hours for brand focused.

[alisonjoseph]

Added info to the top of the issue also, but this issue popped up when we swapped the Carbon website to use the medium post component. The component needs to be updated to display the images at a 16:9 aspect ratio.

Should be able to just add the Aspect ratio class names to the image in the component.

[sstrubberg]

hey ya'll sorry I've not be present in this conversation. Slackbot doesn't let me know when I've been mentioned in Github threads. Reviewing the PR now!