To use this layout you need to have Atlas version 3.0 or higher. Please speak to your CSM if you need to arrange an update.
In this article:
Hero Carousel Layout
In Focus web parts have a number of layouts available to display content within the web part in different formats. These can be found in the third panel of the configuration settings when editing an In Focus web part. The default results layout is Carousel, where results will be displayed as tiles in a single line, with the tiles scrolling through if there are more results than can be displayed in the space available. To switch to the Hero Carousel choose it by editing the web part and choosing it in the 3rd page of options:
Changing layout to the Hero Carousel will enable a full-width image to appear within the page, where users can scroll left or right using the arrows, and after a pre-defined period of time the display will automatically scroll so new content appears to the user. This is a very engaging way to visualise content within your Atlas page.
There are a number of options for configuring the component and the display of the image and text. Importantly, you are able to select Two Tiles, which will show two images across the full width of the page rather than just one. See an example below using Two Tiles:
Other than number of tiles there are several options you can set:
- Show/hide the title so only the image is displayed
- Show/hide the shadow gradient - which removes vignette around the outside of the image
- Show/hide the navigation controls (left or right arrows)
- Turn infinite scrolling on/off (whether the last image is reached),
- Turn auto play on/off
- Set the number of seconds the carousel stays on each item
- Turn pause on hover on/off (control whether movement is paused while hovering the mouse).
The Visual Tiles layout for In Focus supports the following Atlas content types: All Page types (Landing, Knowledge, Location, News), Documents, External Insights, Events, Spotlights.
It does not support FAQs or People.
Hero Carousel Image Aspect Ratio Sizes
Please note: Images are dynamically rescaled by SharePoint depending on the users browser window size. Larger displays will usually produce a taller image.
For one full width image, the aspect ratio is 8:3
We would not advise to use square images here as the images will automatically fill the full width of the web part - which in this case is full screen. Banner sized images should be utilised here. The larger the users display is the taller the image will be, as the image fills the full width, a smaller display will chop off the top and bottom of the image if needed.
Two images: the aspect ratio is 4:3
Almost square images, allowing for more flexibility for imagery.
Mobile: rescaled to 1:1
Square images used here.