Important Links

Overview

Since Permalink Previews were released, an inconsistency in style has been introduced with link previews. The new UI style for Permalink Previews needs to be adopted for Link Previews.

In addition to that, we’re establishing new rules for images within link previews. See below for more details.

Open

UI Updates to Link Previews

• Link previews will now display within the same card style as permalink previews. The left bar UI element is also removed.

• Link previews will now follow the same standard width as permalink previews: 700px

• Site title is limited to 2 lines of text - truncate the remainder with ...

• Site description is limited to 2 lines of text - truncate the remainder with ...

Interactive area

• The entire card for the link should be clickable to open the link.

  • If users drag to select, it will not click the link

• Text within the card can still be selectable without registering the click (similar to how we’ve done this with messages)

Open

States

Default

The default state uses Elevation 1 with a 1px border with center-channel-color at 16%

Hover

The hover state uses Elevation 2 with a 1px border with center-channel-color at 24%

Active

The active state uses Elevation 1 with a 1px border with button-bg at 32%

Sample interaction

Link Preview Image Rules

Small Image Preview

Use the small image preview layout if:

• The provided image has an aspect ratio less than (but not equal to) 4:3

• The provided image is has a resolution below

layout switches to the small image preview on the right side rather than below. Small image previews are always cropped, scaled and centered within an 80px by 80px square.

Large Image Preview

If the provided image has an aspect ratio >= 4:3, the layout of the link preview displays the image below in a larger preview. The image should scale down and maintain its aspect ratio based on the max-width and height below.

• Max-width: 392px

• Max-height: 240px

Collapsing and expanding large image previews

Large image previews can be expanded or collapsed using the arrow that displays at the end of the site description.

Updated UI for this interaction shown below.

NOTE: the expanded state should honor the user’s preference for “Default Appearance of Image Previews”.

No image

When a web link does not have an image available, the link preview is displayed as below.

Removing a link preview from a message

When hovering over the link preview area, an x icon button appears to the left of the link preview. This appears only for the message author. Other users will not see this button. Clicking this will remove the link preview entirely from the message.

Image URL Previews

When an image URL is shared, Mattermost displays the image similarly to how we display single image attachments.

Image URL previews should maintain the original images aspect ratio while following the max-width and max-height.

• Max-width: 700px;

• Max-height: 240px

Image URL previews are collapsable in the same way as single image attachments.