Page-image Component: Renders the illustrative image of your page



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


This example shows the featured image of this page. We have set it to the image of the surfer below.

<page-image featured/>



You may also choose a vignette as illustrative image

<page-image vignette width="600" shadow="md"/>

Page Image




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.


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| ]]
ComboStrap UI - Page Image Component

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

Showcase yourself and your brand

Get free news, tips, and tricks
to create a remarkable experience for your readers.

Related HowTo's
Undraw Animating
How to generate and layout a list of pages with a grid and their image?

This howto shows you how to use the page sql, a fragment, the iterator and to generate a grid layout.
Undraw Animating
How to get a serie of images with the same dimension (Width and Height) ?

When rendering a serie of images, you may want them to have the same dimension (width and height) in order to get a consistent and peaceful visual. To achieve it, you need to use the combine the ratio...

Recommended Pages
Icon Default Location Combostrap
ComboStrap - Icon Component

An icon component that makes it easy to add icon to your pages
Card Illustration
ComboStrap UI - Card

A card is a box composed of an image, a text and a call to action
Undraw Add Content Re Vgqa
ComboStrap UI Inline components

Inline components are used inside a paragraph (ie in a line).
Featured Icon

The featured icon is an illustrative image that you can render with the page-image tag. This is an illustrative icon for the page. You would use it generally within an iterator. With the page image...
First image

The first image is an illustrative image that you can render with the page-image tag. As its name indicates, this is the first image found on your page. You would use it generally within an iterator....
Undraw Growth Chart R99m
How ComboStrap tackles SEO to bring you more visitors?

seoSearch engine optimization (or SEO) is the process of making your website optimized for search/enginesearch engine (Google, Bing, ...) to get to the top of their result. On a website level, it means:...
How to define your data set with Sql

This page defines the sql that can be used to retrieve data from pages
Main Header Slot Manager
Main Header Slot

The main header slot is a slot that will replace the default main header of your template. Below is an example of main header. where: breadcrumb is the hiearchical breadcrumb box is a box with...
Page Explorer List Name To Ui Region
Page-explorer: adding page navigation easily to your website

With the page-explorer component, you can add an explorer like panel that will list your pages in a list or collapsible tree fashion

Task Runner