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.
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
-
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.
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.
General Settings
There are two extra options in general settings of the 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... |
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
}
}
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.
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.