GH-Elements

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.

Field settings of the image element

Name Description
Image Editor allows to edit selected image; details...
Compress image allows to compress uploaded image; details...
Quality allows to set the quality of compressed image; details...

Image Editor

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

  • Crop

    Crop editor of image

  • Perspective

    Perspective editor of image

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.

Types of image

Name Description
Single allows to add and display only the single image; details...
Multiple allows to add and display multiple images; details...

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.

Style of the image elements

General Settings

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

General settings of image element

Name Description
Popup image allows to open them full screen when you click on it; details...
Cover style allows to set how an image will be displayed; details...

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
    }
}
Name Type Description
compress boolean shows is the image compressed or not
display_mode string shows whether an element accepts multiple values
image_editor boolean shows whether image editor works or not
image_preview_selected_size number size of image preview
interpretation array contains all image interpretations
quality string contains the value of the image quality
show_field_name boolean shows whether the field name is displayed

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.

Types of image interpretation

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.