Playlist
The Playlist component displays a collection of media items from a Fluid library.
Usage
<fluid-playlist library-id="your-library-id"></fluid-playlist>
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
library-id | string | — | Library/playlist ID to display |
hide-widget | boolean | false | Whether to hide the component |
class-name | string | — | Additional CSS classes |
Display Options
| Attribute | Type | Default | Description |
|---|---|---|---|
layout | string | 'grid' | Layout mode: 'grid', 'list', 'carousel' |
columns | number | 3 | Number of columns in grid layout |
show-titles | boolean | true | Show media titles |
show-descriptions | boolean | false | Show media descriptions |
Examples
Grid Layout
<fluid-playlist library-id="your-library-id" layout="grid" columns="4" ></fluid-playlist>
Carousel Layout
<fluid-playlist library-id="your-library-id" layout="carousel" ></fluid-playlist>
List with Descriptions
<fluid-playlist library-id="your-library-id" layout="list" show-descriptions="true" ></fluid-playlist>
JavaScript API
// Get library/playlist data const library = await window.FairShareSDK.getLibrary("library-slug-or-id"); console.log('Library name:', library.name); console.log('Media items:', library.media.length);
Related
- getLibrary — Get library data programmatically
- Media — Display individual media items