MCS Publishing | PPF Image Widget

PPF Image widget

Images can be added manually to the report but must be uploaded to MCS in order to do so. Using the image widget allows images to be imported from other sources.

Below is an example of ALL the options available when defining an image widget. Some options are required, the options that are not required don't need to be defined unless something other than default is desired.

var ppf_widgets = {
    example_image: { //Name of widget, these must be unique within the ppf_widget definitions
        ele: [ 'eximage'], //REQUIRED
        src: 'https://example.com/image.png', //REQUIRED
		  datadepend: ['voip','act'],
        width: '200px',
        height: '200px',
        alttxt: 'image',
        url: '',
        type: 8, //REQUIRED
        depend: [[]]
    }
}

Defining a image widget

Key	Value
ele	Required. The element(s) defined here refer to HTML elements that should be present in the HTML page that pairs with the PPF. So, if the HTML element the table should appear in is `<div id='eximage'></div>` the ele definition would be `ele: ['eximage']`
datadepend	`datadepend: ['voip','act']` If a widget is dependant on a certain data type then define a data dependency value. The format is an array. Common test types that can be defined are voip, act (which is Quality speed data), route, and capacity.
type	Required. Image is type 8 and must be defined. When defined it should look like this `type: 8`
src	Required. Define the source of the image. This can be a FQDN or it can be relative to the page itself. Note that defining a source using HTTP when the report is using HTTPS will cause the image GET to fail. `src: 'https://example.com/image.png'`
width	Set the width to be used for the image as a pixel or a percentage. `width: '200px'`
height	Set the height to be used for the image as a pixel or a percentage. `height: '200px'`
alttxt	Alt text is the text that appears should the image not be available. It's also good practice for SEO. Define any alt text using this option. `alttxt: 'image alt text'`
url	When a URL is defined it enables the image to be clicked. The URL will then open in the same window. `url: 'https://www.visualware.com' //type string`
depend	Click here for dependency information.