# 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" />


### A page image with a 4:3 ratio

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.

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


## Syntax

<page-image path="path" ratio="ratio"/>


where:

• path is the path of a page
• ratio is the ratio of the image (default to original):
• 16:9
• 4:3
• 1:1

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

The ratio is important in a template iteration because it permits to get the same height for all images. This way the layout will get a consistent and peaceful visual.

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