Skip to main content
MediaBeacon University

How to Change the Background Loading Image

Version: 8.5+

Issue

MediaBeacon's base behavior when loading a workspace is to display a "skeleton screen", which is a blurred image of an unbranded workspace.

Skeleton screens display in the background of the UI when the webapp is in a "loading" state, in order to provide users visual feedback, letting them know that content is being loaded.

In order to customize these screens to a given environment we have provided two sets of instructions specific to the server strategy being used, explaining how to customize this image.

There are two such images in MediaBeacon:

  • SkeletonScreen.jpg, this is shown when loading a workspace.
  • SkeletonLogin.jpg, this is shown before login screen loads.

Note that these steps will need to be repeated when installing a new version of MediaBeacon software, as standard installation.

 

Resolution

Prepare Replacement Image(s)

  • Skeleton images used by MediaBeacon are typically around 100K in size.
  • The image dimensions should be matched to the screen size that most users have. If this is hard to estimate, a 1080p image (1920px × 1080px) is a good standard.
  • Ensure that the file has been stripped of all metadata, and the image has some lossy compression to reduce load time.
  • Processing in Photoshop:
    • Photoshop's "Save for Web" feature has a "JPEG Medium" setting that is a good place to start.
    • Reduce the quality (or image dimensions) to achieve the target file size.
    • Ensure that "Metadata" is set to "None"

skeleton-screen-photoshop-settings.png

SkeletonScreen.jpg

  1. Take a screenshot of a typical customer-configured workspace, or a work with a customer logo on a neutral background.
  2. Save as SkeletonScreen.jpg.

SkeletonLogin.jpg

This image is usually a screenshot of the login screen (or customer logo), and processed as above, saved as "SkeletonLogin.jpg".

Webhead Installation

This is the most common solution, the tomcat-based webhead present in most implementations. In this case, the vast majority of users will access MediaBeacon via the webhead, and Core Server installation is not required

  1. In a standard Tomcat installation, the skeleton images reside in the following directory:
    C:\Program Files\Apache Software Foundation\Tomcat 8.5\webapps\ROOT\gwtmain\images\.
  2. Rename existing images that are to be replaced (so that originals are retained). No need to do both if only one is being replaced.
    1. SkeletonScreen.jpg.bak
    2. SkeletonLogin.jpg.bak
  3. Copy the custom SkeletonScreen.jpg and or SkeletonScreen.jpg into the above path.
  4. Restart MediaBeacon.
  5. Users will need to clear their browser cache in order to see the new behavior. See "Clearing Your Browser's Cache" for more info.

Core Server

When no webhead is being used for the majority of users, the following can be used for the Jetty-based Built-In App Server.

  1. To replace the SkeletonScreen.jpg image in MediaBeacon's Jetty webserver, follow the below path. Note that this is the default install path:
    C:\Program Files\MediaBeacon\MediaBeacon\lib\r2\.
  2. Once in the r2 directory, make a backup of the r2.war file, r2.war.bak.
  3. Rename r2.war file to r2.zip.
  4. Open the r2.zip file in the File Explorer, navigate to r2.zip\gwtmain\images\.
  5. Rename existing images that are to be replaced (so that originals are retained). No need to do both if only one is being replaced.
    1. SkeletonScreen.jpg.bak
    2. SkeletonLogin.jpg.bak
  6. Copy the custom SkeletonScreen.jpg and/or SkeletonScreen.jpg into the above path.
  7. When complete, close the File Explorer and rename r2.zip back to r2.war.
  8. Restart MediaBeacon.
  9. Users will need to clear their browser cache in order to see the new behavior. See "Clearing your Browser's Cache" for more info.
  • Was this article helpful?