---json
{
    "canonical": ":pageimage",
    "description": "Page-image is a component that renders the illustrative image of the page and is generally used in a fragment.",
    "featured-raster-image": ":docs:content:surfer600.png",
    "h1": "ComboStrap UI - Page Image Component",
    "images": [
        { "path": ":docs:content:surfer600.png" }
    ],
    "low_quality_page": "false",
    "page_id": "q488r8aajeb36b3jz8z92",
    "title": "Page-image Component: Renders the illustrative image of your page"
}
---
====== Page-image Component: Renders the illustrative image of your page ======


===== About =====
''page-image'' is a [[content|content component]] that chooses and renders one of the [[:docs:page:image|page images]] (illustration, thumbnail) defined for a page.





===== Example =====

==== Featured Image ====

This example shows the [[:docs:page:featured-image|featured image]] of this page. We have set it to the image of the surfer below.

<webcode name="Default" frameborder="0">
<code dw>
<page-image featured/>
</code>
</webcode>

==== Vignette ====

You may also choose a [[:docs:content:vignette|vignette]] as illustrative image

<webcode name="Default" frameborder="0">
<code dw>
<page-image vignette width="600" shadow="md"/>
</code>
</webcode>




===== Syntax =====

<code dw>
<page-image
   type="type"
   default="featured|first|ancestor|vignette|logo"
   path="path"
   zoom="int"
   linking="nolink|linkonly|direct|details"
/>
</code>
where
  * ''path'' is the [[:docs:page:system:path|page path]] to show the image for. Default to the actual page path or the [[:docs:templating:iterator|path given by the iterator]]
  * [[:docs:styling:type|type]] is one of:
      * ''featured'' is the [[:docs:page:featured-image|featured image]] (default)
      * ''first'' is the [[docs:page:first-image|first image of the page]]
      * ''icon'' is the [[:docs:page:featured-icon|featured icon]].
      * ''vignette'' is the [[vignette|vignette]]
      * ''ancestor'' is the featured image found in the [[:docs:page:category|parent]] or any [[:docs:page:system:system|grand parent]]
      * ''logo'' is the [[:docs:app:logo|app logo]]
  * ''zoom'' is the zoom factor and is applied only to the [[:docs:page:featured-icon|featured icon]]
  * ''default'' determines the default image type chosen in order of precedence (default to ''featured|ancestor|first|vignette|logo|none'')
  * ''linking'', the default value is ''nolink''. See [[:docs:content:image#imagedefaultlinking|image linking]]


<note>
  * All [[docs:content:image|image attributes]] such ''width'' / ''height'' / ''ratio'' and ''color'' and more can be applied.
  * For an [[docs:content:icon|icon]], the default color is the [[:docs:theme:branding-colors|primary color]] if set
</note>



===== Multiple Meta Image selection =====

When the ''ratio'' is set, if there is more than one [[release:deprecated:images-meta|page image metadata]] the algorithm will select the image with the most equivalent ratio.


===== Support =====

==== Icon Support ====

When the image is an [[docs:content:icon|icon]], the icon is by default zoomed out 4 times and centered.

<webcode name="Default" frameborder="0">
<code dw>
<page-image icon path=":docs:content:icon" ratio="16:9" color="pink" width="198"/>
</code>
</webcode>


==== Card Support ====


A page-image is supported as illustrative image for a [[docs:block:card|card]]

Example a card with data of this page with [[:docs:templating:variable|variable]]
<webcode name="Default" frameborder="0">
<code dw>
<card clickable width="300">
    <page-image ratio="16:9"/>
    <heading 3>$h1</heading>
    $description [[$path| ]]
</card>
</code>
</webcode>