Skip to content

Add a Story or Clips row#

A row shows Story or Clip tiles in one horizontal line that users can scroll. Use StorytellerStoriesRowView for Stories and StorytellerClipsRowView for Clips. To show a row only when it has content, check getStoriesCount or getClipsCount first.

Initialization#

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

Stories initialization#

const storyRow = new Storyteller.StorytellerStoriesRowView('stories-row-id'); // All Categories
const storyRowWithCategories = new Storyteller.StorytellerStoriesRowView(
  'stories-row-id',
  ['category-1', 'category-2']
);

Clips initialization#

const clipsRow = new Storyteller.StorytellerClipsRowView(
  'clips-row-id',
  'clip-collection-id'
);

Note

The row sizes its tiles to the height of its container. Set a height on the container, for example <div id="stories-row-id" style="height: 200px"></div>. If the container has no height, the SDK uses a default tile height (160 px for square tiles, and 120 px or 140 px for round tiles, depending on whether titles show). When logging is enabled, the SDK also logs a warning.

Configuration#

Set a row's options with its configuration object. 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 storyRow = new Storyteller.StorytellerStoriesRowView('stories-row-id');
storyRow.configuration = {
  categories: ['category1', 'category2', 'category3'], // Stories only
  cellType: Storyteller.CellType.round, // StorytellerStoriesRowView only
  displayLimit: 10,
  preload: true, // Stories only
  theme: customTheme,
  uiStyle: Storyteller.UiStyle.dark,
};

const customTheme = new Storyteller.UiTheme(); // See Customize themes
const storyRow = new Storyteller.StorytellerStoriesRowView('stories-row-id');
const storyRowConfiguration: IListConfiguration<'StorytellerStoriesRowView'> = {
  categories: ['category1', 'category2', 'category3'], // Stories only
  cellType: Storyteller.CellType.round, // StorytellerStoriesRowView only
  displayLimit: 10,
  preload: true, // Stories only
  theme: customTheme,
  uiStyle: Storyteller.UiStyle.dark,
};
storyRow.configuration = storyRowConfiguration;

For a working React component that applies these options, see the Storyteller Web Showcase's StorytellerStoriesRowView.

Clips configuration#

const customTheme = new Storyteller.UiTheme(); // See Customize themes
const clipsRow = new Storyteller.StorytellerClipsRowView(
  'clips-row-id',
  'collection-id'
);
clipsRow.configuration = {
  displayLimit: 10,
  theme: customTheme,
  uiStyle: Storyteller.UiStyle.dark,
};
clipsRow.cellType = Storyteller.CellType.round; // Clips rows set cellType on the view

const customTheme = new Storyteller.UiTheme(); // See Customize themes
const clipsRow = new Storyteller.StorytellerClipsRowView(
  'clips-row-id',
  'collection-id'
);
const clipsRowConfiguration: IListConfiguration<'StorytellerClipsRowView'> = {
  displayLimit: 10,
  theme: customTheme,
  uiStyle: Storyteller.UiStyle.dark,
};
clipsRow.configuration = clipsRowConfiguration;
clipsRow.cellType = Storyteller.CellType.round; // Clips rows set cellType on the view

For Clips, the Storyteller Web Showcase's StorytellerClipsRowView builds the row configuration with the collection ID, display limit, and theme.

Rows accept every setting in Configure views, plus the following:

cellType#

cellType sets the tile shape: Storyteller.CellType.square (default) or Storyteller.CellType.round.

  • On a Stories row, set it in configuration.
  • On a Clips row, set clipsRow.cellType. configuration doesn't accept cellType for Clips rows.
  • On either row, you can instead add data-cell-type="round" to the container.