Music

Import the Music design and it brings blocks and content types of its own, on top of the main Canvas library. Read this page when you are working on a site built from Music and meet a block you cannot find in the main reference.

These items stay registered on every site so that content you have already imported keeps rendering, and they appear in the block inserter only where the design is in use.

Content types this design adds

Albums

canvas_music_album

One item is called a Album. You will find them in their own admin menu once the design is installed.

• Editor features: editor, excerpt, page-attributes, thumbnail, title
• Grouped by: Collections (canvas_music_album_cat)

Each item carries these extra settings on its edit screen:

• Album Artist

• Album Artist Id

• Label

• Album Track Id

• Tracks

• Released

Artists

canvas_music_artist

One item is called a Artist. You will find them in their own admin menu once the design is installed.

• Editor features: editor, excerpt, page-attributes, thumbnail, title

Each item carries these extra settings on its edit screen:

• Artist Feature

• Genre

• Monthly Listeners

• From

• Artist Place

Tracks

canvas_music_track

One item is called a Track. You will find them in their own admin menu once the design is installed.

• Editor features: editor, excerpt, page-attributes, thumbnail, title
• Grouped by: Charts (canvas_music_track_cat)

Each item carries these extra settings on its edit screen:

• Album

• Track Artist

• Track Artist Id

• Track Audio

• Track Delay

• Track Poster

• Length

• Released

Blocks this design adds

Album Tiles

canvas-core/music-albums

Albums as a tabbed arrangement of artwork tiles, as a plain tile grid, or as the parts of one album page. In the block inserter it is named Album Tiles.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• LayoutDefaultTabbed Tiles

  The first two are the design's two ways of showing albums. The last three render the open album and only appear on an album page.

  ChoicesTabbed TilesTile GridCollection Name and DescriptionAlbum Title and DetailsAlbum ArtworkMore Albums Row

• TabsDefaultEmpty

  One tab per collection. Each tab shows the albums in its collection: the first fills the tall tile, the next two the small tiles and the fourth the wide tile.

  Each row of Tabs takes:

  • Tab Label

  • Collection Slug

  • Tab Tint

  • Tall Tile Text Classes

    Extra classes on the tall tile's caption, for a tab whose feature reads at a smaller size.

  • Tile Menu On

    Default: Tall tile only. Choices: Tall tile only, Every tile, No tile.

  • Compact Small Captions

    Default: On.

• Albums per TabDefault4

  Four fills the design's arrangement exactly. Zero shows every album in the collection.

• CollectionDefaultEmpty

  Show only the albums in one collection. Used by the tile grid; the tabs each carry their own.

• Follow the Collection PageDefaultOff

  On a collection page, show only that collection and ignore the slug above. Off everywhere else.

• Order ByDefaultManual Order

  What to sort the albums by.

  ChoicesManual OrderDateTitle

• OrderDefaultAscending

  Read the sort order forwards or backwards.

  ChoicesAscendingDescending

• Link Titles to the Album PageDefaultOn

  Turn off where a tile should not open a page.

• Link Artist Names to the Artist PageDefaultOff

  The design reads the artist over a tile as a label; turn this on to make it open the artist's page.

Layout

• Tab Area ClassesDefaulttabs-music-demo dark

  Classes on the area holding the tab strip and the tiles.

• Tab Strip ClassesDefaultnav canvas-alt-tabs tabs-alt tabs-bb tabs nav-tabs mb-4

  Classes on the row of tab labels.

• Tab Panels ClassesDefaulttab-content music-tabs-albums

  Classes on the wrapper around the tab panels.

• Tile Row ClassesDefaultrow gutter-20 align-items-stretch

  Classes on the row that holds one tab's tiles.

• Tall Tile ClassesDefaultcol-md-6 min-vh-40

  Classes on the column holding the tall tile, which is where its width and height are set.

• Side Column ClassesDefaultcol-md-6 px-0

  Classes on the column beside the tall tile.

• Side Row ClassesDefaultrow mx-0 gutter-20

  Classes on the row inside the side column.

• Small Tile ClassesDefaultcol-6

  Classes on each of the two small tiles.

• Wide Tile ClassesDefaultcol-12

  Classes on the wide tile under the two small ones.

• Tile Grid ClassesDefaultrow gutter-20 align-items-stretch

  Classes on the row holding the plain tile grid.

• Tile Grid Card ClassesDefaultcol-6 col-lg-3

  Classes on one card of the plain tile grid, which is where the number of columns is set.

• Artist Line ClassesDefaultfont-primary text-uppercase

  Classes on the artist name over an album title.

• Album Title ClassesDefaultfont-secondary

  Classes on the album title link inside a tile.

• Artwork Loaded ImmediatelyDefault4

  How many of the first tiles load their artwork straight away, so a tab that is open at once is measured with its pictures in place.

Tile Controls

• Play Control on Large TilesDefaultOn

  The play button on the tall and wide tiles. It starts the album's chosen track.

• Play Button TextDefaultPlay Now

• Play Button IconDefaultbi-play-fill

• Play Button ClassesDefaultbutton button-circle button-small fw-normal ls-1 ms-0 track-list

• Second Button TextDefaultView All

  The outline button beside the play control. Empty removes it.

• Second Button ClassesDefaultbutton button-circle button-small button-border button-white fw-normal ls-1

• Favourite IconDefaultbi-heart

  The first icon floating over a tile. Empty removes it.

• Tile Menu IconDefaultuil uil-ellipsis-h

  The second icon floating over a tile, which opens the tile menu on the tall tile.

• Favourite Control NameDefaultAdd to favourites

  What the first icon does, read out where the icon cannot be seen.

• Tile Menu Control NameDefaultAlbum options

  What the second icon does, read out where the icon cannot be seen.

Tile Menu

• Tile MenuDefaultOn

  The menu that opens from the tall tile's second icon.

• Tile Menu EntriesDefaulta preset list of 5 rows

  Entries in the tile menu. A divider line is drawn before any entry marked as separated.

  Each row of Tile Menu Entries takes:

  • Label

  • Icon

  • Link

  • Divider Above

Album Page

• Album Artwork ClassesDefaultw-100 h-100 object-cover

  Classes on the artwork at the top of an album page.

• Album Page Title ClassesDefaultfont-primary text-transform-none h2

  Classes on the album title heading on an album page.

• Albums Page SlugDefaultfeatured

  The page the artist line and the back link point at.

• More Albums HeadingDefaultMore Albums

  Heading above the row of other albums.

• More Albums ShownDefault4

  How many other albums the row shows.

Artist Bubbles

canvas-core/music-artists

Artist records as a field of overlapping circular portraits, each naming the artist on hover. In the block inserter it is named Artist Bubbles.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• LayoutDefaultPortrait Field

  The field is the design's overlapping circle arrangement and the grid is its even card row. The last three render the open artist and only appear on an artist page.

  ChoicesPortrait FieldPortrait GridArtist PortraitArtist Name and DetailsOther Artists Row

• Artists to ShowDefault0

  Zero shows every published artist.

• Order ByDefaultManual Order

  What to sort the artists by.

  ChoicesManual OrderDateName

• OrderDefaultAscending

  Read the sort order forwards or backwards.

  ChoicesAscendingDescending

• Link Portraits to the Artist PageDefaultOn

  Turn off where the portraits are decorative.

Layout

• Field ClassesDefaultsinger-wrap

  Classes on the area the portraits are placed in.

• Portrait ClassesDefaultsinger-bb-image

  Classes on one circular portrait.

• Large Portrait ClassDefaultbig

  Extra class on the artist marked as the large centre portrait.

• Portrait Grid ClassesDefaultportfolio row dark gutter-20 desc-sm

  Classes on the row holding the portrait grid.

• Portrait Grid Card ClassesDefaultportfolio-item col-6 col-md-3 col-lg-2

  Classes on one card of the portrait grid, which is where the number of columns is set.

• Portraits Loaded Straight AwayDefault0

  How many grid portraits load without waiting for a scroll.

Artist Page

• Artist Portrait ClassesDefaultsinger-bb-image big

  Classes on the large portrait at the top of an artist page.

• Artist Name ClassesDefaulttext-transform-none h2

  Classes on the artist name heading.

• Artists Page SlugDefaultpopular-artists

  The page the genre line and the back link point at.

• Other Artists HeadingDefaultMore Artists

  Heading above the row of other artists.

• Other Artists ShownDefault0

  How many other artists the row shows. Zero shows every other artist, the way the home page field does.

Play Track Button

canvas-core/music-play-button

A button that starts one track in the page's audio player. In the block inserter it is named Play Track Button.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• TrackDefault0

  The track this button loads into the player.

• Button TextDefaultPlay Now

  Empty leaves an icon-only control.

• IconDefaultbi-play-fill

  Icon before the text. Empty removes it.

• Link to the Track PageDefaultOn

  The button plays in place; the link is where it goes for anyone opening it in a new tab.

Layout

• Button ClassesDefaultbutton button-rounded fw-normal ls-1 track-list mt-3

  Classes on the button. The play class is what the player script binds to.

Audio Player Bar

canvas-core/music-player

The player pinned to the foot of every page. Every play control on the site loads its track into this one player. In the block inserter it is named Audio Player Bar.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• Track Loaded on ArrivalDefault0

  The track whose artwork and title the bar shows when a visitor arrives. It is loaded but not played.

Advanced

• Player Element IDDefaultaudio-player

  The id the player script looks the audio element up by.

• Player ClassesDefaultmejs__player

  Classes on the audio element. The player library starts on this class.

• Bar HeightDefault50

  Height of the player bar in pixels.

• Always Show ControlsDefaultOn

  Keep the controls visible instead of fading them out.

Track Collection

canvas-core/music-tracks

Track records as a cover carousel, a numbered song list or a chart grid, each card playing its own audio. In the block inserter it is named Track Collection.

Select the block on a page and its own settings open in the sidebar, in the panels below:

Content

• LayoutDefaultCover Carousel

  The first three are the design's three ways of listing tracks. The last two render the open track and only appear on a track page.

  ChoicesCover CarouselNumbered Song ListChart GridChart Name and DescriptionTrack Title and DetailsMore Tracks Row

• Tracks to ShowDefault0

  Zero shows every published track in the chosen chart.

• ChartDefaultEmpty

  Show only the tracks in one chart. Empty shows every chart.

• Follow the Chart PageDefaultOff

  On a chart page, show only that chart and ignore the slug above. Off everywhere else.

• Chosen TracksDefaultEmpty

  Name the exact tracks, in the order they should read. Leave empty to show a whole chart in its own order.

  Each row of Chosen Tracks takes:

  • Track

• Skip First TracksDefault0

  Start the list further down the chart, for a second column that continues where the first ended.

• Order ByDefaultManual Order

  What to sort the tracks by.

  ChoicesManual OrderDateTitle

• OrderDefaultAscending

  Read the sort order forwards or backwards.

  ChoicesAscendingDescending

• Link Titles to the Track PageDefaultOn

  Turn off where a card should not open a page.

Layout

• Carousel ClassesDefaultowl-carousel image-carousel carousel-widget

  Classes on the carousel container.

• Covers per View, PhonesDefault2

• Covers per View, SmallDefault3

• Covers per View, MediumDefault4

• Covers per View, LargeDefault6

• Covers per View, Extra LargeDefault6

• Gap Between CoversDefault20

  Space in pixels between one cover and the next.

• Carousel ArrowsDefaultOn

• Carousel DotsDefaultOff

• Chart Grid ClassesDefaultportfolio row dark gutter-20 desc-sm

  Classes on the row holding the chart cards.

• Chart Card ClassesDefaultportfolio-item col-6 col-md-3 col-lg-2

  Classes on one chart card, which is where the number of columns is set.

• Song List ClassesDefaultsongs-lists-wrap

  Classes on the wrapper around the numbered rows.

• First Row NumberDefault1

  The number printed against the first row.

• Card AnimationDefaultEmpty

  Animation name placed on each card as it arrives. Empty means no animation.

• Animation Delay Step (ms)Default0

  Used for cards that carry no delay of their own, so the row arrives one card after another.

• Covers Loaded ImmediatelyDefault8

  How many of the first covers load straight away. A carousel measures its covers as it starts, so these must not wait for a scroll.

• Chart Card Hover IconsDefaulta preset list of 2 rows

  Icons that rise over a chart cover on hover.

  Each row of Chart Card Hover Icons takes:

  • Icon

  • Link

  • Name

    What the control does, read out where the icon cannot be seen.

• Chart Card Play ControlDefaultOff

  Adds a play control to the hover panel over a chart cover, for a grid whose covers should start the track.

• Play IconDefaultbi-play-fill

  Icon on every play control the collection draws.

Row Menu

• Row MenuDefaultOn

  The three-dot menu at the end of a song row.

• Row Menu EntriesDefaulta preset list of 5 rows

  Entries in the three-dot menu. A divider line is drawn before any entry marked as separated.

  Each row of Row Menu Entries takes:

  • Label

  • Icon

  • Link

  • Divider Above

Track Page

• Track Title ClassesDefaultfont-primary text-transform-none h2

  Classes on the track name heading.

• Tracks Page SlugDefaultfeatured

  The page the artist line and the back link point at.

• More Tracks HeadingDefaultMore Like This

  Heading above the row of other tracks.

• More Tracks ShownDefault6

  How many other tracks the row shows.