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}}" />
-
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 -
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 -
width
parameter value to set in width attribute, the value must be a valid integer type -
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:
- Without parameters
- Static values in parameters
- 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:
Without parameters
-
Edit the scraping agent by clicking on the
Edit
tab -
Go to the field Image and click on the
Edit field
button -
Now, click on the
Add Formatter
button to add theimage formatter
-
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)
-
Save
the function and the scraping agent configuration -
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)
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.
-
Add a new field, name it as I gave Image
-
Click on the
Add Formatter
-
Select the
ImageFormatter
and enter the static values insrc
andalt
parameters, and the other parameters(width, height) use the default value or you can change if you want.
-
Save
the function and agent configuration -
Go back to result tab and see the formatted field output
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.
-
Edit the scraping agent by clicking on the
Edit
tab -
Go to ProductName field and click on the
Edit
button to edit this field -
Click on the
Add formatter
function to add the formatter -
Now, enter the ProductImage field name in
src
parameter and ProductName field name inalt
parameter, as in screenshot below -
Save
the function and agent configuration -
Go back to result tab and see the formatted field output:-