Images added to Internal Communication tiles displayed in the carousel component are zoomed/cropped to fill the available size of the tile. The image aspect ratio is preserved (the image is not stretched or squeezed).
The display size of each carousel tile varies according to screen size. As the tiles change size, the image is resized. Displayed tile images are square.
- Wider images are zoomed or reduced to fit the space, cropping the sides of the image so that it fills the tile.
- Narrower images are zoomed or reduced to fit the space, cropping the top and bottom of the image so that it fills the tile.
Image specifications
To avoid resolution or cropping issues, we recommend the following specifications for your image:
- Use a square or nearly-square image. Wider/narrower images are cropped to display as a square image.
- Use a minimum image size of 358 by 358 pixels. Larger images are reduced in size to fit the space.
Show title in tile
When the Internal Communication process has Show Title in Tile selected, the image is slightly cropped top and bottom, and the title card masks the bottom part of the image. The title card expands when hovered.
We recommend that you do not embed text in your images. Text or other information at the bottom of the image might be hidden by the expanding title card. Additionally, text embedded in images is not suitable for assistive technologies such as screen readers. If you do use text in your images, ensure that the text is repeated in the tile title.
If you have information in your image that must be displayed when the title card is expanded, ensure you place this in the top part of the image. Use image editing software to resize, crop, or add white space around your image as appropriate.
The image below shows the parts of the image that are masked or cropped by the title card.
If you do not enable Show Title in Tile but the communication has a detail page, the bottom part of the image is still masked when the user hovers over the tile. The expanding card reveals an arrow, indicating that the tile is a link that can be selected.