Image Formatter

Agenty ImageFormatter function is used to format the text fields into viewable image in agent result table, when the field value is a valid image source(src). The function can be used in existing field as well a new field can be added to keep both the text and the formatted Image to display in result for instant visualization.

Parameters

There are 4 parameters used to create the image element to display the image in result:

<img src="{{src}}" alt="{{alt}}" width="{{width}}" height="{{height}}" />

1. src parameter value to set in src attribute to display the image, the value must be a valid image source starts with https/https and can be a static image url or the dynamic field name in table

2. alt parameter value to set in alt attribute to display the alternate value when image is not found or server returns any error, the value must be a valid string and can be a static or the dynamic field name in table

3. width parameter value to set in width attribute, the value must be a valid integer type

4. height parameter value to set in height attribute, the value must be a valid integer type

There are 3 ways to use this function to display the image in the result table:

1. Without parameters
2. Static values in parameters
3. Dynamic field names in parameter

In this tutorial, we are going to try each of these, to see how the Image fields formatter works:

Before

The scraping agent consider all the fields DataType as TEXT by default, so if you see in the below screenshot, the field Image has the images source(src) but displaying as plain text:

beforeimage1199×669 96.4 KB

Without parameters

1. Edit the scraping agent by clicking on the Edit tab

2. Go to the field Image and click on the Edit field button

3. Now, click on the Add Formatter button to add the image formatter

   

   edit723×546 40 KB

4. The below modal dialog box will appear, where we need to select the “ImageFormatter” in drop-down and then leave the parameter as blank(by-default)

   

   image896×454 35 KB

5. Save the function and the scraping agent configuration

6. Go back to result tab

(Remember: There are no need to re-run the agent to apply the changes we made in formatter, because the formatter function just display the text in different styles and doesn’t make any change in actual result data)

image21195×676 97.8 KB

Static values in parameters

We can also use the ImageFormatter function to add a static image field. In order to do that, we just need to add a new field and then the formatter with static values in src and alt parameters.

1. Add a new field, name it as I gave Image

2. Click on the Add Formatter

3. Select the ImageFormatter and enter the static values in srcand alt parameters, and the other parameters(width, height) use the default value or you can change if you want.
   

   

   static922×480 29.8 KB

4. Save the function and agent configuration

5. Go back to result tab and see the formatted field output

   

   image static pic1113×582 71.7 KB

Dynamic field names in parameters

We can also use the ImageFormatter function to create Image dynamically by using the values in other fields in same ProductImage for each row and alternative text as ProductName.

1. Edit the scraping agent by clicking on the Edit tab

2. Go to ProductName field and click on the Edit button to edit this field

3. Click on the Add formatter function to add the formatter

4. Now, enter the ProductImage field name in src parameter and ProductName field name in alt parameter, as in screenshot below

   

   dynamic923×471 30.9 KB

5. Save the function and agent configuration

6. Go back to result tab and see the formatted field output:-

image dynamic1123×540 74.6 KB