# Breakroom Image Viewer

{% embed url="<https://youtu.be/j2co0i7utqY?feature=shared>" %}

## Overview

The Breakroom Image Viewer allows Object Owners and users with appropriate [World-](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/world-level-user-permissions) or [Region-level](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/region-level-user-permissions) permissions to upload static images—including company logos, informational signage, and event branding or advertising—and display them almost anywhere. Event coordinators can also create clickable images that will direct users to a webpage.

In your Inventory, you'll see the Breakroom Image Viewer represented by this icon: <img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FPB6JW0gQSHum3LeyGndF%2FToolkit_Image_Viewer.png?alt=media&#x26;token=ceca36fe-c69f-43bd-afa9-1c7d15bce132" alt="" data-size="line">

For help installing the Breakroom Video Player, please review our information on using the [Region Editor](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor).

{% hint style="warning" %}
In order for this Toolkit object to work, you must have the Breakroom conference core components installed in the same Region. If you have uploaded a custom Region, you will need to [install these components manually](https://docs.breakroom.tech/advanced-tutorials/uploading-your-own-region/installing-the-conference-system-components) prior to setting up this object.
{% endhint %}

## Setting up the Breakroom Image Viewer

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FXjUY6EWTJshGobxPWUd8%2FToolkit_Image_002.png?alt=media&#x26;token=514131ef-37e4-4ff4-8077-f13d85779855" alt="" width="563"><figcaption><p>Highlighted: The Breakroom Image Viewer access buttons.</p></figcaption></figure>

The Breakroom Image Viewer control panel is only accessible to the Object Owner and users with appropriate [World-](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/world-level-user-permissions) or [Region-level](https://docs.breakroom.tech/opening-the-doors/creating-and-managing-user-accounts/region-level-user-permissions) permissions. To access it, click on the Breakroom Image Viewer and then click the **Open Admin button**.

{% hint style="info" %}
When users click on a web-enabled viewer, they will only see the **Open URL button**. Clicking this button will open the associated URL in an external browser tab.
{% endhint %}

### Adding an image

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2F9R51ClqUruTEO265SO3p%2FToolkit_Image_003.png?alt=media&#x26;token=bb3be20d-fcb7-4f02-8deb-c342f65fc26e" alt="" width="375"><figcaption><p>Pictured: The Breakroom Image Viewer settings.</p></figcaption></figure>

To display an image using the Breakroom Image Viewer, follow these steps:

1. Locate the Breakroom Image Viewer object you want to edit.
2. Click on the **image viewer**, and then click the **Open Admin button** to open the control panel.
   1. To choose an image you've already uploaded to Breakroom, click the **Image Library button**. This will open the image picker. Click on the **image** you want to use.
   2. To upload a new image from your computer, or click the **Upload New Image button**. This will open a standard file picker on your computer. Locate the image you want to use, click on it, and then click the **Open button**.
3. Your selected image will display in the preview window. Make sure everything looks good, and then click the **Save and Close button**.

### Adding a webpage URL

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FFppUv8yzlTSczWlx5c8p%2FToolkit_Image_004.png?alt=media&#x26;token=57078a6a-55f0-4177-9273-8b7662ed1eda" alt="" width="353"><figcaption><p>Pictured: The Webpage URL option in the Breakroom Image Viewer control panel.</p></figcaption></figure>

To link a webpage to your Breakroom Image Viewer, follow these steps:

1. Locate the Breakroom Image Viewer object you want to edit.
2. Click on the **image viewer**, and then click the **Open Admin button** to open the control panel.
3. Paste your URL into the **Webpage URL field**.
4. Click the **Save and Close button**.

Now when users click on the Breakroom Image Viewer, they will see an **Open URL button**. Clicking this button will open the associated URL in an external browser tab.

## Image viewer options

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FTn8RilVCbhY2ZHJtLKsy%2FToolkit_Image_005.png?alt=media&#x26;token=9fd0cbce-39a4-4df5-923c-abe86b605988" alt="" width="359"><figcaption><p>Pictured: Settings available in the Breakroom Image Viewer control panel.</p></figcaption></figure>

The Breakroom Image Viewer control panel also allows you to customize the way images are displayed.

To edit the image display options, follow these steps:

1. Locate the Breakroom Image Viewer object you want to edit.
2. Click on the **image viewer**, and then click the **Open Admin button** to open the control panel.
3. Click the **ON or OFF button** located next to each image display option.
4. Click the **Save and Close button**.

<table><thead><tr><th width="169">Display setting</th><th>Function</th></tr></thead><tbody><tr><td>Post FX</td><td>If set to ON, will turn off various graphics settings within the image viewer <a href="#editing-the-breakroom-image-viewer-collider-zone">collider zone</a> that could distort the image or on-screen text.</td></tr><tr><td>Transparency</td><td>If set to ON, will enable display of images with a transparent background. </td></tr><tr><td>Back Panel</td><td>If set to ON, the image viewer will display a solid rear panel if viewed from the other side. If set to OFF, this panel will be made transparent.</td></tr><tr><td>Pops Out</td><td>If set to ON, image viewer screen will "pop out" to user screen when users enter the image viewer <a href="#editing-the-breakroom-image-viewer-collider-zone">collider zone</a>. The offset and scale of this pop-out screen can be customized by entering values into the associated fields.</td></tr></tbody></table>

## Editing the Breakroom Image Viewer collider zone

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2F0KKMzPEbzytbKsOgTdeu%2FToolkit_Image_006.png?alt=media&#x26;token=07f7be01-435d-4395-abfb-5f11a9ac639e" alt=""><figcaption><p>Pictured: The Region Editor, with a Breakroom Image Viewer object selected. The transparent green box indicates the size and location of the collider zone. In the Objects window, you can see that the collider zone object is nested within the Breakroom Image Viewer object.</p></figcaption></figure>

Several image viewer options are triggered when an avatar enters the Breakroom Image Viewer collider zone. The size and position of this collider zone can be customized using the Region Editor.

The instructions provided below presume an advanced working knowledge of Breakroom. Please consult our documentation if you need help[ installing](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor) and [positioning](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor/editing-and-moving-objects) virtual objects, or editing the [RoomFurniture component](https://docs.breakroom.tech/running-your-event/customizing-the-conference-system-components/the-roomfurniture-component).

To edit the Breakroom Image Viewer collider zone, follow these steps:

1. Open the Region Editor by clicking the **Edit Region button** at the bottom of your screen.
2. Locate the Breakroom Image Viewer object you want to edit. Click on it to highlight it in the **Objects window**.
3. In the Objects window, click the **> arrow** to the left of the Breakroom Image Viewer object to expand it. Then click on the **Collider component.**
4. Using the [Region Editor tools](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor/editing-and-moving-objects) or the [Transform component](https://docs.breakroom.tech/using-the-region-editor/editing-and-moving-objects#editing-the-transform-component), move, rotate, and resize the collider to meet your specifications.
5. When you are satisfied, click the **Save button** to store your changes.

## Tips for best performance

<figure><img src="https://1679086873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5gOE0ivmDtuXfHroTVSx%2Fuploads%2FvqygAcEzGqcQ0VilcAEI%2FToolkit_Image_001.png?alt=media&#x26;token=672e1610-1d65-4ee7-87e4-e40d147deba5" alt="" width="375"><figcaption></figcaption></figure>

* The Breakroom Image Viewer will automatically adjust its dimensions to match the aspect ratio of the image displayed on it. As a result, you may find that a finished image panel cuts through the floor of your Region, or is otherwise too large or small for its intended purpose. You can use the [Region Editor](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor) to adjust the [position, rotation, and scale](https://docs.breakroom.tech/creating-custom-experiences/using-the-region-editor/editing-and-moving-objects) of the image viewer as needed.
* To resize an image viewer while maintaining the proper aspect ratio, hold down the **Shift key** while dragging the [**scaling gizmo**](https://docs.breakroom.tech/using-the-region-editor/editing-and-moving-objects#scaling). This will allow you to make the image viewer larger or smaller without distorting the image.
* Images have a 5MB size limit. We recommend that image files used for signage or decorative purposes be no longer than 1024px along one side.