Important Links

Overview

The goal of this update is to improve how images are displayed within channels. The following is a summary of the proposed updates:

• When multiple images are uploaded, display in a gallery format, rather than in attachment cards (as in current)

• Updates to minimum and maximum dimensions for images

Open

Single Image

Expanded

When a single image is uploaded, the image displays without an image file name

Open

Hover State and Actions

When hovering over the image, the collapse button and the copy/download buttons appear

Collapsed

If the Default Appearance of images setting is set to Collapsed, then the image is shown in its collapsed form. Clicking on the image name will expand the image.

Minimums and Maximums for single image display

The minimums and maximums proposed here are changes from the current display for single images. These changes are proposed to reduce the amount of screen real estate that images can take up in a channel and to allow for a more balanced, scannable channel view.

• Max height: 240px

• Min height: 48px

• Max width: 700px

• Min width: 48px

Aspect ratio

For a single image, display it in its native aspect ratio up to the maximums and minimums outlined above.

Images below 48px

If an image is less than the minimum height or width, the image is centered within a container that abides by the minimum height and width.

Multiple Images

Expanded

When 2+ images are uploaded in one message, the images display in a gallery format. A title X images displays above the gallery and acts as a control to expand or collapse the images.

Downloading all images in the series

When there are multiple images, users can download all at once, by clicking ‘Download all’ which displays next to the image count/collapse button.

NOTE: this button only displays when hovering over the message.

Hover state for individual images

Collapsed

When the X images title is clicked, the gallery is hidden and displayed in the collapsed state. Clicking this title again will open the gallery.

Wrapping

Images in the gallery will display in multiple rows if required. Depending on the window width, images in the gallery may need to stack more or move up to the previous row when there is room.

Minimums and Maximums for multiple-image gallery display

The image with the largest height determines the overall height of the image containers up to a maximum height of 240px.

• Max height: 240px

• Min height: 48px

• Max width: 700px

• Min width: 48px

Aspect ratios

• Horiztonal images are cropped to fill a 4:3 ratio container, scaled to fill the container and centered - don’t squish or change the image’s native proportions

• Vertical images are cropped to fill a 3:4 ratio container, scaled to fill the container and centered- don’t squish or change the image’s native proportions

• Square images remain square.

Small-resolution images

If an image’s native resolution is smaller than the gallery row height, it is scaled with its native aspect ratio and centered within a container of a height that matches the rest of the gallery row. The width is determined by the image’s width (with the minimum and maximum width set above).