Appearance
Last updated
Last updated
The LiSA Content Hub's appearance is kept quite simple, yet it is highly configurable and customizable to fit seamlessly into your storefront's or website's corporate design.
To better understand the customization options, let's take a look at the LiSA Library, it's design approach and the markup generated by the SDK.
Let's start with a very basic example that has very minimal configuration to make use of as much of the LiSA Content Hub defaults as possible:
The LiSA Content Hub provides three layout options:
list (Default) — A vertical show listing. grid — A grid view of all shows slider — Similar to the grid layout, except for keeping all shows of a section in a horizontal, scrollable row.
You can find examples of all layout options in the Examples section.
Layout components
All layouts share the same Markup with slight variations in layout-dependent HTML element class names. Each layout includes the following components:
The section component is a container component to list shows in different states:
Live shows live — Shows that are currently streamed. Upcoming shows preShow — Shows that are scheduled to be streamed in the near future. Recent shows replay — Recorded videos of shows that have been streamed recently.
A section consists of a section title and a section listing.
The show component contains the relevant data of a single show:
Assets — A show's image of preview video asset.
Tag — A tag that gets assigned dependent on the show's state, e.g. Live, Upcoming or Recorded.
Host Avatars — A show hosts' avatar images.
Title — A show's title. Description — A show's description text, including wysiwyg markup as defined in the LiSA backend.
Date — A show's date in a customisable date format.
The LiSA Library kit allows for customisation using formatting hooks of all show component elements before rendering.
The LiSA Library provides two image assets to choose from:
portrait (Default) — Taken from the portrait asset slot of a respective view or show. landscape — Taken from the landscape asset slot of a respective view or show.
A third option is to provide a callback function to allow for custom selection of an image asset. Please refer to Configuration options for more information on customising the image asset selection.
You can find examples of all image asset format options in the Examples section.
While the show date, host avatars and tag a straight forward in selecting the data source for these elements, selecting the data source for assets, title and description are more sophisticated.
While setting up a show in the LiSA backend you can provide media assets for both landscape and portrait devices. LiSA Library supports both landscape and portrait asset format, prioritising portrait over landscape if not configured otherwise.
When selecting the asset for a show LiSA Library also reflects a show's state by looking for an asset in the respective show view.
Example: If a show is in replay state the look-up sources are the following:
portrait or landscape) Replay view assets: Cover image (portrait or landscape) Pre-Show view assets: Cover image (portrait or landscape) Show assets: Cover image (portrait or landscape) Default view assets (general settings): Cover image (portrait or landscape)
LiSA Library will search for assets in these sources in the given order. As soon as one of these sources contains an asset, LiSA Library uses it for display.
Similar to assets, LiSA Library reflects a show's state when selecting the title and description iterating the following sources:
Show title / description Replay view title / teaser Pre-Show view title / teaser