Setting Properties of the Banner Widget

Basic

• Widget Label: Label of a widget, which is displayed on the advanced page.
• Widget Name: Name of a widget, which is the unique identifier of the widget on the page.

Position

• Left: Left margin of the widget in the canvas. Unit: px.
• Top: Top margin of the widget in the canvas. Unit: px.
• Layout Width: Width of the widget. Unit: px.
• Layout Height: Height of the widget. Unit: px.
• Stacking Order: Order of the widget among others. The default value is 1. The widget with the largest value is on the top. If you want to move a widget to the bottom of a stack, set the parameter to 0.
• Auto Height: whether the widget height changes with the width.
• open: If this option is selected, the page adaptation function is displayed in the lower part.
• Page Adapter: Select open to enable height adaptation for the widget. This property enables the position of other widgets below the page to be automatically adjusted based on the height of the widget. One page supports only one widget.

Border

Border of the widget. Options: Full and Corner.

• Full border
  • Style: Style of the widget border. Options: Solid, Dotted, Dashed, and Double.
  • Width: Border width, in pixels.
  • Color: color of the widget border.
  • Radius: radian of the four corners of the widget border, in pixels.
• Corner
  • Width: Border width, in pixels.
  • Length: Border length, in pixels.
  • Color: color of the widget border.
  • Radius: radian of the four corners of the widget border, in pixels.
  • Padding: Spacing between the widget border and the chart, in pixels.

Background

• Style: Background style. Options: Normal, Center, and Stretch.
• Image URL: Add images for this widget. The image can be in JPG, JPEG, PNG, or GIF format, and the image size cannot exceed 50 MB. The suggested image size is 800 x 800.
• Color: Background color of the widget.

Custom Configuration List

Custom config list displays the custom properties of a widget.

Image Source Setting

Whether the image source is from an OBS connector.

• If you select Use Connector, the data is obtained from an OBS connector. If there are too many images in the connector, the image reading may be slow. When the page is packaged, the image address is an absolute address. After the page is packaged and installed, the image address is unavailable. In this case, you need to upload and configure the image again.
• If Use Connector is not selected, the image source is obtained from the platform API. After an image is selected, the image ID is stored. The image is packaged together with the application on the page. After the new environment is installed, you do not need to upload the configuration again.

Connector Setting

• Choose Connector: Select an OBS connector with the storage function. You can query and upload images only after the connector is configured. For details about how to configure a connector, see Interconnecting with OBS Instances.
• Choose Bucket: Select the bucket of the connector.

Advanced Settings

In the advanced settings, you can set the rotation duration and switchover mode.

Figure 2 Setting

• Config Banner
  • Switch Direction: The rotation style of ad images can be switched between horizontal scrolling, lower right corner scrolling, and vertical scrolling.
  • Autoplays On Loading: Whether to enable automatic rotation. After this function is enabled, you can set the image rotation interval (no more than 24 seconds).
  • Toggle: Image switch mode, such as fade-out and push-out.
  • Positioning Mark: Pagination icon style.
• Manage Images: You can manage images and configure redirection links for images.
  • Click the add button. On the My Pictures tab page, move the cursor to a folder and click to create a folder or click to delete a folder. Click the button to upload an image in JPG, JPEG, PNG, or GIF format. The size of each image cannot exceed 1 MB. The recommended image size is 800 x 800 pixels. On the Network Pictures tab page, you can enter the image address to obtain the image.
  • Select an image and click to delete it.
  • Click to edit an image redirection link.

Related Documents

The banner widget can automatically switch images and supports adding hyperlinks. You can click an image to visit a specified website. For details, see Implementing Image Display and URL Redirection with the Banner Widget on Advanced Pages.