Image

Image is a gh-element that contains images and allows to display and update it in application.

Functional Characteristics

Image can be used in different ways in application. For example, it can be used as a big banner, like source of images in slider or grapes HTML editor. The user can add an image to cards and create a full-fledged online store or gallery.

Value Format

Since image is file we add it in application as an object of file_list. Each of file from that list is located in a separated field and has file_id. Exactly that ID is used as a value for image gh-element. Multiple values are separated by a comma.

{
    "field_value": "928006,928008"
}

Element Options

Element options of the image element has two groups of settings.

Field Settings

Field settings contains field name, name space, and a few other options.

Image Editor

Image editor is popup window that allows to edit image then user uploads it in application. It has two tabs:

• Crop

  

• Perspective

  

Compress Image

This option allows to compress images from the field. When it is on, the next option appears.

Quality

Here you can set the value of the image quality after compressing.

Type

These are the settings that determines what value will be contained in element, single or multiple.

Single

The first type limits the number of images that can be loaded and displayed in the field to one.

Multiple

The multiple type allows to upload and display unlimited number of images.

Element Style

Image element has all standard settings and lots of interpretation types. In addition, it has extra options in General Settings.

General Settings

There are two extra options in general settings of the image element.

Popup Image

This function allows opening an image on a full screen by clicking on it. If popup image is off, nothing happens after clicking on image.

Cover Style

Allows to change the style of that how image is displayed with original proportions or with the standard square proportions of the image element.

Data Model

Image gh-element has a simple data model with intuitive properties.

{
    "data_model": {
        "compress": false,
        "display_mode": "single",
        "image_editor": 1,
        "image_preview_selected_size": 128,
        "interpretation": [],
        "quality": "1",
        "show_field_name": true
    }
}

Filtration

As well as file elements, images can be filtered out only by Value.

Interpretation

Image element has many types of interpretation, half of which are quite similar.

File Name

Due to this interpretation type images are displayed as a file name and field is not editable.

URL

This interpretation type displays an editable URL of the image page.

Icon

This interpretation allows to display images as icons in a view. When you click on the icon, a particular image will be displayed on the full screen.

Size 64x64

It displays 64x64 images in the field, allows to delete them, add a new one, and open them full screen when you click on it.

Default

This interpretation is similar to previous one, but allows to display 128x128 images.

Size 256x256

Allows to display editable 256x256 images.

Size 512x512

This interpretation type allows to add, delete and display 512x512 image in the application.

Full Size

This interpretation type allows to display full size images in the application, update and delete it.

Canvas(Document)

This interpretation allows images to be displayed as full size images that you cannot delete and edit, or add a new one.

Value

The last type displays a link to the image generated in GudHub.