---json
{
    "canonical": ":page:image",
    "images": [
        { "path": ":docs:block:stock_image_surfer_in_the_see.png" }
    ],
    "name": "Page Image",
    "page_id": "ma3pma1fgig4oye93n2c8",
    "slug": ":image",
    "title": "The page image metadata"
}
---
====== Deprecated - Page Images Metadata ======


===== Replacement =====
The ''images'' metadata has been replaced by:
  * [[:docs:page:featured-image|featured image]]
  * [[:docs:social:twitter|twitter image]]
  * [[:docs:social:facebook|facebook image]]
  * [[:docs:page:featured-icon|featured icon]]


===== Why? =====
  * It was too complicated for the user to get a grasp of which image would be used for which usage.
  * It was not possible to see the default usage value.

The first idea was to be able to upload a bunch of images with different ratios and to choose the best but it's not following the ''kiss'' principle.
The development direction is to upload one image and to be able to transform it as wanted.


===== Old documentation =====

''image'' is a [[docs:metadata:metadata|page metadata]] that defines an illustrative [[docs:content:image|image]] for the page.




===== Usage =====

==== Page Image ====

The image can be rendered with the [[docs:content:page-image|page-image component]] in:
      * a [[:docs:theme:slot:main_header_slot|main content header]]
      * or [[:docs:templating:iterator|iterator]]

Example for this page:
<webcode name="Default" frameborder="0">
  * The markup
<code dw>
<page-image width="300px"/>
</code>
  * The output:
</webcode>

==== Social ====
The image is added into [[docs:social:social|social]] cards such as [[docs:social:twitter|twitter]], [[docs:social:google|google]] or [[docs:social:facebook|facebook]].


===== How to set the images from the page ? =====

The recommended images are:
   * high-resolution (minimum of 300,000 pixels when multiplying ''width'' and ''height'', to avoid blurry, unclear images)
   * with the following aspect ratios: ''16x9'', ''4x3'', and ''1x1'' (to avoid [[docs:content:image#cropping|cropping]])

==== Metadata Manager ====

You can set the path of your image in the [[docs:metadata:manager|metadata manager]].

{{:docs:page:page_image_metadata_manager.png?0x400|}}

==== You can't upload from the metadata manager ====

Note that you can't upload the images with the metadata manager for now, therefore:
  * you need to upload your image while editing first (note that the first image in your page is by default the page image).
  * or you can edit the [[docs:metadata:frontmatter|frontmatter]] directly.

**Frontmatter example:**
  * Single Image
<code json>
{
    "image": ":photos:1x1:photo.jpg"
}
</code>
  * Multiple:
<code json>
{
    "image": [
         ":photos:1x1:photo.jpg",
         ":photos:4x3:photo.jpg",
         ":photos:16x9:photo.jpg"
    ]
}
</code>

<note>
Moving image path with the [[support:plugin#move|move plugin]] will update their path.
</note>