ComboStrap UI - Page Image Component


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

This component is generally used in a template iteration to create illustrative image for block component (mainly for cards)

The generated image inherits all images features such as lazy loading and responsiveness.


The original page image

This example shows the page image of this page (path: :docs:content:page-image) - We have set it to the image of the surfer below.

<page-image path=":docs:content:page-image" />

Page images with a 4:3 ratio and a height

Note that the image has an intrinsic ratio of 16:9, we can change it to a ratio of 4:3 with the below markup and constraints the height

<page-image path=":docs:content:page-image" ratio="4:3"/>

In a template iteration where the width of each element is set, the ratio permits to get the same image aspect-ratio as well as the same dimension for all images. The visual rendering is therefore consistent and peaceful.


    width="..." heigth="..." ratio="..." color=".." 

where the following attributes are:

  • mandatory: path is the path of a page
  • optional:

When the ratio is set, the algorithm will:

  • select the image in the set of page image with the most equivalent ratio
  • crop the image to fit the ratio

For an icon, the default color is the primary color if set


Icon Support

When the image is an icon, the icon is zoomed out to 3 times and centered.

<page-image path="docs:templating:sql" ratio="16:9" color="pink" width="198" border-color="pink"/>

Card Support

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

Example a card with data of this page (thanks to the template component)

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

ComboStrap UI - Page Image Component

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

Powered by ComboStrap