> For the complete documentation index, see [llms.txt](https://docs.wem.io/platform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.wem.io/platform/template-editor/layout/image.md).

# Image

### ![](/files/g3qePuIE7ixJJBUbCTjE)

Use the Image element to show an Image from your Files Library on the page. When you drop the Image element onto the canvas, a window will pop up to select the image from the library that you want to display. If the Image is not yet available, you can do right-click on a folder in the Library to create and upload a new Image, which you can then select. 

An Image element has following properties to set:

* Alt Text: the text to show when hovering over the image and which will be displayed if a user has turned off all images in the browser.
* Appearance - Rendering: 
  * Default will show the image in its original form;
  * Circle will show the image within a circle-formed frame;
  * Rounded will show the image with slightly rounded corners;
  * Thumbnail will show the image within a bordered frame-outline that has rounded corners.
* Appearance - Responsive: 
  * off: use original image dimensions or the indicated height and width values;
  * on: use the available space from the container in which the image element is placed and automatically resize to fit (responsively).
* Appearance - Alignment: 
  * Default: no specific alignment set, use the default (browser or custom definition from Design Template);
  * Left: align image element left of the container and enable other elements to float to the right of the image;
  * Center: put image in the center of the container;
  * Right: align image element to the right of the container and enable other elements to float to the left of the image;
* Appearance - Width: only available when Responsive is off, provide a numeric value to use as specific width in pixels; leave empty for implicit (will use original width or the relative width corresponding to the set Height value).
* Appearance - Height: only available when Responsive is off, provide a numeric value to use as specific height in pixels; leave empty for implicit (will use original height or the relative height corresponding to the set Width value).

{% hint style="info" %}
When Appearance is set to responsive the width and heigth are a maximum size. The image will scale to fit the page untill the maximum height or widht value is reached.
{% endhint %}

###


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.wem.io/platform/template-editor/layout/image.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.