Skip to Content

Rendering

<Clover.Rendering /><clover-rendering>0.6 kB added to a page with a Root, gzipped7 kB added to a page with a <clover-root>, styles included, gzipped

The other formats the resource comes in, such as a PDF or a transcript, as a list of links.

<Clover.Root iiifContent={url}>
  <Clover.Rendering of="canvas" />
</Clover.Root>
<clover-root
  iiif-content="https://clover.iiif.library.northwestern.edu/mocks/transcripts/manifest.json">
  <clover-rendering of="canvas"></clover-rendering>
</clover-root>

API reference

Reads rendering from the Root’s resource and renders a ul: a link to each format, named by its label or else its address, with its format after it. It renders nothing while there is none, and its other props go to the ul. Download<clover-download> lists the view’s and the resource’s together, in two groups.

PropTypeDefaultDescription
of"manifest" | "canvas""manifest"Whose rendering: the resource’s, or the Canvas the reader is on.
value{ id, label, format }[]—Formats to show instead of the Root’s, as IIIF gives them.
classNamestring—Added to clover-rendering.

<clover-rendering>

The rendering: alternate formats, such as a PDF of the whole object, as a list of links, each with its format.

NameTypeDefaultDescription
of"manifest" | "canvas"manifestWhose property: the Manifest's, or the Canvas in view's.
valuestring (a URL or JSON)—Renderings, instead of the root's: as text, a URL or JSON. Outside a root, the one to show.
.valuestring | Array<{ id: string; label?: Record<string, string[]>; format?: string }> | null—As a property: Renderings, instead of the root's.

Examples

The current Canvas

Beside a Body<clover-body>, of="canvas" lists the formats of the Canvas in view, and changes as the reader moves. Each page of this newspaper links its own text.

<Clover.Body />
<Clover.Rendering of="canvas" />
<clover-body></clover-body> <clover-rendering of="canvas"></clover-rendering>

Outside a Root

Give it value, the formats as IIIF gives them, and it needs no Root<clover-root>.

<Clover.Rendering
  value={[
    {
      id: "https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/transcript.txt",
      type: "Text",
      label: { en: ["Transcript in plain text format"] },
      format: "text/plain",
    },
  ]}
/>
<clover-rendering
  value='[{"id":"https://clover.iiif.library.northwestern.edu/mocks/rudolf-hess-nuremberg/transcript.txt","type":"Text","label":{"en":["Transcript in plain text format"]},"format":"text/plain"}]'></clover-rendering>

Previous versions

Clover 3.x › Rendering

  • rendering is value: inside a Root<clover-root>, leave it out.
  • For the Canvas in view, of="canvas".
  • Always a ul: no as.