ComboStrap UI - Page Image Component

About

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.

Powered by ComboStrap