Portfolio

The Portfolio is where you present the work you have done: projects, case studies, shoots, builds. Each project is its own record with its own images, client details and layout, and the Portfolio blocks read from those records, so a change to a project shows up everywhere the project appears. Read this page when you are adding your first projects or when a project card is not behaving the way you expect in a grid.

Where Projects Live

You will find projects in the WordPress admin menu under Portfolio. Each project has its own page on the front end, there is a listing page for all projects, and project addresses start with /projects/. Projects are grouped by Portfolio Categories, which is what the grid filters and the category archive pages are built from.

How To Create A Project

Starting screenPortfolioAdd New.

Give the project a title, write its description in the editor, and set a featured image, because the featured image is what the grid cards show by default. Then assign at least one Portfolio Category, so the project appears under the right filter.

Below the editor, open the Portfolio Settings panel. This is where the project's facts live: the client, the completion date, the skills used and the project URL. The single project templates print these in the project's meta area, so filling them in here is what makes the details rows appear.

The same panel controls how this project's card behaves inside a grid:

Project Gallery holds extra images, used by the Portfolio Image block in Gallery mode and by lightbox galleries on grids. Images are chosen from the media library rather than uploaded to the project, so one image can belong to several projects.
Card Slider Shots turns the project's grid card into a slider. Two or more shots are needed, because a single shot has nothing to cycle to.
Card Video plays a self-hosted clip while the pointer rests on the card, with Card Video Poster as the still frame shown before it plays.
Wide Card gives this project the wider column in a mixed-width grid. The grid block decides how wide that column is.
Card Shape sets the shape of this project's card, and is read only by grids whose own Card Shape is set to the per-project option.

How To Show Projects On A Page

Starting screenthe block editor, on the page you are building.

Open the inserter and look under Canvas Portfolio. The Portfolio Archive Grid block renders the project grid for the portfolio archive and category pages, and the remaining blocks in the category are the parts of a single project page: the project image or gallery, the meta rows, the related projects carousel and so on. Each block has its own reference page listing every setting, so this page covers only the decisions.

Two grid settings are worth knowing before you choose anything else:

AJAX Single Loading opens projects in-page above the grid instead of navigating away, which keeps the visitor on the listing while they browse.
Grid Layout Mode switches between masonry and fitted rows, which is what decides whether cards of different heights pack together or align.

Site-wide defaults for the portfolio archive and the single project pages live under Canvas > Theme Options, in the Portfolio tab, so set your preferred layout there once rather than on every grid.

Pitfalls

The card slider does not slide. Card Slider Shots needs two or more images. One image renders as a static card, because there is nothing to cycle to.

Wide Card appears to do nothing. The setting only has an effect in a mixed-width grid. In a grid where every column is the same width there is no wider column to take.

Card Shape is ignored. A project's own Card Shape is read only when the grid's Card Shape is set to use each project's own shape. Set it on the grid first, then per project.

The lightbox opens the wrong image. The enlarge trigger on a grid card opens the Lightbox Image when one is set, and falls back to the featured image when it is empty. Set Lightbox Image only when the full-size file should differ from the card.

Every Setting

The list below is generated from the product, so it is current by construction:

Client
Created By

Name shown in the "Created by" row. Empty credits the project's WordPress author.
Completed Date
Skills / Tags
Project URL
Video URL

Shown by the Portfolio Image block in Video mode. YouTube, Vimeo, or Dailymotion.
Project Gallery

Extra images for this project, used by the Portfolio Image block in Gallery mode and by lightbox galleries on grids. Chosen here rather than by uploading to the project, so one image can belong to several projects.
Cover Image

Wide hero crop used by single templates instead of the featured image.
Lightbox Image

Opened at full size by the grid card's enlarge trigger. Leave empty to open the featured image.
Card Slider Shots

Two or more shots turn this project's grid card into a slider that cycles through them.
Card Slider Speed (ms)

How long one transition takes. Empty uses the grid default.
Card Slider Pause (ms)

How long each shot is held. Empty uses the grid default.
Card Slider Animation
Card Video

Self-hosted clip that plays while the pointer rests on this project's grid card.
Card Video Poster

Still frame shown before the card video plays.
Card Media Height

Height utility class for this project's card media box, e.g. vh-60.
Wide Card

This project takes the wider column in a mixed-width grid. The grid block decides how wide that is.
Card Shape

Shape of this project's grid card. "Image's own shape" crops nothing and lets the picture set the height. Read only by grids whose Card Shape is set to "Each project's own shape".
Primary Category

Which of this project's categories its card shows. Defaults to the first one.