Videographer

Import the Videographer 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 Videographer 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

Videographer Works

canvas-core/videographer-works

Portfolio projects as the Videographer demo card: a resting caption that fades out on hover to reveal the project gallery. In the block inserter it is named Canvas Videographer Works.

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

Layout

• Grid Wrapper ClassesDefaultportfolio row grid-container g-lg-5 g-3 text-center dark

  Classes on the grid wrapper. grid-container lets the theme isotope engine pack it.

• Grid IDDefaultportfolio

  Filter bars target the grid by this id.

• Column ClassesDefaultcol-lg-3 col-md-4 col-6

  Class names on each project column, which is what sets how many projects sit side by side at each screen width.

• Extra Item ClassesDefaultEmpty

  Class names added to every project card, for a hover effect or a frame the design gives its cards.

• Category Filter ClassesDefaultOn

  Add a pf-{term} class per project category so a filter bar can target them.

• Stagger Alternate CardsDefaultOn

  Drops every second card down a row on large screens.

Card

• Link the ImageDefaultOn

  Make the picture itself open the project. Turn it off for a grid where only the wording is clickable.

• Link Title & CategoryDefaultOff

  On: the title links to the project and the category to its archive. Off: both render as plain text.

• Category ClassesDefaultop-06 font-monospace text-uppercase ls-1 fw-normal text-smaller

  Class names on the category line under each project title, setting its typeface, casing and how faint it is.

• Overlay StyleDefaultbackground: linear-gradient(to bottom, transparent, var(--cnvs-body-bg))

  Styling of the wash that appears over a card on hover. The default fades the picture into the page background at its foot.

• Gallery Link TextDefaultView Pictures

  Wording of the link revealed across a card on hover.

• Gallery Link IconDefaultfa-solid fa-arrow-right-long

  Glyph shown beside that wording.

• Gallery Link ClassesDefaultposition-absolute top-50 translate-middle text-light font-monospace z-1

  Class names on that link. They centre it over the picture and set its colour, so keep the positioning part.

Query

• ProjectsDefault0

  0 shows every project.

• Category SlugDefaultEmpty

  Limit the grid to one project category. Empty = all.

• Exclude Current ProjectDefaultOff

  Leaves the project being viewed out of the grid, for a related row on a project page.

• Order ByDefaultMenu Order

  What decides the sequence of the projects. Menu Order lets you arrange them by hand; Random reshuffles on every visit.

  ChoicesMenu OrderDateTitleRandom

• OrderDefaultAscending

  Which end of that sequence comes first. Ignored when the order is random.

  ChoicesAscendingDescending