Skip to content

Lay out a page with a Canvas content template

Drupal Canvas content templates place components on every node of a content type and feed their props from the node's fields. Each sub-field of a single-value compound field is a source of its own, so a component can take its name from one sub-field and its image from another.

Prepare a keynote speaker

Install Canvas, then create and attach a single-value Keynote speaker compound field on Conference with these sub-fields:

Sub-field Type
Name Text (plain)
Role Text (plain)
Biography Text (formatted, long)
Portrait Image
Website Link

Keep the host field at one value: Canvas links a single-value prop only to a single-value field. Save a Conference with a speaker. You also need a component whose props match, such as a Speaker card single-directory component with name, role, bio (HTML), portrait (Canvas image) and website (URL) props.

On Canvas 1.12 with PHP assertions on, linking a sub-field fails until Canvas carries the fix described in the patch write-up. Production sites, which run with assertions off, are not affected.

  1. Open Canvas → Templates and add a Full content template for Conference.
  2. From Library, insert the Speaker card.
  3. Next to Name, select the link icon, then Keynote speaker → Speaker → Name. The middle level is the compound item; it carries the compound's label.
  4. Link Role, Biography and Portrait to their sub-fields, and Website to Website → Resolved URL.
  5. Select Review changes and publish.

Check the result

Open the Conference. The template replaces the node's field display, and the card shows that conference's speaker.

A Speaker card showing Grace Hopper, her role, a biography with bold text, a portrait and a website link

A component prop takes one sub-field at a time. Canvas has no way to pass a whole compound item as one object prop, so a component cannot take the speaker as a single {name, role, …} value.