icon Image

The Image control allows you to add images to your forms. Image can either be used as decoration or as a link.

This page contains a detailed description of the control properties and JavaScript samples which you can use with this control.

Image control

Properties

Here you can find properties specifically related to the Image control.

Name

A unique identifier for the control.

Name property

JavaScript

The Name property allows to work with the control via JavaScript code, like this:

fd.rendered(function(){
    //can access the control using its Name:
    fd.control('Image1').href = 'https://plumsail.com/';
 });

Image

You can upload an image, select one of the previously uploaded images or specify the URL of the image.

Click here to get started:

Image property

You can then either upload an image:

Upload an image

Pick an existing image that you’ve previously uploaded:

Pick an image

Or specify a URL to an image publicly available in the web:

Specify a URL

Width

The property defines the width of the control in pixels. Height will automatically adjust to keep the proportions of the image, based on the width.

If left blank, the image will be able to take up all the available width in the current grid cell.

Width property

Height

You can specify the Height of the image in pixels:

Height property

If left empty, the image will automatically adjust its height to keep the proportions of height and width, shrinking or growing based on the available width. If the width is not set, then lowering the height will automatically lower the width to keep the proportions.

Alt

Allows you to specify an alternate text for an image here.:

Alt text for the image

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

Class

Add a CSS class to the control, which comes in handy with CSS or even JavaScript code. This will work as a class attribute for an HTML tag.

Control's class

The same class can be applied to multiple fields and controls, and then you can use CSS to modify the appearance of these. For example, here we’ve used the following CSS code in the CSS editor to give controls with my-class a rounded appearance:

.my-class {
    border-radius: 50%;
}

Control's class with CSS on the form

Style

Add custom CSS style to the control. This will work as a style attribute for an HTML tag.

Control's style

You can apply different styles to the control. For example, the following style will allow you to give shadow to the image:

box-shadow: 10px 10px 5px gray;

Control's style with CSS on the form

Url

Specify the URL of the page clicking the image sends a user to. Leave blank if not needed.

Hyperlink Url

Target

The target attribute specifies where to open the link. Select between Self (open link on the same page) and Blank (open link in a new tab).

Hyperlink Target

Click

Add JavaScript to execute when an image is clicked.

Click code

JavaScript

In this section, you can find basic examples of how to work with the control using JavaScript.

If you are not familiar with the JavaScript framework, get started with the JavaScript basics.

Note

The control is only accessible once the form is rendered, so all calls to the control must be inside fd.rendered event:

fd.rendered(function(){
    //hide the control
    $(fd.control('Control1').$el).hide();
    //show the control
    $(fd.control('Control1').$el).show();
});

Get or set image source

Get or set the source of the image with the following property:

//return the source of the image as a URL string
fd.control('Control1').source;

//set the source of the image as a URL string
fd.control('Control1').source = 'https://images.com/my-image.png';

Get HTML element

Access HTML element inside the control in order to modify it, hide it, or do something else.

//access control's HTML
var htmlControl = fd.control('Control1').$el;

Get or set alt text

Get or set the alternate text of the image with the following property:

//return the alternate text of the image
fd.control('Control1').alt;

//set the alternate text of the image
fd.control('Control1').alt = 'This picture is awesome, if only you could see it!';

Get or set image width and height

Get or set the width or height of the image with the following properties:

//return the width of the image
fd.control('Control1').width;
//return the height of the image
fd.control('Control1').height;

//set the width of the image
fd.control('Control1').width = '256';
//set the height of the image
fd.control('Control1').height = '512';

Get or set script that runs on click

Property that holds JavaScript that is executed when link is clicked:

 //get the script that runs on click
 fd.control('Control1').onclick;

 //set the script that runs on click
 fd.control('Control1').onclick = 'alert("Hyperlink is clicked!")';

//trigger the code to run with JavaScript
fd.control('Control1').click();