# 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.

## Example

### 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.

## Syntax

<page-image
path="path"
width="..." heigth="..." ratio="..." color=".."
default="imagePath|none"
/>


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

## Support

### 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)

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


#### 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.