[feature] Prettier embeds for images

[kouya]

Is your feature request related to a problem ?

When linking to a post containing an image on GTS from for example discord, it only shows a tiny thumbnail with the text. Would be great to have a larger cover image.

Came up in a discussion via https://blobfox.coffee/@andre_601/112106957644568500

Describe the solution you'd like.

Adding <meta content="summary_large_image" property="twitter:card"> to the og meta tags would do that.

I have added it to the web/page_ogmeta.tmpl and seems to do what it should. Even without images it should be harmless (famous last words). Added it directly below <meta property="og:image" content="{{- .Image -}}"> although not sure it's the correct place you want it to be.

Describe alternatives you've considered.

None

Additional context.

I have an instance with the changed page template running at https://icy.arcticfluff.eu/@arcticfoxbot/statuses/01HS31E8146A8WKFB3SCXP3MP9 if you want to see examples.

[tsmethurst]

Ah thanks for looking into it :) Seems like something we can easily add!

[daenney]

It's a bit tricky, because of how the Twitter card does things. You should provide one of:

• summary: The Summary Card can be used for many kinds of web content, from blog posts and news articles, to products and restaurants. It is designed to give the reader a preview of the content before clicking through to your website.
• summary_large_image: The Summary Card with Large Image features a large, full-width prominent image alongside a tweet. It is designed to give the reader a rich photo experience, and clicking on the image brings the user to your website.

However, there's no real guidance on which one to use when. For example, if a single image is attached, summary_large_image makes probably the most sense. Multiple images though, and it's not really clear what to do. I suppose the one obvious one is on the absence of any image, then at least use summary.

The other tricky bit for me is like, if I were to include a photo I probably do want the large experience. But if it's some screenshot of an app, that's probably meant in addition to provide context on the post but not the primary focus so summary_large_image would feel wrong when embedding.

[kouya]

It's probably hard to have some logic that picks the one a user wants. Almost all software seems to use the large_image one. Mastodon as well, when looking at their generated html. At least I have never seen the other card there.

But even an app screenshot would be fine though or why not? You would be able to easier see what the linked post is about vs having a tiny thumbnail and having to go to the page itself to see it larger.

Oh I see, Mastodon uses the card summary for text only posts. And the summary_large_image one for image posts. I feel that is the best approach to it maybe?