{"id":41767,"date":"2018-10-17T14:07:37","date_gmt":"2018-10-17T06:07:37","guid":{"rendered":"http:\/\/localhost\/help\/?page_id=41767"},"modified":"2024-10-23T14:20:49","modified_gmt":"2024-10-23T06:20:49","slug":"image","status":"publish","type":"page","link":"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/","title":{"rendered":"Image"},"content":{"rendered":"\n<p class=\"left-bar\">This article applies to versions 4.6.4 and later of IFS OI Explorer. See <a href=\"#Release_History\">Release History<\/a> for more.<\/p>\n<h2 class=\"page-subheading\">Overview<\/h2>\n<p class=\"overview\">The image component is used to display an image on an Explorer page.\u00a0It can be configured to:<\/p>\n<ul class=\"intro-text\">\n<li>Show a different image depending on which specific condition is met; or<\/li>\n<li>Be clicked so that the user is directed to another page, trend, or URL.<\/li>\n<\/ul>\n<p class=\"intro-text\">The following screenshot is a schematic containing a background image and a number of preset <em>valve<\/em> images, with labels overlaid to indicate various measures.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/well-schematic.png\" rel=\"lightbox-0\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42092\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/well-schematic.png\" alt=\"\" width=\"531\" height=\"614\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/well-schematic.png 531w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/well-schematic-130x150.png 130w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/well-schematic-21x24.png 21w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/well-schematic-31x36.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/well-schematic-42x48.png 42w\" sizes=\"auto, (max-width: 531px) 100vw, 531px\" \/><\/a><\/p>\n<div class=\"best-prac\"><i class=\"fa fa-trophy fa-2x fa-pull-left\"><\/i><span class=\"best-prac-text\">BEST PRACTICE<\/span><\/p>\n<p class=\"best-prac-desc\">You can add really complex images, such as mimics or schematic diagrams to your Explorer pages. In order to overlay these images with text labels or data labels, you should use the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">Precision Layout<\/a>.<\/p>\n<\/div>\n<hr \/>\n<h2 class=\"page-subheading\">Quick Start<\/h2>\n<p class=\"intro-text\">When configuring an image, give it a <strong>Default Image URL<\/strong>, and choose a way to <strong>Display<\/strong> it (for example, CENTER, TOPLEFT, STRETCH).<\/p>\n<p class=\"intro-text\">If you want the image to change under certain conditions, then click\u00a0<strong>Add<\/strong>\u00a0for each additional image, specifying conditions for each.<\/p>\n<p class=\"note\"><strong>Note<\/strong>: Where there are conditional images, only a single image is displayed at any one time for the component.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-config.png\" rel=\"lightbox-1\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42096\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-config.png\" alt=\"\" width=\"671\" height=\"844\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-config.png 671w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-config-119x150.png 119w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-config-19x24.png 19w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-config-29x36.png 29w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-config-38x48.png 38w\" sizes=\"auto, (max-width: 671px) 100vw, 671px\" \/><\/a><\/p>\n<p class=\"note\"><strong>Note<\/strong>: When adding labels to images that can change, consider that these might not make sense with each image. If you need more than just an image change, you could consider using the <a title=\"Switch\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/switch\/\">Switch<\/a> component.<\/p>\n<p class=\"intro-text\">For a full description of the Image properties, see the <a title=\"Comprehensive Reference\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/#Comprehensive_Reference\">Comprehensive Reference<\/a> at the end of this article.<\/p>\n<h3>Other Images<\/h3>\n<p class=\"intro-text\">The <strong>Other<\/strong> group in the Toolbox has a set of pre-defined images.<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/other-images.png\" rel=\"lightbox-2\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42097\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/other-images.png\" alt=\"\" width=\"207\" height=\"326\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/other-images.png 207w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/other-images-95x150.png 95w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/other-images-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/other-images-23x36.png 23w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/other-images-30x48.png 30w\" sizes=\"auto, (max-width: 207px) 100vw, 207px\" \/><\/a><\/p>\n<p class=\"intro-text\">These have exactly the same configuration options as a regular Image component. The only difference is that a <em>Default Image<\/em> has already been selected for each of these.<\/p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\">\n<tbody>\n<tr>\n<td style=\"width: 12.5%; text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42074 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/crusher.png\" alt=\"\" width=\"52\" height=\"44\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/crusher.png 52w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/crusher-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/crusher-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/crusher-48x41.png 48w\" sizes=\"auto, (max-width: 52px) 100vw, 52px\" \/><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42083 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/distiller.png\" alt=\"\" width=\"50\" height=\"44\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/distiller.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/distiller-24x21.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/distiller-36x32.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/distiller-48x42.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%; text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42075 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/dryer.png\" alt=\"\" width=\"51\" height=\"28\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/dryer.png 51w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/dryer-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/dryer-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/dryer-48x26.png 48w\" sizes=\"auto, (max-width: 51px) 100vw, 51px\" \/><\/td>\n<td style=\"width: 12.5%; text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-42084 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/heatexchanger.png\" alt=\"\" width=\"50\" height=\"40\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/heatexchanger.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/heatexchanger-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/heatexchanger-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/heatexchanger-48x38.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%; text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-42077 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/heater.png\" alt=\"\" width=\"50\" height=\"42\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/heater.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/heater-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/heater-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/heater-48x40.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%; text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-42085 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/mill.png\" alt=\"\" width=\"50\" height=\"30\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/mill.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/mill-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/mill-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/mill-48x29.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%; text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42078 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/oreship.png\" alt=\"\" width=\"50\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/oreship.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/oreship-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/oreship-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/oreship-48x32.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%; text-align: left;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42086 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/pond.png\" alt=\"\" width=\"50\" height=\"23\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/pond.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/pond-24x11.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/pond-36x17.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/pond-48x22.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 12.5%; text-align: center;\"><em>Crusher<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Distiller<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Dryer<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Heat Exchanger<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Heater<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Mill<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Ore Ship<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Pond<\/em><\/td>\n<\/tr>\n<tr>\n<td style=\"width: 12.5%;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42079 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/pump.png\" alt=\"\" width=\"50\" height=\"39\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/pump.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/pump-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/pump-36x28.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/pump-48x37.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42087 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/reclaimer.png\" alt=\"\" width=\"50\" height=\"31\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/reclaimer.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/reclaimer-24x15.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/reclaimer-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/reclaimer-48x30.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42080 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/rectangle.png\" alt=\"\" width=\"50\" height=\"42\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/rectangle.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/rectangle-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/rectangle-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/rectangle-48x40.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42088 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/rounded-rectangle.png\" alt=\"\" width=\"50\" height=\"40\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/rounded-rectangle.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/rounded-rectangle-24x19.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/rounded-rectangle-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/rounded-rectangle-48x38.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42081 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/stacker.png\" alt=\"\" width=\"50\" height=\"30\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/stacker.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/stacker-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/stacker-36x22.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/stacker-48x29.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42089 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/stockpile.png\" alt=\"\" width=\"50\" height=\"28\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/stockpile.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/stockpile-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/stockpile-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/stockpile-48x27.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-42082 size-full aligncenter\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/valve.png\" alt=\"\" width=\"50\" height=\"33\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/valve.png 50w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/valve-24x16.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/valve-36x24.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/valve-48x32.png 48w\" sizes=\"auto, (max-width: 50px) 100vw, 50px\" \/><\/td>\n<td style=\"width: 12.5%;\">\u00a0<\/td>\n<\/tr>\n<tr>\n<td style=\"width: 12.5%; text-align: center;\"><em>Pump<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Reclaimer<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Rectangle<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Rounded Rectangle<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Stacker<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Stockpile<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\"><em>Valve<\/em><\/td>\n<td style=\"width: 12.5%; text-align: center;\">\u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h3>Image Flip and Rotation<\/h3>\n<p class=\"intro-text\">Images, including the images in the pre-defined set (such as Crusher, Distiller, Ore Ship) can be rotated to suit other elements on the page. Choose <strong>Flip X<\/strong> to flip the image on the horizontal axis, <strong>Flip Y<\/strong> to flip the image on the vertical axis, or set a rotation by typing a numerical value between 0 and 360 into the <strong>Rotate<\/strong> edit box (numbers represent degrees).<\/p>\n<p class=\"intro-text\">The image in the example below has been rotated as follows:<\/p>\n<table>\n<tbody>\n<tr>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-40008 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image019.png\" alt=\"\" width=\"127\" height=\"105\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image019.png 127w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image019-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image019-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image019-48x40.png 48w\" sizes=\"auto, (max-width: 127px) 100vw, 127px\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-40009 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image020.png\" alt=\"\" width=\"129\" height=\"108\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image020.png 129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image020-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image020-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image020-48x40.png 48w\" sizes=\"auto, (max-width: 129px) 100vw, 129px\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-40010 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image021.png\" alt=\"\" width=\"129\" height=\"106\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image021.png 129w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image021-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image021-36x30.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image021-48x39.png 48w\" sizes=\"auto, (max-width: 129px) 100vw, 129px\" \/><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-40011 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image022.png\" alt=\"\" width=\"130\" height=\"106\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image022.png 130w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image022-24x20.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image022-36x29.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/08\/Explorer-4.6.1.-release-notes-image022-48x39.png 48w\" sizes=\"auto, (max-width: 130px) 100vw, 130px\" \/><\/td>\n<\/tr>\n<tr>\n<td><em>Image with no rotations<\/em><\/td>\n<td><em>Image with <strong>Flip X<\/strong><\/em><\/td>\n<td><em>Image with <strong>Flip Y<\/strong><\/em><\/td>\n<td><em>Image with a <strong>Rotate<\/strong> of 90<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2 class=\"page-subheading\">Tutorials<\/h2>\n<p class=\"note\">If you're unfamiliar with the process of building pages, read the article <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/building-an-explorer-page\/\" data-slimstat-async=\"false\" data-slimstat-callback=\"false\" data-slimstat-tracking=\"false\" data-slimstat-type=\"2\" data-slimstat-clicked=\"false\">Building an Explorer Page<\/a>.<\/p>\n<p class=\"intro-text\">The Image is a versatile component that can be used to visually enhance your pages. We will demonstrate this versatility using 3 tutorials: in the first we'll configure a simple image, then we will add a link to the image so users can click it, and then we will add conditions to the image so that it will change depending on an attribute value. At the end of the tutorials, your page should look something like this:<\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42102\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut.png\" alt=\"\" width=\"163\" height=\"166\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut.png 163w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-147x150.png 147w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-48x48.png 48w\" sizes=\"auto, (max-width: 163px) 100vw, 163px\" \/><\/a><\/p>\n<p>Let's go through this process, step by step.<\/p>\n<p class=\"left-bar\"><strong>Note<\/strong>: This configuration uses the\u00a0<em>Sample Data\u00a0<\/em>table\u00a0and datasets that can be optionally made available\u00a0during initial installation and setup. If you don't have access to this data, you will need to adjust the configuration to suit your data at your site.<\/p>\n<h3>Tutorial 1. Simple Image<\/h3>\n<p class=\"intro-text\">In this tutorial we'll add an image onto an Explorer page.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Prepare a Studio Page<\/strong><\/p>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-14281\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png\" sizes=\"auto, (max-width: 438px) 100vw, 438px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-400x100.png 400w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-250x62.png 250w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-24x6.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-36x9.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage-48x12.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/01\/newpage.png 438w\" alt=\"New Page button on ribbon\" width=\"438\" height=\"109\" \/><\/p>\n<p class=\"intro-text\">Before you start, click the\u00a0<strong>New Page<\/strong>\u00a0button on the Home tab of the ribbon. Choose the Precision layout.<\/p>\n<p class=\"left-bar\">Related:\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\" data-slimstat-clicked=\"false\" data-slimstat-type=\"2\" data-slimstat-tracking=\"false\" data-slimstat-callback=\"false\" data-slimstat-async=\"false\">Precision Layout tutorial<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add an Image<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-2.png\" rel=\"lightbox-4\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42103\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-2.png\" alt=\"\" width=\"1269\" height=\"454\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-2.png 1269w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-2-768x275.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-2-150x54.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-2-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-2-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-2-48x17.png 48w\" sizes=\"auto, (max-width: 1269px) 100vw, 1269px\" \/><\/a><\/p>\n<p class=\"intro-text\">Drag an Image onto the precision layout. The Image is in the Display <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" rel=\"lightbox[1429] lightbox-5\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1844\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/display.png\" alt=\"Display group icon\" width=\"22\" height=\"13\" \/><\/a> group.<\/p>\n<p class=\"intro-text\">\u00a0<\/p>\n<p class=\"intro-text\"><strong>Step 3. Configure the Image<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-3.png\" rel=\"lightbox-6\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42105\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-3.png\" alt=\"\" width=\"616\" height=\"343\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-3.png 616w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-3-150x84.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-3-24x13.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-3-36x20.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut1-3-48x27.png 48w\" sizes=\"auto, (max-width: 616px) 100vw, 616px\" \/><\/a><\/p>\n<p class=\"intro-text\">Configure the image as follows:<\/p>\n<p class=\"intro-text\"><strong>Display<\/strong>: CONTAIN<br \/>\nThe default <em>Contain<\/em> setting scales the image so that it completely fits inside its container, and is usually suitable for more images. For more options, see <a href=\"#Image_Display_Settings\">Image Display Settings<\/a> below.<\/p>\n<p class=\"intro-text\"><strong>Default Image<\/strong>: Click the ellipsis [...] button to open the Image Gallery, and choose <em>Blue.png<\/em>.<\/p>\n<p class=\"left-bar\">Read more: <strong><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/image-gallery\/\">How to use the Image Gallery<\/a><\/strong><\/p>\n<p class=\"note\"><strong>Note<\/strong>: You can also type in the URL instead of using the Image Gallery. If you do this, the image is not added to the Image Gallery. The URL for the image used here is:\u00a0<em>https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Blue.png<\/em><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 4. All done!<\/strong><\/p>\n<p class=\"intro-text\">You now have an image of a blue square on your page.<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/>\u00a0button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Resize the image to see how it looks within its borders, and go through the various Display Options to see how they look.<\/li>\n<li>Try flipping or rotating the image.<\/li>\n<\/ul>\n<p class=\"intro-text\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-1348\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png\" sizes=\"auto, (max-width: 48px) 100vw, 48px\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save.png 48w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-22x24.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-33x36.png 33w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/02\/save-43x48.png 43w\" alt=\"save\" width=\"48\" height=\"53\" \/>\u00a0Don\u2019t forget to\u00a0<a title=\"Saving Your Page\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-create-your-first-page\/saving-your-page\/\">save your page<\/a>!<\/p>\n<p>&nbsp;<\/p>\n<hr \/>\n<h3>Tutorial 2. Link Action<\/h3>\n<p class=\"note\">This tutorial follows on from Tutorial 1.<\/p>\n<p class=\"intro-text\">In this tutorial we'll configure the image with a link that takes you to web page, to demonstrate how the feature works. This is particularly useful if, for example, you want users to be able to click on icons or logos.<\/p>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Link Action &amp; Variable Mapping<\/a><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut2-1.png\" rel=\"lightbox-7\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42109\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut2-1.png\" alt=\"\" width=\"618\" height=\"453\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut2-1.png 618w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut2-1-150x110.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut2-1-24x18.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut2-1-36x26.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut2-1-48x35.png 48w\" sizes=\"auto, (max-width: 618px) 100vw, 618px\" \/><\/a><\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px; width: 90px;\"><strong>Type<\/strong><\/td>\n<td>Select\u00a0<em>Open URL<\/em>\u00a0from the\u00a0<strong>Type<\/strong>\u00a0drop-down list.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>URL<\/strong><\/td>\n<td>Select\u00a0<em>Text<\/em>\u00a0from the drop-down list, and then type <em>https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/<\/em>\u00a0in the\u00a0text box.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Header<\/strong><\/td>\n<td>Select\u00a0<em>Text<\/em>\u00a0from the drop-down list, and type\u00a0<em>Image Help\u00a0<\/em>in the\u00a0text box. Note: if you leave out the Header, Explorer will open this URL with a header of \"New Page\".<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Tab Type<\/strong><\/td>\n<td>Select\u00a0<em>New Explorer Tab<\/em>\u00a0from the\u00a0<strong>Tab Type<\/strong>\u00a0drop-down list.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">That's it! Now your image is configured so that users can click it to open the help page for images.\u00a0<\/p>\n<ul class=\"intro-text\">\n<li>Click the preview\u00a0<img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-2896 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/>\u00a0button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>Click the image to see how your link will open.<\/li>\n<\/ul>\n<hr \/>\n<h3>Tutorial 3. Conditional Images<\/h3>\n<p class=\"note\">This tutorial follows on from Tutorial 2.<\/p>\n<p class=\"intro-text\">In this tutorial we'll add conditional images to the component. You can use this procedure to imitate traffic lights, for example.<\/p>\n<p class=\"intro-text\"><strong>Step 1. Check Default Values<\/strong><\/p>\n<p class=\"intro-text\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-1.png\" rel=\"lightbox-8\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42124\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-1.png\" alt=\"\" width=\"1288\" height=\"429\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-1.png 1288w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-1-768x256.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-1-150x50.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-1-1280x426.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-1-24x8.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-1-36x12.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-1-48x16.png 48w\" sizes=\"auto, (max-width: 1288px) 100vw, 1288px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step, we need to ensure that the page will refresh every minute, otherwise you won't notice the image changing.<\/p>\n<p class=\"intro-text\">Click the <strong>Defaults<\/strong> button on the ribbon, and check the following page defaults:<\/p>\n<table style=\"border-collapse: collapse; width: 100%;\" border=\"1\">\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>startTime<\/strong><\/td>\n<td>Choose <strong>Relative Datetime<\/strong>, and set the <strong>Duration<\/strong> to 1 Day. This is the default for new pages.<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>endTime<\/strong><\/td>\n<td>Choose <strong>Current Datetime<\/strong>, and set the <strong>Refresh Interval<\/strong> to 1 minute. This is the default for new pages.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"left-bar\">Related: <a title=\"Default Values\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/default-value\/\">Default Values<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 2. Add a Data Label<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-2.png\" rel=\"lightbox-9\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42129\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-2.png\" alt=\"\" width=\"1288\" height=\"740\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-2.png 1288w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-2-768x441.png 768w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-2-150x86.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-2-1280x735.png 1280w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-2-24x14.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-2-36x21.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-2-48x28.png 48w\" sizes=\"auto, (max-width: 1288px) 100vw, 1288px\" \/><\/a><\/p>\n<p class=\"intro-text\">In this step we're going to add a Data Label that will show the current value of an attribute, which will display an updated value every time the page refreshes. In the subsequent steps we'll then configure the image to change according to the displayed value.<\/p>\n<p class=\"intro-text\">1. Open the <strong>Hierarchy Navigator<\/strong> from the Studio ribbon.<\/p>\n<p class=\"intro-text\">2. Navigate to an entity (<em>Archer<\/em>), open the Attributes panel, and then drag and drop an Attribute Value (<em>THT Actual<\/em>)\u00a0 onto the Precision Layout.<\/p>\n<p class=\"intro-text\">A data Label is automatically added, and you don't need to configure it any further.<\/p>\n<p class=\"left-bar\">Read more: <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/data-label\/\">Data Label<\/a>, <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-getting-started\/tag-search-and-hierarchy-navigation\/\">Hierarchy Navigation<\/a><\/p>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 3. Configure the Image<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-3.png\" rel=\"lightbox-10\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42130\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-3.png\" alt=\"\" width=\"700\" height=\"927\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-3.png 700w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-3-113x150.png 113w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-3-18x24.png 18w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-3-27x36.png 27w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-3-36x48.png 36w\" sizes=\"auto, (max-width: 700px) 100vw, 700px\" \/><\/a><\/p>\n<p class=\"intro-text\">Now we're going to configure the image component to have two conditional images, each one using the value of the Data Label's attribute as its condition.<\/p>\n<p class=\"intro-text\"><strong>Click on the image component, and add the 1st Image<\/strong>:<\/p>\n<p class=\"intro-text\">Here, we want the image to change to red when the temperature exceeds 65.<\/p>\n<p class=\"intro-text\">1. Next to Images, click <strong>Add<\/strong> to add a new image to the component (<strong>A<\/strong>).<\/p>\n<p class=\"intro-text\">2. Expand the 1st Image and configure it as follows (<strong>B<\/strong>):<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Field<\/strong><\/td>\n<td><strong>Click This First<\/strong><\/td>\n<td><strong>Parameter to Enter<\/strong><\/td>\n<td><strong>Notes<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Image<\/strong><\/td>\n<td><em>...\u00a0<\/em>(Image Gallery)<\/td>\n<td>Red<\/td>\n<td>Use the Image Gallery to <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/image-gallery\/#Uploading_an_Image\">add the following image<\/a>: <em>https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Red.png<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Rotate<\/strong><\/td>\n<td>&nbsp;<\/td>\n<td>170<\/td>\n<td><em>Don't click the check boxes, just type the angle of rotation into the text box.<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Comparison<\/strong><\/td>\n<td>Text<\/td>\n<td>&gt;<\/td>\n<td><i>You need to specify the type of comparison before you can set the rest of the condition.<\/i><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Data<\/strong><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17335 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Attribute-icon.png\" alt=\"\" width=\"21\" height=\"19\" \/>\u00a0(Attribute Value)<\/td>\n<td>Entity: Archer<br \/>\nTemplate: Oil Producing Well<br \/>\nAttribute: THT<br \/>\nAttribute Value: Actual<\/td>\n<td>\n<p><i>Use the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a> to choose the attribute value used for the data label:<br \/>\n<\/i><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42131\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4.png\" alt=\"\" width=\"319\" height=\"446\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4-107x150.png 107w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4-26x36.png 26w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4-34x48.png 34w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Compare To<\/strong><\/td>\n<td>Value<\/td>\n<td>65<\/td>\n<td><em>Use the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a> to specify a value of 65.<br \/>\n<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-6.png\" rel=\"lightbox-12\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42133\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-6.png\" alt=\"\" width=\"316\" height=\"117\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-6.png 316w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-6-150x56.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-6-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-6-36x13.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-6-48x18.png 48w\" sizes=\"auto, (max-width: 316px) 100vw, 316px\" \/><\/a><br \/>\n<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\"intro-text\">3. Next to Images, click <strong>Add<\/strong> to add another image (<strong>A<\/strong>), and\u00a0configure it as follows (<strong>C<\/strong>):<\/p>\n<table>\n<tbody>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Field<\/strong><\/td>\n<td><strong>Click This First<\/strong><\/td>\n<td><strong>Parameter to Enter<\/strong><\/td>\n<td><strong>Notes<\/strong><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Image<\/strong><\/td>\n<td><em>...\u00a0<\/em>(Image Gallery)<\/td>\n<td>Red<\/td>\n<td>Use the Image Gallery to <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/image-gallery\/#Uploading_an_Image\">add the following image<\/a>: <em>https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Yellow.png<\/em><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Comparison<\/strong><\/td>\n<td>Text<\/td>\n<td>&lt;<\/td>\n<td><i>You need to specify the type of comparison before you can set the rest of the condition.<\/i><\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Data<\/strong><\/td>\n<td><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17335 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/07\/Attribute-icon.png\" alt=\"\" width=\"21\" height=\"19\" \/>\u00a0(Attribute Value)<\/td>\n<td>Entity: Archer<br \/>\nTemplate: Oil Producing Well<br \/>\nAttribute: THT<br \/>\nAttribute Value: Actual<\/td>\n<td>\n<p><i>Use the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a> to choose the attribute value used for the data label:<br \/>\n<\/i><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4.png\" rel=\"lightbox-11\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42131\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4.png\" alt=\"\" width=\"319\" height=\"446\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4.png 319w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4-107x150.png 107w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4-17x24.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4-26x36.png 26w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-4-34x48.png 34w\" sizes=\"auto, (max-width: 319px) 100vw, 319px\" \/><\/a><\/p>\n<\/td>\n<\/tr>\n<tr style=\"border: 1px solid #cccccc;\">\n<td style=\"padding-left: 5px;\"><strong>Compare To<\/strong><\/td>\n<td>Value<\/td>\n<td>35<\/td>\n<td><em>Use the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/\">Data Selector<\/a> to specify a value of 35.<br \/>\n<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-5.png\" rel=\"lightbox-14\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42132\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-5.png\" alt=\"\" width=\"318\" height=\"122\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-5.png 318w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-5-150x58.png 150w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-5-24x9.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-5-36x14.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut3-5-48x18.png 48w\" sizes=\"auto, (max-width: 318px) 100vw, 318px\" \/><\/a><br \/>\n<\/em><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<p class=\"intro-text\"><strong>Step 4. All done!<\/strong><\/p>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut.png\" rel=\"lightbox-3\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42102\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut.png\" alt=\"\" width=\"163\" height=\"166\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut.png 163w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-147x150.png 147w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-24x24.png 24w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-36x36.png 36w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-48x48.png 48w\" sizes=\"auto, (max-width: 163px) 100vw, 163px\" \/><\/a><\/p>\n<p class=\"intro-text\">Your image component now has a default image, as well as two conditional images.<\/p>\n<ul class=\"intro-text\">\n<li>Click the Preview <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" rel=\"lightbox-16\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-2896\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2015\/03\/preview.png\" alt=\"preview\" width=\"13\" height=\"14\" \/><\/a> button on the Studio toolbar to see what your page will look like in display mode.<\/li>\n<li>In the Studio ribbon, click the Refresh button to update the data label on the page. You should notice the image will also change, according to the value displayed by the data label.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<hr \/>\n<h2 class=\"page-subheading\">Comprehensive Reference<\/h2>\n<p class=\"intro-text\">This section describes the properties of the Image component.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"1000\">\n<table>\n<tbody>\n<tr>\n<td width=\"120\"><strong>1. Display<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Defines how the image will be displayed in the container. In a <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">grid<\/a> layout the container is the grid cell; in a <a title=\"Precision Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">precision<\/a> layout the container is indicated by the bounding box of the Image component. See <a href=\"#Image_Display_Settings\">Image Display Settings<\/a><\/td>\n<\/tr>\n<tr>\n<td><strong>2. Default Image:<\/strong><\/td>\n<\/tr>\n<tr>\n<td>The image to show if none of the conditions are met, or if no other images are defined. Add an image using either the <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/image-gallery\/\">Image Gallery<\/a> (click [...]) or type in a URL.<\/td>\n<\/tr>\n<tr>\n<td><strong>3. Orientation<\/strong><\/td>\n<\/tr>\n<tr>\n<td>You can select one or both of <strong>Flip Y<\/strong> and <strong>Flip X<\/strong>, to change the position of your image. You can also rotate the image by entering a number (degrees of rotation). See <a href=\"#Image_Flip_and_Rotation\">Image Flip and Rotation<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Link Action<\/strong><\/td>\n<\/tr>\n<tr>\n<td>This is where you define a link which makes the image clickable, along with optional variable mapping. Note that this applies to the image regardless of configured conditions (i.e. you can't set a different link for each condition).<br \/>\nFor a full description of these options, see\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/link-action-and-variable-mapping\/\">Link Action and Variable Mapping<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>5. Images<\/strong><\/td>\n<\/tr>\n<tr>\n<td>These are the conditional images: <em>1st Image, 2nd Image, 3rd Image<\/em> etc. Click <strong>Add<\/strong> to add a new conditional image. See <a href=\"#Conditional_Images\">Conditional Images<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>6. Style<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Select a suitable style from the drop-down list.<\/td>\n<\/tr>\n<tr>\n<td><strong>7. Position<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Select a position in <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\">Precision Layout<\/a> or <a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">Grid Layout<\/a> (depending on where the component is placed).<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<td width=\"250\"><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-ref.png\" rel=\"lightbox-17\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-42136\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-ref.png\" alt=\"\" width=\"363\" height=\"755\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-ref.png 363w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-ref-72x150.png 72w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-ref-12x24.png 12w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-ref-17x36.png 17w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/11\/image-tut-ref-23x48.png 23w\" sizes=\"auto, (max-width: 363px) 100vw, 363px\" \/><\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Image Display Settings<\/h3>\n<p>The <em>Display<\/em> setting defines how the image will be displayed in the container. In a <a title=\"Grid Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/grid-layout\/\">grid<\/a> layout the container is the grid cell; in a <a title=\"Precision Layout\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/precision-layout\/\">precision<\/a> layout the container is indicated by the bounding box of the Image component.<\/p>\n<ul>\n<li><strong>Center<\/strong>: Display the full-sized image in the middle of the container.<\/li>\n<li><strong>Repeat<\/strong>: Repeat the full-sized image horizontally and vertically in the container, starting from the top left corner.<\/li>\n<li><strong>Stretch<\/strong>: Scale the image so that the container is completely filled by the image. When the container and the image have different aspect ratios, the image is distorted by this stretching.<\/li>\n<li><strong>Cover<\/strong>: Scale the image so that the container is completely covered by the image. Some parts of the image may not be visible in the container.<\/li>\n<li><strong>Contain<\/strong>: Scale the image so that it completely fits inside its container. There may be some areas of the container which are not covered by the image.<\/li>\n<li><strong>Centerleft<\/strong>: Display the full-sized image in the middle of the left edge of the container.<\/li>\n<li><strong>Centerright<\/strong>: Display the full-sized image in the middle of the right edge of the container.<\/li>\n<li><strong>Topcenter<\/strong>: Display the full-sized image in the middle of the top edge of the container.<\/li>\n<li><strong>Topleft<\/strong>: Display the full-sized image in the upper left corner of the container.<\/li>\n<li><strong>Topright<\/strong>: Display the full-sized image in the upper right corner of the container.<\/li>\n<li><strong>Bottomcenter<\/strong>: Display the full-sized image in the middle of the bottom edge of the container.<\/li>\n<li><strong>Bottomleft<\/strong>: Display the full-sized image in the lower left corner of the container.<\/li>\n<li><strong>Bottomright<\/strong>: Display the full-sized image in the lower right corner of the container.<\/li>\n<\/ul>\n<h3>Conditional Images<\/h3>\n<p><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Image-configuration-5.png\" rel=\"lightbox-18\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-41803 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Image-configuration-5.png\" alt=\"\" width=\"369\" height=\"599\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Image-configuration-5.png 369w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Image-configuration-5-92x150.png 92w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Image-configuration-5-15x24.png 15w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Image-configuration-5-22x36.png 22w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2018\/10\/Image-configuration-5-30x48.png 30w\" sizes=\"auto, (max-width: 369px) 100vw, 369px\" \/><\/a><\/p>\n<p>These are the conditional images: <em>1st Image, 2nd Image, 3rd Image<\/em> etc. Click <strong>Add<\/strong> to add a new conditional image.<\/p>\n<table>\n<tbody>\n<tr>\n<td width=\"150\"><strong>1. 1st Image<\/strong>:<\/td>\n<td>Click <strong>Remove<\/strong> to add remove this conditional image.<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Up-or-down-arrow.png\" rel=\"lightbox-19\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-12916 size-full alignnone\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Up-or-down-arrow.png\" alt=\"\" width=\"31\" height=\"29\" srcset=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Up-or-down-arrow.png 31w, https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Up-or-down-arrow-24x22.png 24w\" sizes=\"auto, (max-width: 31px) 100vw, 31px\" \/><\/a><\/td>\n<td><strong>Note<\/strong> that Images have their conditions evaluated in order of precedence. If you want an image to have a higher precedence, click the up arrow to move it up the list. Likewise, you can click the down arrow next to an image, to give it a lower order of precedence. Precedence is only an issue when more than one condition is met simultaneously.<\/td>\n<\/tr>\n<tr>\n<td><strong>2. Image<\/strong>:<\/td>\n<td>The image to display when this condition is met. Add an image using either the Image Gallery (click [...]) or type in a URL.<\/td>\n<\/tr>\n<tr>\n<td><strong>3. Orientation:<\/strong><\/td>\n<td>See\u00a0<a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/#Image_Flip_and_Rotation\">Image Flip and Rotation<\/a>.<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Data:<\/strong><\/td>\n<td>The data that is being compared. This data type matches the type in <em>Comparison<\/em>. Select a single data item, using the Select your data, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\">Dataset<\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9576 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Dataset-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/>, <a title=\"Using Ad Hoc Calculation Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Ad_hoc_Calculation_Data\">Ad Hoc Calculation<\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9575 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Ad-Hoc-Calc-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/>, <a title=\"Using Attribute Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Attribute_Data\">Attribute<\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12966 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Attribute-icon.png\" alt=\"\" width=\"20\" height=\"20\" \/>, <a title=\"Using Tag Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Tag_Data\">Tag<\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9573 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/tag-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/>, or <a title=\"Using Value Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Value_Data\">Value<\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9572 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Value-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/> data category.<\/td>\n<\/tr>\n<tr>\n<td><strong>5. Comparison:<\/strong><\/td>\n<td>What the <em>Data<\/em> is compared to, and how it is compared. Choose a data type here (Number, Datetime, List, Text); <em>Compare To<\/em> must match this. How it is compared depends on the type: For example, if you are comparing to a list then you can select <em>Compare With, Contains, Does Not Contain<\/em>. If you are comparing to a number, your options are: <em>=, &gt;, &gt;=, &lt;, &lt;= <\/em> and so on.<\/td>\n<\/tr>\n<tr>\n<td><strong>6. Compare to:<\/strong><\/td>\n<td>The value that the <em>Data<\/em> is being compared to. This data type matches the type in <em>Comparison<\/em>. Select your data, using the <a title=\"Data Selector\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Dataset_Data\">Dataset<\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9576 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Dataset-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/>, <a title=\"Using Ad Hoc Calculation Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Ad_hoc_Calculation_Data\">Ad Hoc Calculation<\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9575 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Ad-Hoc-Calc-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/>, <a title=\"Using Attribute Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Attribute_Data\">Attribute<\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-12966 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/04\/Attribute-icon.png\" alt=\"\" width=\"20\" height=\"20\" \/>, <a title=\"Using Tag Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Tag_Data\">Tag<\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9573 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/tag-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/>, or <a title=\"Using Value Data\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/data-selector\/#Using_Value_Data\">Value<\/a> <img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-9572 size-full\" src=\"https:\/\/oihelp.corporate.ifs.com\/help\/wp-content\/uploads\/2016\/02\/Value-Icon.png\" alt=\"\" width=\"20\" height=\"20\" \/> data category.<\/td>\n<\/tr>\n<tr>\n<td><strong>7. 2nd Image<\/strong>:<\/td>\n<td>Fill in as for 1st image.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h2 class=\"page-subheading\">Release History<\/h2>\n<ul class=\"intro-text\">\n<li class=\"overview\">Image 4.6.4 (this release)\n<ul class=\"overview\">\n<li>Link actions were added so users can click on an image.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/image-4-6-2\/\">Image 4.6.2<\/a>\n<ul class=\"intro-text\">\n<li>Images have flip and rotate options.<\/li>\n<li>The editor has been updated, for conditional images.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/image-4-4-6\/\">Image 4.4.6<\/a>\n<ul class=\"intro-text\">\n<li>Added an Image Gallery to make it easier to insert images.<\/li>\n<li>Added the ability to upload images, via the Image Gallery, for users with a Server Editor role.<\/li>\n<li>Added preconfigured images in the component library.<\/li>\n<li>Default Display setting has changed from 'Center' to 'Contain'.<\/li>\n<\/ul>\n<\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/image-4-4-0\/\">Image 4.4.0<\/a><\/li>\n<li><a href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/image-4-3-2\/\">Image 4.3.2<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>This component is used to display an image on a page. The component can be configured to show one of many different images, where the displayed image is shown when a specific condition is met. Images can also be made clickable, and are often overlayed with text labels and data labels. This article describes how to configure an image in Explorer version 4.6.4 and later.<\/p>\n<p class=\"continue-reading-button\"> <a class=\"continue-reading-link\" href=\"https:\/\/oihelp.corporate.ifs.com\/help\/p2-explorer\/explorer-studio\/controls\/image\/\">Read more<i class=\"crycon-right-dir\"><\/i><\/a><\/p>\n","protected":false},"author":8,"featured_media":42063,"parent":1407,"menu_order":280,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":"","_members_access_role":[],"_members_access_error":""},"categories":[11],"tags":[171,683,437],"class_list":["post-41767","page","type-page","status-publish","has-post-thumbnail","hentry","category-tutorial","tag-image","tag-link-action","tag-variables","Version-4-6-4","Product-ex"],"_links":{"self":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41767","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/users\/8"}],"replies":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/comments?post=41767"}],"version-history":[{"count":2,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41767\/revisions"}],"predecessor-version":[{"id":67034,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/41767\/revisions\/67034"}],"up":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/pages\/1407"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media\/42063"}],"wp:attachment":[{"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/media?parent=41767"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/categories?post=41767"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/oihelp.corporate.ifs.com\/help\/wp-json\/wp\/v2\/tags?post=41767"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}