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
- All image attributes such width / height / ratio and color and more can be applied.
- For an icon, the default color is the primary color if set
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>
