Page-image Component: Renders the illustrative image of your page

About

page-image is a content component that chooses and renders one of the page images (illustration, thumbnail) defined for a page.

Example

Featured Image

This example shows the featured image of this page. We have set it to the image of the surfer below.

<page-image featured/>

Vignette

You may also choose a vignette as illustrative image

<page-image vignette width="600" shadow="md"/>

Syntax

<page-image
   type="type"
   default="featured|first|ancestor|vignette|logo"
   path="path"
   zoom="int"
   linking="nolink|linkonly|direct|details"
/>

where

• path is the page path to show the image for. Default to the actual page path or the path given by the iterator
• type is one of:
  • featured is the featured image (default)
  • first is the first image of the page
  • icon is the featured icon.
  • vignette is the vignette
  • ancestor is the featured image found in the parent or any grand parent
  • logo is the app logo
• zoom is the zoom factor and is applied only to the featured icon
• default determines the default image type chosen in order of precedence (default to featured|ancestor|first|vignette|logo|none)
• linking, the default value is nolink. See image linking

Multiple Meta Image selection

When the ratio is set, if there is more than one page image metadata the algorithm will select the image with the most equivalent ratio.

Support

Icon Support

When the image is an icon, the icon is by default zoomed out 4 times and centered.

<page-image icon path=":docs:content:icon" ratio="16:9" color="pink" width="198"/>

Card Support

A page-image is supported as illustrative image for a card

Example a card with data of this page with variable

<card clickable width="300">
    <page-image ratio="16:9"/>
    <heading 3>$h1</heading>
    $description [[$path| ]]
</card>

ComboStrap UI - Page Image Component

Page-image is a component that renders the illustrative image of the page and is generally used in a fragment.