Configure Image Editable Regions

Image Editable Regions are one type of Editable Region you can add to your layout and HTML-like files to enable visual editing. Image Editable Regions allow you to upload images from your local storage, select existing images from your repository or DAM, and manage image details like title or alt text.

These instructions assume you have configured your build settings and are comfortable editing HTML layouts, either in CloudCannon's Source Editor or your local development environment.

To configure Image Editable Regions in the Visual Editor:

1. Identify the file you want to which you want to add an Image Editable Region. We recommend any layout files that contain templating that is populated by content files at build time.
2. Open the file in CloudCannon's Source Editor or your local development environment.
3. Identify the <img> HTML tag that contains your templating and add the HTML attribute data-editable="image" . If no DOM element is available, you can wrap the templating in the <editable-image> web component.
4. Add the data-prop-src="" HTML attribute to the same DOM element, or to the <editable-image> web component. The value of data-prop-src should be the path the to data property you want to edit.
5. Optional. If you store image title or alt text data in your content files, add the data-prop-title="" and data-prop-alt="" HTML attributes to the same DOM element, or to the <editable-image> web component. The value of these attributes should be the path the to data property you want to edit.
6. Save the change to your Site. CloudCannon will automatically rebuild your Site.

When you open the file in the Visual Editor, CloudCannon will show yellow Editable Region boxes around the image. CloudCannon will show a data panel for selecting your image when you click into the Editable Region.

Examples#

Here are a few examples of different Image Editable Regions:

<div class="hero-image">
    {heroImage &&
      <img
        data-editable="image" 
        data-prop-src="heroImage" 
        data-prop-alt="heroImageAlt" 
        data-prop-title="heroImageTitle" 
        width={1020}
        height={510}
        src={heroImage}
        title={heroImageTitle}
        alt={heroImageAlt}
      />
    }
</div>

Expected data property format#

Image Editable Regions expect the data defined by data-prop to be in the key: string format. By using the data-prop-* attribute, we can append a key to the value passed to the Image Editable Region.

For example, data-prop="theme_color" pointing at the front matter object theme_color: red would pass the value "red" to the Editable Region in the Visual Editor. If we use data-prop-color="theme_color" instead, we can pass "color: red" to the Editable Region.

Misconfigured Image Editable Regions#

CloudCannon will display an orange warning box in the Visual Editor if your Image Editable Regions is misconfigured.

Image Editable Regions are misconfigured if:

• You did not define the data-prop HTML attribute.
• The Editable Region has an invalid data type (e.g., your Text region has a number or object, instead of a string).
• There is no <img> child element in the Image Editable Region web component.
• Upload failures