The Content Slideshow widget highlights blog posts, calendar events, and forum topics. This presentation of content titles and text can often be enhanced by allowing the widget to display an image from the content. To ensure that these images are displayed as expected, there are three behaviors of the Content Slideshow widget to be aware of: image scaling, image size, and image selection.
Sections in this article:
Image scaling
Images displayed in the Content Slideshow widget will be scaled as large as possible without stretching the image. If the image proportions differ from the element, it is cropped vertically or horizontally so that no empty space remains.
Images are displayed with minimal cropping if their proportions are similar to the slideshow's display area.
The size of the display area can vary based on:
- How many columns the slideshow occupies
- The selected layout
- The widget's height
- CSS that may directly modify the size of the widget
| Layout | Above Content | Beside Content | Behind Content |
|---|---|---|---|
|
Three column width |
1100 x 200 (use a height of auto) |
440 x widget height | 1100 x widget height |
|
Two column width
|
860 x 200 (use a height of auto) |
344 x widget height | 860 x widget height |
|
Middle column width
|
620 x 200 (use a height of auto) |
248 x widget height | 620 x widget height |
|
Three column width with fullwidth class |
N/A | N/A | 2600 x widget height |
Identifying the slideshow's display area
To identify the exact size of the display area:
- Add a Content Slideshow widget to a page. Select a source channel that contains content that contains an image. After modifying other options and layout settings, publish the page.
- Use the browser's inspect tool on the image. The image size will be set for the HTML element with the class
ig-carousel-pane-container-imgwhen using Behind Content and Beside Content image layouts. If the slideshow is in the Behind Image layout, identify the HTML element with the class:ig-carousel-pane.
Example of scaling
If the digital workplace uses a Content Slideshow widget with a display size of 860 x 140, an image can be 860 x 140, 1720 x 280, or 430 x 120, and no cropping will occur. However, if the image is a JPEG or the scaling is too extreme, image artifacts and blurring can occur.
Responsive behavior
As the width of a screen becomes smaller, the sides of an image are cropped while its height is maintained. This results in the slideshow featuring the center of the image more prominently. If tablet or mobile usage is standard in your organization, use images that feature the subject close to the center of the image.
At lower screen sizes (less than 750px), slideshows set to show the image beside content switch to show the image above the content.
Image Size
The Content Slideshow widget will use the dimensions of the original image. Editing the size of an image that has already been embedded into the WYSIWYG editor will not impact how it is displayed in the slideshow. Use a third-party tool such as MS Paint, Photoshop, or GIMP to resize or crop the image, and then embed this edited image in the content.
It is possible to manipulate the image in your content without impacting its slideshow appearance, which includes setting the image's size to 0 x 0 so it is not visible in the content but will appear in the slideshow.
Image Selection
The Content Slideshow widget always displays the content's feature image, if available, followed by the first image in the content. See Feature image for information on which feature image is displayed depending on the widget's configuration.
Since resizing an image in the WYSIWYG editor does not impact how the image is displayed in the slideshow, making the first image in an article 0 x 0 provides a way to have the slide show use an image that may not be ideal for the formatting of the content itself.
Image only slideshow
Consider using the Photos in Folder widget and its Slideshow Layout option to create a slideshow that only displays images.