---
title: CMSEditableImage
related:
  - https://docs.kentico.com/k82/developing-websites/developing-websites-using-aspx-templates.md
  - https://docs.kentico.com/k82/managing-website-content/configuring-the-environment-for-content-editors/enabling-on-site-editing.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

The CMSEditableImage control provides an editable region that allows content editors to add and display an image.

- The control provides an image selection interface on the **Page** tab of the **Pages** application and when viewed in on-site editing mode.
- On the live site, the control displays the selected image without the editing interface.

> **Info:** **Web part equivalent (portal engine)**: Editable image

> **Note:** **CMSPortalManager required**
>
> The CMSEditableImage cannot communicate with the database directly and it requires the **CMSPortalManager** control to load and save the image content. You only need one manager control for any number of editable image controls.
>
> It is recommended to add the CMSPortalManager to the [master page](https://docs.kentico.com/k82/developing-websites/developing-websites-using-aspx-templates/creating-master-pages-for-aspx-templates.md) used by your ASPX templates.

## Getting started

The following tutorial shows how to use the CMSEditableImage control to create a region where users can select and display images:

1. Create a new [ASPX page template](https://docs.kentico.com/k82/developing-websites/developing-websites-using-aspx-templates/creating-aspx-page-templates.md) (with a master page).
2. Select the **CMSTemplates/CorporateSite/root.master** file as the web form's master page.
   - The default master page contains the required _CMSPortalManager_ control.
3. In Visual Studio, drag the **CMSEditableImage** control from the toolbox onto the page template's form.
4. Set the control's **ImageTitle** property to: _Image Example_

   ```html

   <cms:CMSEditableImage ID="CMSEditableImage1" runat="server" ImageTitle="Image Example" />

   ```
5. Create a page based on the template in the Kentico administration interface.

The control displays an image selection dialog in the **Edit** mode of the **Pages** application.

![](https://docs.kentico.com/docsassets/k82/cmseditableimage/CMSEditableImage.png)

If you select an image and click **Save**, the control displays the given image on the live version of the page.

## Configuration

You can set the following properties for the CMSEditableImage control:

| Property name          | Description                                                                            |
| ---------------------- | -------------------------------------------------------------------------------------- |
| AlternateText          | Sets the text of the ALT attribute that the control generates for the displayed image. |
| DisplaySelectorTextBox | Indicates whether the control displays a textbox with the image path in **Edit** mode. |
| ImageControl           | Allows you to access the internal **Image** control.                                   |
| ImageCSSClass          | Sets the name of the CSS class applied to the image.                                   |
| ImageHeight            | Image height in pixels. The control resizes the image to this width.                   |
| ImageStyle             | Sets the inline style applied to the image.                                            |
| ImageTitle             | Sets the title displayed above the image in **Edit** mode.                             |
| ImageWidth             | Image width in pixels. The control resizes the image to this width.                    |