Show / Hide Table of Contents

User interface overview

These are the core parts of the user interface for web editors. The add-on works for both property and on-page editing.

Single image properties

A SingleImage property has a single form factor. It can, however, have one or more proportions formats defined, depending on required constraints.

A single image property in edit mode

Cropping

Clicking the thumbnail, or the little scissors icon, opens the crop dialog.

Cropping an image to a specific proportions format

Image description

It is also possible to specify an image description, normally rendered as an alt attribute on the img element.

Editing the description of an image

Adaptive image properties

An AdaptiveImage has three form factors, commonly used for three main screen types, e.g. desktop, tablet, and mobile.

Each form factor can have its own image, constraints, and/or cropping.

Dragging-and-dropping an image to the drop zone sets all form factors to the same original image.

Editing the description of an image

If cropping the form factors differently isn't enough, each form factor can have separate images.

Editing the description of an image

List properties

List properties are useful for when you need to add an arbitrary number of images, for example to create a slideshow.

A list of items with adaptive and single images

Image bank

If one or more searchable image providers are added, they appear in the Image bank component.

Image bank used to search for images

Code samples

  • Adding a SingleImage property

  • Adding an AdaptiveImage property

  • Adding a list property

  • Adding an image provider

☀
☾
In this article
Back to top
Documentation applies to: Adaptive Images 2.x
☀
☾