Image List (Developer)

Image List (Developer)

Type Name

ImageList

Usage

This block can display one or more images in a horizontal listing format. It can be used for showing sponsor images.

Icon
Screenshots
Type
Content
Content Category
Images

About the Image List

The Image List block is used to display images.

Creating an Image List Block

To create an Image block, in the Venue Editor, click on "Add Blocks" button in the settings panel on the left, then choose "Image" under the Images Category.

image

Block Settings

The main setting of the Image block is the Add Image setting where you can insert your image(s). It is perfect for sponsors images which uploaded images are in a horizontal listing format.

With every image set, a hyperlink can be added. This hyperlink can be linked to a LivePage within the virtual event or a customised link set by you. Simply toggle "Open in New Window" if you want this site to be opened on a new tab.

image

JSON Config

Attributes

🗃️
Block Attributes

NameTypeDescriptionCommon to All
String

The cover image that you would want to set as default for the block. Eg: “https://files-myxp.s3-ap-southeast-1.amazonaws.com/livestream/default_background/Light_BG_1.png”

Yes
Boolean

Does not allow popup to occur when this field is true.

Yes
Object

Refer here.

Yes
Boolean

Only render background image when this field is true.

Yes
String

Sets the height of the block, only useful when fitHeightToContent is false. Eg: “200px”, “2rem”Units can be: px, em, rem, %.

Yes
Boolean

Determines if the block visibility should be rendered by default.

Yes
String

Only needs to be specified when widthType is “custom”. Eg: “100%”Units can be: px, em, rem, %.

Yes
Boolean

Value of true would result in the block being wrapped with a white background.

Yes
Object

Refer here.

Yes
Array

[“0”, “0”, “0”, “0”, “px”]Last index can be: “px”, “rem”, “em”, “%”, “”.

Yes
String

[“0”, “0”, “0”, “0”, “px”] Last index can be: “px”, “rem”, “em”, “%”, “”.

Yes
Boolean

Setting this field to true would result in blockHeight to have a predetermined value.

Yes
String

“heading”

Yes
Enum

"center" | "left"

Yes
Boolean

true

Yes
Array

Refer here.

No
Integer

1

Yes
String

“0px”. Units can be: px, em, rem, %.

No
Enum

Renders the block width styling based on the value selected. Only when “custom” is selected, blockWidth needs to be specified. Eg: “full” | “half” | “custom” | “fit-content”

Yes

Sample

"sponsors-block": {
  "type": "ImageList",
  "title": "Our Sponsors",
  "data": {
      "heading": "Our Sponsors",
      "title": "Our Sponsors",
      "headingVisibility": true,
      "headingAlignment": "center",
      "autoScrollEnabled": false,
      "autoScrollTimeInterval": null,
      "isSlideshow": false,
      "spaceBetweenImages": "24px",
      "images": [
          {
              "url": "https://venues-sdk.gevme.com/assets/sponsors/sample1.png"
          },
          {
              "url": "https://venues-sdk.gevme.com/assets/sponsors/sample2.png"
          },
          {
              "url": "https://venues-sdk.gevme.com/assets/sponsors/sample3.png"
          },
          {
              "url": "https://venues-sdk.gevme.com/assets/sponsors/sample4.png"
          },
          {
              "url": "https://venues-sdk.gevme.com/assets/sponsors/sample5.png"
          },
          {
              "url": "https://venues-sdk.gevme.com/assets/sponsors/sample6.png"
          },
          {
              "url": "https://venues-sdk.gevme.com/assets/sponsors/sample7.png"
          }
      ],
      "order": 3,
      "alignment": "left",
      "blockWidth": "100%",
      "blockHeight": "178px",
      "widthType": "full",
      "fitHeightToContent": false,
      "boundingBox": true,
      "contentPadding": ["24", "24", "24", "24", "px"],
      "contentMargin": ["56", "0", "0", "0", "px"]
  }
}