KB294388759: MediaBeacon - Displaying an Image on a Workspace

Description

A customer would like to display an image on a specific Workspace, for example, a “Contact Us” image on a given Workspace in an HTML Component. This can be done with two methods.

The first method is to use a live asset as an image. However this has the disadvantage of that image being subject to ACL root path and search filters.

The second method, detailed here, avoids this problem by placing the image in to a Custom Theme.

Procedure

1. Use an existing custom theme or add a new theme via the "Add Theme" option. In this example, we will use a theme called "imageholder", and an image called "example.png", hosted on a MediaBeacon instance called "mediabeaconexample.com".
2. Upload the desired image to the theme via the Add Image option located in the bottom right-hand corner of the theme window.
3. After the image has been uploaded to the theme's media, copy the URL of the image (eg. With Chrome, right-click on the image and select Copy Image Address.)
4. Then, when configuring your HTML Component’s code, you can use that URL with an img tag. Please note that you may need to truncate the image's address by removing the server information at the beginning of the URL. In our case, the image address would be:

http://mediabeaconexample.com/gwtmain/themes/gray/Custom/imageholder/images/example.png

1. In the HTML Component's html code, use the following:

<img src="/gwtmain/themes/gray/Custom/imageholder/images/example.png">

1. If the above method results in a broken image, try prepending .. to the source URL:

../gwtmain/themes/gray/Custom/imageholder/images/example.png