Embed large image into scrollable widget/frame

[zwalter]

I need to know the best way to embed a large image (approximately 700px high and 6000px wide) into a fixed-size frame or widget (approximately 800px wide), so that part of the image is cut off and allows users to scroll left to right to see the remainder of the image. In this use case, it is for a large image of our company timeline/history.  

[Tanushree Maiti]

Hi @zwalter 

• Navigate to System UI > Images and Add your image ( like with name ‘your_image_name.png’)
• Create a new widget using Service Portal Configuration > Widget Editor
• Display the image in the widget using HTML code such as:

             <div class="panoramic-widget-container">

                 <!-- Set horizontal scrolling for the 6000px image -->

                   <div class="scroll-wrapper">

                           <!-- Replace 'your_image_name.png' with your uploaded ServiceNow image sys_id or filename -->

                           <img src="your_image_name.png" class="panoramic-img" alt="Large panoramic view" />

                    </div>

                 </div>

• Apply CSS

.panoramic-widget-container {

  width: 800px;

  height: 700px;

  margin: 0 auto;

  border: 1px solid #ddd;

  overflow: hidden; /* Contains the wrapper */

}

.scroll-wrapper {

  width: 100%;

  height: 100%;

  overflow-x: auto; /* Enables horizontal scroll */

  overflow-y: hidden;

  white-space: nowrap; /* Forces image to stay in one continuous row */

}

.panoramic-img {

  height: 700px;

  width: auto; /* Maintains aspect ratio for height mapping */

  max-width: none;

}

• From Service Portal Configuration > Designer drag the widget into a container.