Canvas Docs

Portfolio Related

Displays related portfolio projects based on shared categories. Use inside portfolio single templates. It is shown in the block inserter as Portfolio Related and registered as canvas-core/portfolio-related.

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

The Portfolio Related settings in the block editor sidebar

Settings

Each setting is named exactly as the block editor names it, followed by what it does and what it starts as. Where a setting carries a Shown when line, it stays hidden until that condition is met, which is the usual reason a setting looks missing from the sidebar:

Settings

  • StyleDefaultColumn Grid

    Whether the other projects sit in a column grid or run as a carousel.

    ChoicesColumn GridCarousel

  • WrapperDefaultSection element

    Off lets the block sit directly in a layout you have already built, with no container of its own.

    ChoicesSection elementNone - the carousel is the rootShown when Style is "Carousel"

  • Section HeadingDefaultRelated Projects

    Empty shows no heading: use a Heading block above the carousel instead.

  • Number of ProjectsDefault0

    0 follows Theme Options → Portfolio → Single → Related Projects Count.

  • Which ProjectsDefaultRelated - shares a category

    The current project is always excluded.

    ChoicesRelated - shares a categoryAll projects

  • Order ByDefaultRandom

    What to sort the other projects by.

    ChoicesRandomProject orderNewest firstTitle

  • ColumnsDefault0

    0 follows Theme Options → Portfolio → Single → Related Projects Columns.

    Shown when Style is "Column Grid"

Cards

  • Per-Project Card MediaDefaultOn

    Let each project's own film or shot-set drive its card and its lightbox.

    Shown when Style is "Carousel"

  • Slide Multi-Shot CardsDefaultOff

    On turns a project with several shots into a sliding card. Off keeps every card a still image: its trigger still opens the shot-set as a lightbox gallery.

    Shown when Style is "Carousel" and Per-Project Card Media is on

  • Overlay MotionDefaultIcons slide down in, up out

    How the trigger icons and scrim animate when the pointer enters a card.

    ChoicesMatch the frame (carousel) (empty)Icons slide down inup outIcons slide down inup inShown when Style is "Carousel"

  • Enlarge IconDefaultEmpty

    Glyph on the enlarge-image trigger. A project with a shot-set or a film overrides it with its own.

    Shown when Style is "Carousel"

  • Open-Project IconDefaultEmpty

    Icon on the control that opens a project. Empty uses the layout default.

    Shown when Style is "Carousel"

  • Caption ClassesDefaultEmpty

    Extra classes on each card's caption, e.g. to centre it.

    Shown when Style is "Carousel"

  • Card Media ClassesDefaultEmpty

    Extra classes on each card's media frame, e.g. rounded corners.

    Shown when Style is "Carousel"

  • Items (base)Default0

    Fallback item count for every breakpoint that sets none of its own. 0 leaves it unset.

    Shown when Style is "Carousel"

  • Items (XS)Default1

    Slides visible on screens narrower than 576 pixels. 0 falls back to Items (base).

    Shown when Style is "Carousel"

  • Items (SM)Default2

    Slides visible from 576 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Style is "Carousel"

  • Items (MD)Default3

    Slides visible from 768 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Style is "Carousel"

  • Items (LG)Default4

    Slides visible from 992 pixels up. 0 repeats the count from the breakpoint below.

    Shown when Style is "Carousel"

  • Items (XL)Default4

    Slides visible from 1200 pixels up, including the widest screens. 0 repeats the count from the breakpoint below.

    Shown when Style is "Carousel"

  • Item Gap (px)Default20

    Space between one slide and the next, in pixels.

    Shown when Style is "Carousel"

  • Show ArrowsDefaultOn

    Show the previous and next arrows beside the slides.

    Shown when Style is "Carousel"

  • Arrows Always VisibleDefaultOff

    Keep the arrows on screen instead of revealing them when the pointer enters the carousel.

    Shown when Style is "Carousel"

  • Show DotsDefaultOff

    Show the row of dots below the slides, one per page.

    Shown when Style is "Carousel"

  • Autoplay (ms)Default5000

    Milliseconds between slides. 0 disables autoplay.

    Shown when Style is "Carousel"

  • LoopDefaultOff

    Run the slides in an endless cycle, so the last one is followed by the first. Off stops at each end.

    Shown when Style is "Carousel"

  • Transition SpeedDefault250

    Milliseconds per slide transition.

    Shown when Style is "Carousel"

  • Centre Active SlideDefaultOff

    Keeps the active slide in the middle of the stage.

    Shown when Style is "Carousel"

  • Stage PaddingDefault0

    Pixels of the neighbouring slides left visible at each edge. 0 leaves it unset.

    Shown when Style is "Carousel"

  • Animate InDefaultEmpty

    Animation class applied to the incoming slide. Empty uses a plain slide.

    Shown when Style is "Carousel"

  • Animate OutDefaultEmpty

    Animation class applied to the outgoing slide. Empty uses a plain slide.

    Shown when Style is "Carousel"

Every Canvas block also carries the Animation, Scroll Effects and Advanced panels, which are described in Controls every Canvas block has.

Other blocks in Portfolio: Portfolio Archive Grid, Portfolio Categories, Portfolio Content, Portfolio Image, Portfolio Meta, Portfolio Navigation.

Was this page helpful?