{"id":12840,"date":"2017-12-02T14:59:48","date_gmt":"2017-12-02T06:59:48","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=12840"},"modified":"2018-11-09T08:42:51","modified_gmt":"2018-11-09T00:42:51","slug":"image-4-4-6","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/image-4-4-6\/","title":{"rendered":"Image (4.4.6)"},"content":{"rendered":"\n

This article applies to versions 4.4.6 and later of P2 Explorer. See Release History<\/a> for more. For the latest, see Image<\/a>.<\/p>\n

Overview<\/h2>\n

The image component is used to display an image on an Explorer page.<\/p>\n

The component can be configured to show one of many different images, where the displayed image is shown when a specific condition is met.<\/p>\n

\"\"<\/a>

This image of a Well Schematic has a URL assigned as the default image address<\/p><\/div>\n

<\/i>BEST PRACTICE<\/span><\/p>\n

You can add really complex images, such as drawings, maps or schematic diagrams to your Explorer pages. In order to overlay these images with text labels, data labels or hotspots, you should use the Precision Layout<\/a>.<\/p>\n<\/div>\n

\n

The Image Component<\/h2>\n

When configuring an image, give it a Default Image URL<\/strong>, and choose a way to Display<\/strong> it (for example, CENTER, TOPLEFT, STRETCH).<\/p>\n

If you want the image to change under certain conditions, then Add<\/strong> more Images<\/strong> (1st Image, 2nd Image, 3rd Image<\/em>) etc., specifying conditions for each.<\/p>\n

Note<\/strong>: Only a single image is displayed at any time, where more than one image option is available to a single image component.<\/p>\n

\"\"<\/a><\/p>\n

If your image is a diagram or schematic, you can overlay it with text labels and data labels, to make it more meaningful.<\/p>\n

Note<\/strong>: Be careful of adding labels to images that can change, as these might not make sense with each image. If you need more than just an image change, you could consider using the Switch<\/a> component.<\/p>\n

For a full description of the Image properties, see the Comprehensive Reference<\/a> at the end of this article.<\/p>\n

\u00a0<\/p>\n

\n

Tutorial 1: Configuring a Simple Image<\/h2>\n

If you're unfamiliar with the process of building pages, read the article\u00a0Building an Explorer Page<\/a>.<\/p>\n

In this tutorial we'll add an image onto an Explorer page.<\/p>\n

\"\"<\/a><\/p>\n

There are two steps in the tutorial:<\/p>\n