bluesky-social / social-app

The Bluesky Social application for Web, iOS, and Android
https://bsky.app
MIT License
9.61k stars 1.23k forks source link

Show all images in the preview of a shared link #1564

Open MithraicMagic opened 1 year ago

MithraicMagic commented 1 year ago

Is your feature request related to a problem? Please describe.

There's no real problem here, the sharing feature of Bluesky works well in a way that it does always show a preview image when you share something on, say, Telegram. The only issue is that when there are multiple images in a post, it just shows the first one.

Describe the solution you'd like

For Twitter there was a solution for this where you could use vxtwitter instead of twitter in the links, and it would generate a preview containing all the images in the post. This would be a great feature in Bluesky as well.

Describe alternatives you've considered

Twitter at some point also implemented that you could scroll through the images in the preview of the shared link (in Telegram at least), but you'd have to look real close to see when there were more images available. I think in this case having all of them compiled into the one preview image would make more sense.

Additional context

An example of four images from a tweet compiled into one preview for the link using vxtwitter: image

bnewbold commented 1 year ago

Cards are generated in the bskyweb/ code in this repo, so moved the issue over.

Combining multiple images in to a single image for social cards might be a bit of a lift, I'm not certain.

My vague memory when setting up the cards originally is that multiple images are allowed in twitter and opengraph schemas, and worked as expected on some platforms, but behavior was less consistent than just plopping in the first image.

HeyItsLollie commented 2 months ago

Just wanted to note that ideally, there should be no need to automatically combine multiple images into one for a preview. Adding multiple images to Open Graph objects should be as simple as adding multiple "og:image" tags to the header, one tag per image. See: The Open Graph Protocol - Array

I can only speak from personal experience, but Telegram and Discord both correctly render links with multiple og:image tags.