{"id":2688,"date":"2015-03-23T19:00:32","date_gmt":"2015-03-23T11:00:32","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=2688"},"modified":"2019-09-24T10:31:34","modified_gmt":"2019-09-24T02:31:34","slug":"image-4-3-2","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/image-4-3-2\/","title":{"rendered":"Image (4.3.2)"},"content":{"rendered":"\n

This article applies to versions 4.3.2 and earlier of P2 Explorer. For help on the latest version of the image, see Image<\/a>.<\/p>\n

Overview<\/h3>\n

The Image component\u00a0displays an image on a page, which can be changed when certain conditions are met. The images used by this component must first be uploaded to a web\u00a0site.<\/p>\n

The following diagram shows an Image component being configured:<\/p>\n

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

\u00a0<\/div>\n\n\n\n\n\n\n\n\n
Display<\/strong>:<\/td>\n\n

Defines how the image will be displayed in the container. In a grid<\/a> layout the container is the grid cell; in a precision<\/a>\u00a0layout the container is indicated by the bounding box of the Image component:<\/p>\n

Image URL<\/strong>:<\/td>\nThe URL of the image to display when this condition is met.<\/td>\n<\/tr>\n
Event:<\/strong><\/td>\nThe event<\/a> that is to be evaluated to see if the condition is met.<\/td>\n<\/tr>\n
Comparison:<\/strong><\/td>\nThe operator that determines the condition to be met. The operator can be a mathematical or text comparison operator.<\/td>\n<\/tr>\n
Is Value:<\/strong><\/td>\nThe value that the event is being compared with to see if the condition set by the comparison operator is met.<\/td>\n<\/tr>\n
Default Image URL:<\/strong><\/td>\nThe image to show if none of the conditions are met.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n

\n

Tutorial<\/span><\/h3>\n

In this tutorial, we\u2019ll look at adding an Image component that references\u00a03 images. The page will display a smiley face, sad face, or neutral face, depending on certain conditions.<\/p>\n

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

Let\u2019s go through this process, step-by-step.<\/p>\n

\n

Step by Step: Displaying an Image That Changes When Conditions are Met<\/span><\/h3>\n

Before you start, open a new tab in Explorer and click the \u201cCreate a New Page in Studio Mode\u201d thumbnail. Choose the grid<\/a>\u00a0layout.<\/p>\n

If you have access to the training environment, you can follow the steps exactly as outlined here. Otherwise, you will need to adjust the configuration to suit your data.<\/p>\n

Step 1. Add and Configure a Combo Box<\/strong><\/p>\n

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

This combo box<\/a> will provide the basis for determining which image to show.<\/p>\n