Twitter Card Images for Articles Are Occasionally Positioned Inconsistently

[jessleenyc]

Describe the bug
Sometimes, twitter card images aren't centered properly when the social card unfurls. This is likely happening on Twitter's end but we can also fix this if we crop the images ourselves through cloudinary.

[michael-tharrington]

I spoke with @healeycodes who said it was cool to share a bit of info here...

Steps to reproduce the behavior

1. Copy this URL: https://dev.to/healeycodes/solving-puzzles-with-high-performance-javascript-3o4k
2. Go here: https://cards-dev.twitter.com/validator
3. Run the URL in the card reader to see that it's left-aligned.

Expected behavior
Article cover images should always appear centered when being transformed into social card images.

Screenshots

Here's a picture of the left-aligned social image:

Here's another picture of a separate post by the same author with a similar cover image which centered correctly:

This post was originally left-aligned too - https://dev.to/healeycodes/my-experience-with-pair-programming-4c0a but I used a manual override to fix it.

Note: I don't think it necessarily only happens to this author; but, these are known examples. If I see it happen to another author, I'll report back.

[michael-tharrington]

Just found another example of this here:

[henrikwirth]

Have the same happening to my articles. They are aligned to right side instead of center.

I guess there are two options to that:

• Either you preprocess the image and give the user a cropping choice (focal point).
• Or, you give an option to upload an extra image for twitter. Then the use can make sure it has the right 2:1 ratio.

The second one would probably much easier to implement.

[brentonhouse]

Another (possibly easier) option is to allow user to upload twitter card image. The aspect ratio that you use for headers on dev.to is different than most of the social media images to that is why it is appearing odd.

[maud-lv]

Hello! This also affects my posts.
Here an example on Twitter

And on LinkedIn:

I second what brentonhouse said: uploading social media cards in our dev.to publications would probably solve this.

[kay-is]

Seems like all the social media platforms (Twitter, Facebook, LinkedIn) use 19:10
only dev.to uses 12:5

So maybe dev.to should allow 19:10 for future posts?

[justin-schroeder]

Having the same issue on one of my recent posts.

Personally I would love to see support for additional meta tags in the front matter. That way you could actually have a different cover image and social image. Would be nice to see support for:

og:image
twitter:image
twitter:card (defaults to summary_large_image, but would be nice to specify)

[viclafouch]

Having the same issue on my post published today (https://dev.to/viclafouch/build-a-complete-modal-component-with-react-hooks-2fk8)

Preview on Linkedin

[kay-is]

Update: I found a social media manager (e-clincher) that allows me to extract images from a post, stuff I post with that manager doesn't fit 100% either, but at least its centered now.

[AdrianSandu]

I can also confirm the issue happening on Discord, Slack, and LinkedIn preview. For Twitter, I am usually creating my own separate image to avoid the issue.

For example, this is how my latest post on DEV renders in these three places:

Discord preview

Slack preview

LinkedIn preview

[kay-is]

Anything we can do here?
This is rather irritating.

[cmgorton]

@jessleenyc any thoughts on this feature request? Do you think this should be labelled as a potential RFC?

[cmgorton]

Forem team needs to investigate:

• how often is this happening?
• what % of users are experiencing this issue?
• is this a front end or back end issue?
• is there tools available already that we can use to help with this issue?

[cmgorton]

Since this issue has gone stale I am going to close it. If anyone would like to still implement this feature let me know and we can turn this issue into a discussion

[michael-tharrington]

I wanted to reopen this one as it's something I hear occasionally reported.