Portfolio

Import the Portfolio 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 Portfolio 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.

Blocks this design adds

Portfolio Grid

canvas-core/portfolio-grid

Isotope-filterable tile grid of portfolio items for the Portfolio demo (data-lightbox gallery + zoomIn entrance). In the block inserter it is named Canvas Portfolio Grid.

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

Layout

• Grid Wrapper ClassesDefaultrow row-cols-2 row-cols-md-3 row-cols-lg-4 row-cols-xl-5 g-2 g-lg-3 grid-container

  Classes on the row. grid-container enables Isotope packing.

• Grid IDDefaultdemo-portfolio-filter

  The grid-filter bar targets the grid by this id.

• Column ClassesDefaultcol

  Classes on each column, which is where the number of tiles per row is set.

Card

• Entrance AnimationDefaultzoomIn

  Animation played as each tile enters the screen. Empty leaves the tiles still.

• Animation Delay Step (ms)Default50

  Per-tile delay step (alternates 0 / step).

• Lightbox GalleryDefaultOn

  Treat all the tiles as one gallery, so the lightbox steps from one project to the next.

• Overlay Hover Speed (ms)Default350

  How long the overlay takes to appear when the pointer reaches a tile, in milliseconds.

Query

• ItemsDefault0

  0 shows every item.

• Order ByDefaultMenu Order

  What to sort the projects by.

  ChoicesMenu OrderDateTitleRandom

• OrderDefaultAscending

  Read the sort order forwards or backwards.

  ChoicesAscendingDescending