Image Carousel

The Image Carousel widget adds to the portal an image carousel with banners that a user can switch. You can enable automatic scrolling of images and add a link to be opened in a new tab when a user clicks a banner.

Upload banners

---

To upload a banner, complete the following steps:

1. Navigate to System Settings → All Tables.
2. Find the Carousel Image (carousel_image) table in the list, open its record.
3. Click Create Record on the table form.
4. Fill in the required fields and click Save or Save and exit.

Carousel Image form fields

Field	Mandatory	Description
Name	Y	Specify the banner title.
Order	Y	Specify the banner order in the queue. The higher the order, the later the banner is in the displaying queue. By default, the system sets the order equal to The highest order among existing records + 10.
Description	N	Specify the banner description. If the banner fails to load, the description is displayed instead.
Active	N	Select the checkbox to make the banner active. An active banner is displayed on the portal.
Link	Y	Specify a link to be opened in a new tab when a user clicks on the banner.
Desktop image	Y	Click to open the attachments widget, select the image to be displayed in the desktop version of the portal, and upload it. Recommended size and format: JPG, 2640x600px with 1832x600px content area.
Mobile image	Y	Click to open the attachments widget, select the image to be displayed in the mobile version of the portal, and upload it. Recommended size and format: JPG, 1886x600px with 902x472px content area.

After adding the widget to the portal, you can continue to add and delete images from the Carousel Image table, and the banners will be displayed in the widget or deleted from it.

Add widget to portal

---

tip

Role required: admin.

By default, the widget is not added to the portal. To dispaly it, complete the following steps:

1. Select the page: find the main portal page or another page where you need to place the banners. To do so, navigate to Portal Structure → Pages and open the required page form. You can open the default main portal page via the following link: {Your instance URL}/record/page/158963509316360442.

2. Define the container that will contain the banners. To do so, on the page form find the Page Container related list. Open an existing container record or create a page container if there is none.

3. Create the page row that will contain the banners. To do so, on the created or opened container form find the Page Row related list. Click New and set the value of the Order field to 1. This is required for the banner row to always be on top of the page. Ensure the the Active checkbox is selected and click Save. Save the created page row ID.

4. Create the page column that will contain the banners. To do so, on the created page row form find the Page Columns related list and click New. Ensure that the Active checkbox is selected on the page column form and click Save.

5. Create a widget instance. To do so, use on of the following methods:

   • On the form of the page column created on step 5, find the Widget Instances related list and click New.
   • Navigate to Portal Structure → Widget Instances and click New.
   • Navigate to Portal Structure → Widgets, find the Image Carousel widget, open its form and in the Widget Instances related list click New.

6. Specify the following values in the Widget Instances form fields:

   Field	Value
   Widget	Image Carousel
   Page column	Specify the column created on step 5. Use the ID of the page row created on step 4 for search in the dictionary.
   Schema option values	Specify if the images should be scrolled automatically every 7 seconds. The scrolling is endless: when all banners are showed, the system shows the first banner again. If the user hovers over a banner, the scrolling is paused until the user moves the pointer from the banner. Enable automatic scroll: {"timerOn":true} Disable automatic scroll: {"timerOn":false}
   Active	Yes
   Public	Yes
   Order	Any

7. Click Save or Save and exit.

Widget interface

---

1. A banner added to the Carousel Image table. When clicked, the link specified for this banner opens in a new tab.
2. Side switches. They are only displayed in the desktop version of the portal when a user hovers over a banner.
3. The buttons for switching banners. Their number equals the number of active banners. The buttons are displayed in both mobile and desktop versions of the portal, but in the mobile version this element only shows the number of banners and is not clickable.

Mobile version of the widget:

The users can switch the banners by:

• Clicking the side switches (desktop)
• Clicking the buttons in the lower part of the widget (desktop)
• Dragging (desktop)
• Swiping (mobile)

If automatic scrolling is enabled, it works in both desktop and mobile versions.