Image Slideshow (Developer)

Image Slideshow (Developer)

Type Name

ImageSlideshow

Usage

This block consists of one or more images in a slideshow format.

Icon
Screenshots
Type
Content
Content Category
Images
  • About the Image Slideshow
  • Creating an Image Slideshow Block
  • Block Settings
  • JSON Config
  • Attributes
  • Sample

About the Image Slideshow

The Image List block is used to display images in slide show format. The time interval between slides can be set as per the event's objective.

Creating an Image Slideshow Block

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

image

Block Settings

The main setting of the Image Slideshow block is the Add Image setting where you can insert your image(s). It is perfect for past event's showcases, speaker listing, etc,...

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.

Autoscroll Feature is available and you can set the time interval between slides.

image

JSON Config

Attributes

🗃️
Block Attributes

Name
Type
Description
Common to All
autoScrollEnabled
Boolean

false

No
autoScrollTimeInterval
String

“4”

No
backgroundCoverImage
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
backgroundCoverImageDisablePopup
Boolean

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

Yes
backgroundCoverImageDistortion
Object

Refer here.

Yes
backgroundCoverImageVisibility
Boolean

Only render background image when this field is true.

Yes
blockHeight
String

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

Yes
blockVisibility
Boolean

Determines if the block visibility should be rendered by default.

Yes
blockWidth
String

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

Yes
boundingBox
Boolean

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

Yes
breakpoints
Object

Refer here.

Yes
contentMargin
Array

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

Yes
contentPadding
String

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

Yes
fitHeightToContent
Boolean

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

Yes
heading
String

“heading”

Yes
headingAlignment
Enum

"center" | "left"

Yes
headingVisibility
Boolean

true

Yes
images
Array

Refer here.

No
order
Integer

1

Yes
spaceBetweenImages
String

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

No
widthType
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

"image-slideshow-block": {
  "type": "ImageSlideshow",
  "title": "Our Products",
  "data": {
      "heading": "Our Products",
      "title": "Our Products",
      "headingVisibility": true,
      "headingAlignment": "center",
      "autoScrollEnabled": true,
      "autoScrollTimeInterval": "30",
      "isSlideshow": true,
      "spaceBetweenImages": "0px",
      "images": [
          {
              "url": "https://venues-sdk.gevme.com/assets/slideshow-default.png"
          },
          {
              "url": "https://venues-sdk.gevme.com/assets/slideshow-default.png"
          },
          {
              "url": "https://venues-sdk.gevme.com/assets/slideshow-default.png"
          },
          {
              "url": "https://venues-sdk.gevme.com/assets/slideshow-default.png"
          }
      ],
      "order": 7,
      "alignment": "left",
      "blockWidth": "100%",
      "blockHeight": "420px",
      "widthType": "full",
      "fitHeightToContent": false,
      "boundingBox": false,
      "contentPadding": ["16", "16", "16", "16", "px"],
      "contentMargin": ["29", "0", "0", "0", "px"]
  }
}