> 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

### ![](https://1449034948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_NpOsk0sjotPXNy29Q%2Fuploads%2F0Wy0GkxPKQ8jgTrKsiCF%2Ffile.png?alt=media\&token=2406c662-7ed1-4cd4-8f6c-07b56d931ea2)

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.&#x20;

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:&#x20;
  * 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:&#x20;
  * 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:&#x20;
  * 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
