Chat inline link: show URL preview

[bradlegge]

Chat inline link: when a link is posted to a chat, show URL preview as per design

• Design: all ready

[bradlegge]

Screen URL:
https://app.zeplin.io/project.html#pid=573bea252e3e73497df13165&sid=57464248aa4f5c031fffa529

[ara4n]

So we have some fairly significant issues with the design/implementation now it's landed; summarising from the chatroom here so things don't get lost:

• We've lost the ability to hide/show previews. Suggestion is to put it into the context menu, which would be fine for me - or to make the new link icon a toggle perhaps.
• The previews take up way too much vertical whitespace, especially in rooms with lots of URLs (e.g. #vector-spam:matrix.org) - we need a rethink of how to handle this
• The whitespace has regressed in the issue description causing descriptions to explode in vertical space usage. It needs to be white-space: normal or something.
• Image previews for HTML URLs now take you straight to the URL. This is fine, but Image previews for Image URLs are confused as they have a "Read more" link, and the image is loaded directly rather than in a prettier lightbox, which seems like a step backwards.

On the plus side, the aesthetics are looking really nice :)

[stefanpearson]

We can amend this. However, the preview image needs more thought. I gather we want small thumbs in some conditions (Github etc), and larger images for editorial-based articles (as per the visuals). This is tricky with the data we have. If we're lucky, we can get the open-graph type and render large images under certain conditions (e.g. article). Otherwise, we're going to have to normalise them and show a small thumb, which may change the layout (columns instead of rows).

Thoughts?

Open-graph types: https://developers.facebook.com/docs/reference/opengraph/

[ara4n]

For now I think we have no choice but to go for small thumbs, unless the
URL is primarily image-related (e.g. an image URL). We could try to do
some heuristics to decide what OG types (or other metadata) should
produce big thumbnails, but this feels fairly fragile to me. If it'd be
possible to have a more compact layout that we use by default it would
be appreciated. Sorry for the additional work.

On 19/07/2016 11:31, Stefan Pearson wrote:

We can amend this. However, the preview image needs more thought. I
gather we want small thumbs in some conditions (Github etc), and
larger images for editorial-based articles (as per the visuals). This
is tricky with the data we have. If we're lucky, we can get the
open-graph type and render large images under certain conditions
(e.g. article). Otherwise, we're going to have to normalise them and
show a small thumb, which may change the layout (columns instead of
rows).

Thoughts?

Open-graph types:
https://developers.facebook.com/docs/reference/opengraph/

— You are receiving this because you commented. Reply to this email
directly, view it on GitHub
#1751 (comment),

or mute the thread
https://github.com/notifications/unsubscribe-auth/ABO_vYGrN8PWuR7k7WynkBLv2Q9JbyIjks5qXKeKgaJpZM4JKU_J.

[ara4n]

The updated design at https://zpl.io/oPpjO is signed off and ready to go. The implementation needs to consider the 4 bulletpoints which were mentioned in the first comment.

[prinzpi]

Hi,
I would like to know if there are any updates especially the bulletpoint 4 I'm interested in.
I have attached two screenshots (Slack / Riot), it would be great if the URL preview inside the Riot rooms looks similar as those from Slack.
In the screenshots the messages are forwarded with Matterbridge but it doesn't make a different, also by posting the URL without a bot there won't be any previews.

Thanks.

EDIT: Seems it was just a homeserver config "issue" - it's working :)

[turt2live]

This seems implemented.

[lukebarnard1]

I'm not sure if we ever considered

the 4 bulletpoints which were mentioned in the first comment.

[lukebarnard1]

I most certainly did not unassign wmragg...

[makedir]

Is it possible to load image previews in chat if someone posts urls? I cant find an option for this in the riot client.

[ordinarygulp]

Is it possible to load image previews in chat if someone posts urls? I cant find an option for this in the riot client.

Am looking for this functionality as well. Also for animated gifs

[MadLittleMods]

Closing as URL previews work. Would be better to track improvements as separate issues.

[MartinDelille]

I don't have youtube preview on my server. Is there a config to enable ?