Skip to content

Add a Story or Clips grid#

A grid shows Story or Clip tiles in columns. Use StorytellerStoriesGridView for Stories and StorytellerClipsGridView for Clips. Set the number of columns with the lists.grid.columns theme property. To show a grid only when it has content, check getStoriesCount or getClipsCount first.

Initialization#

Create the grid with the ID of an existing element on your page. Grids take the same arguments as the other views in Configure views:

Stories initialization#

const storyGrid = new Storyteller.StorytellerStoriesGridView('stories-grid-id'); // All Categories
const storyGridWithCategories = new Storyteller.StorytellerStoriesGridView(
  'stories-grid-id',
  ['category-1', 'category-2']
);

Clips initialization#

const clipsGrid = new Storyteller.StorytellerClipsGridView(
  'clips-grid-id',
  'clip-collection-id'
);

Configuration#

Grids accept every setting in Configure views. Grids don't use cellType. TypeScript examples assume import * as Storyteller from '@getstoryteller/storyteller-sdk-javascript'; and import type { IListConfiguration } from '@getstoryteller/storyteller-sdk-javascript';.

Stories configuration#

const customTheme = new Storyteller.UiTheme(); // See Customize themes
const storyGrid = new Storyteller.StorytellerStoriesGridView('stories-grid-id');
storyGrid.configuration = {
  categories: ['category1', 'category2', 'category3'], // Stories only
  displayLimit: 10,
  preload: true, // Stories only
  theme: customTheme,
  uiStyle: Storyteller.UiStyle.dark,
};

const customTheme = new Storyteller.UiTheme(); // See Customize themes
const storyGrid = new Storyteller.StorytellerStoriesGridView('stories-grid-id');
const storyGridConfiguration: IListConfiguration<'StorytellerStoriesGridView'> =
  {
    categories: ['category1', 'category2', 'category3'], // Stories only
    displayLimit: 10,
    preload: true, // Stories only
    theme: customTheme,
    uiStyle: Storyteller.UiStyle.dark,
  };
storyGrid.configuration = storyGridConfiguration;

For a live example, review the Storyteller Web Showcase's StorytellerStoriesGridView, which sets basename, displayLimit, and custom themes.

Clips configuration#

const customTheme = new Storyteller.UiTheme(); // See Customize themes
const clipsGrid = new Storyteller.StorytellerClipsGridView(
  'clips-grid-id',
  'collection-id'
);
clipsGrid.configuration = {
  displayLimit: 10,
  theme: customTheme,
  uiStyle: Storyteller.UiStyle.dark,
};

const customTheme = new Storyteller.UiTheme(); // See Customize themes
const clipsGrid = new Storyteller.StorytellerClipsGridView(
  'clips-grid-id',
  'collection-id'
);
const clipsGridConfiguration: IListConfiguration<'StorytellerClipsGridView'> = {
  displayLimit: 10,
  theme: customTheme,
  uiStyle: Storyteller.UiStyle.dark,
};
clipsGrid.configuration = clipsGridConfiguration;

For Clips, the Storyteller Web Showcase's StorytellerClipsGridView sets the collection ID and display limit with the same configuration object.