Layout

The optional layout option defines, which layout is used for rendering the library. It accepts an object, with the following layout configuration options:

Type definition

type LayoutConfig = {
  assetOrientation?: Orientation;
  breakpoints?: number[];
  view?: 'grid' | 'list' | 'slider';
};

Asset orientation

The assetOrientation option defines whether assets should be rendered in portrait or landscape format.

window.LiSA.library.configs.push({
  layout: {
    assetOrientation: 'landscape',
  },
});

Breakpoints

The breakpoints option allows you to define individual breakpoints for your responsive design. If not provided, LiSA Library defaults to the breakpoints described in Responsive design .

window.LiSA.library.configs.push({
  layout: {
    breakpoints: [480, 854],
  },
});

View

The view option sets the library's layout. It accepts a string value that is one of the following:

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.

window.LiSA.library.configs.push({
  layout: {
    view 'grid',
  },
});