The webimagedisplay( function used within an Image Display Object to specify both a web image (used when the form is displayed in a web browser from Panorama Server) and a local image file (used when the form is displayed within Panorama).
Parameters
This function has two parameters:imageurl – the URL of the web image to display when the form containing this function is displayed in a web browser. Alternately, this parameter can contain HTML code to display the image using the <img> tag (see text below for further explanation).
imagepath – the path of the image to display when the form containing this function is displayed within Panorama.
Description
This function is used within an Image Display Object to specify both a web image (used when the form is displayed in a web browser from Panorama Server) and a local image file (used when the form is displayed within Panorama).
When using an Image Display Object, you normally set up the formula of the object to identify an image file on the local hard drive to be displayed. The formula simply calculates the path and filename of the file, and the image in the file is displayed. When a form is published on the web (see Converting a Panorama Form into a Web Form) this technique won’t work, since the person viewing this form on their web browser doesn’t have access to your local hard drive. So instead of calculating a path to a local image file, something like this:
~/Pictures/redflower.png
the Image Display object needs a formula that calculates a URL to an image file somewhere on the web, something like this:
http://somewebsite.org/images/redflower.png
But what if you want the Image Display object to work both locally and when published to the web? The webimagedisplay( function allows this to work, by specifying both the URL and the local image path.
webimagedisplay("http://somewebsite.org/images/redflower.png","~/Pictures/redflower.png")
When the Image Display object is viewed, the webimagedisplay( function checks to see whether it is being viewed on the web or within Panorama. If it is being viewed on the web, the URL is used. If it is being viewed within Panorama, the path is used.
Keep in mind that it is up to you make sure that there is actually a valid image at the URL, and at the path. Usually you’ll want these to be the same image, but that is up to you. In this example both images have the same filename, but again, that is up to you. You could specify a different image file locally vs. on the web, or even an image that looks different (though that would be unusual).
If you wish, the first parameter can be an HTML code fragment instead of just a URL. This code fragment should contain an <img> tag that specifies the image. This is handy if you need additional code associated with the image, for example a link to another page, like this:
webimagedisplay(
{<a href="http://flowers.org/"><img src="http://somewebsite.org/images/redflower.png"></a>},
"~/Pictures/redflower.png")
You can also use Panorama’s special functions for generating the link, including weblink( and cgilink(, like this:
webimagedisplay(
weblink("http://flowers.org",{<img src="http://somewebsite.org/images/redflower.png">},
"~/Pictures/redflower.png")
When an image is displayed on a Panorama web form, it is normally scaled proportionally to fit in the dimensions of the Image Display object. This is done by automatically adding CSS styling tags to the <img> tag. If you don’t want the proportional scaling, add a style= option of NOTPROPORTIONAL to the <img> tag, like this:
webimagedisplay(
{<a href="http://flowers.org/"><img src="http://somewebsite.org/images/redflower.png" style="NOTPROPORTIONAL"></a>},
"~/Pictures/redflower.png")
If you do this, you may want to add your own CSS style tags to position and scale the image some other way. Panorama will automatically remove the NOTPROPORTIONAL option when it renders the form to HTML, so it won’t interfere with the operation of the browser. But any extra tags you add will be passed thru to the broser. If you need to reference the height and width of the Image Display object in your styling tags, use «IMAGEHEIGHT» and «IMAGEWIDTH». Panorama will automatically insert the correct values when the form is rendered into HTML. For reference, here are the styling tags that Panorama normally uses to proportionally scale the image.
style="width: auto; height: auto; max-width:«IMAGEWIDTH»px; max-height:«IMAGEHEIGHT»px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);"
You can use a variation of these tags or write your own styling tags from scratch.
See Also
History
| Version | Status | Notes |
| 10.2 | New | New in this version. |