📙
Documentation
Featured Content (Developer)

Featured Content (Developer)

Type Name
FeaturedContent
Usage
This block consists of series of blocks with thumbnail and linking to other pages and content.
Icon
Screenshots
Type
Content
Content Category
Event Information

About the Featured Content

The Featured Content block is used to display series of blocks with thumbnails and links to other pages and content

Creating a Featured Content Block

To create a Featured Content block, in the Venue Editor, click on "Add Blocks" button in the settings panel on the left, then choose "Featured Content" under the Event Information category.

image

Block Settings

The main setting of the Featured Content block is the Content where you can insert content blocks including titles, descriptions, links and static images.

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
Boolean
false
No
Boolean
false
No
String
“338px” Width to height ratio must be at least 1:1.3 Units can be: px, em, rem, %.
No
String
“2px” Units can be: px, em, rem, %.
No
Boolean
false
No
String
260px Units can be: px, em, rem, %.
No
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
Array
Refer here.
No
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
Integer
1
Yes
Enum
“HeroContent” | "FeaturedContent"
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

"featured-block": {
  "type": "FeaturedContent",
  "title": "Featured Content",
  "data": {
      "heading": "Featured Content",
      "title": "Featured Content",
      "headingVisibility": true,
      "headingAlignment": "center",
      "cardBoundingBox": true,
      "cardHeight": "340px",
      "cardPadding": "16px",
      "cardWidth": "260px",
      "fitCardHeightToContent": true,
      "cardDescriptionVisibility": true,
      "cardTitleVisibility": true,
      "featuredcontent": [
          {
              "coverDisplayImage": null,
              "coverDisplayType": "image",
              "coverDisplayVideo": null,
              "description": "<p>Add some description about your featured content here.</p>",
              "link": null,
              "openInNewWindow": true,
              "order": 1,
              "title": "Featured content 1",
              "visibility": true
          },
          {
              "coverDisplayImage": null,
              "coverDisplayType": "image",
              "coverDisplayVideo": null,
              "description": "<p>Add some description about your featured content here.</p>",
              "link": null,
              "openInNewWindow": true,
              "order": 2,
              "title": "Featured content 2",
              "visibility": true
          },
          {
              "coverDisplayImage": null,
              "coverDisplayType": "image",
              "coverDisplayVideo": null,
              "description": "<p>Add some description about your featured content here.</p>",
              "link": null,
              "openInNewWindow": true,
              "order": 3,
              "title": "Featured content 3",
              "visibility": true
          }
      ],
      "order": 5,
      "alignment": "left",
      "blockWidth": "100%",
      "blockHeight": "fit-content",
      "widthType": "full",
      "fitHeightToContent": true,
      "boundingBox": false,
      "contentPadding": ["0", "0", "0", "0", "px"],
      "contentMargin": ["56", "0", "0", "0", "px"]
  }
}