Using the Image Building Block

Image Building Block allows you to add images to your Graphics‍. You can choose to insert static or dynamic images such as user post avatars. 

These images could be for example your TV channel logo, sponsors, user avatars in the case to show social content, or if you have built your lower thirds or backgrounds as images/animated GIFs in an image editor software you can upload it as well so you don't need to start building your graphics from zero. 


The supported formats are:

  • JPG
  • PNG
  • Animated GIF 
  • SVG

The maximum supported size is: 5 MB  


Remember, an Overlay will be created automatically if you didn't add it to Tree after adding an element.

To learn how to add elements to the Tree, click here‍.

Properties

Use the Inspector‍, right-sidebar, to customize the Image:

Image

Source: Use it to upload an image or animated GIF.  


Click on Source to enable the Show on Remote Control option so you can change or remove your image from the remote control during the live operation. 


Fallback Image: Set a default back-up image. Use it when working with dynamic images such as user post avatars. So in case, the user avatar is empty the fallback image will be displayed. 


Image Size: Use it to set the image size as: 

  • Fit: The image will scale until it gets contained on the Container’s Width or Height, keeping its original proportions and not cropping. 
  •  Fill: The background will scale until it covers the entire Container’s area, keeping its original proportions, but getting cropped if needed. You can use the position controls to move that cropping window.
  • Stretch: The image will stretch to fully cover the entire Container area, losing its natural proportions. No positioning adjust is possible in this mode.
  • Natural Size: The image will be displayed on its original width and height in pixels.

Image Position: Allows you to set where the Background Image is placed. This option is not available for Image Size: "Stretch".

Position and Size

Position: Change the Image position inside the Canvas according to the X and Y axis (in percentage relative to the configured screen resolution).

Size: Change the Image size inside the Canvas according to its width and height (in percentage relative to the configured screen resolution).

Appearance

Opacity: Use it to change the transparency percentage of the Image.

Mask: You may add a mask to your image. For more information about Masking, click here‍.

Borders

Style: Defines the sides and style of the border.

Width: Defines how wide the border will be.

Color: Choose a color for the border.

Radius: Increasing this number will round the corners of the rectangle.

Learn how to change these properties specific to borders by clicking here.

Remote Control

With the Remote Control, you can manage and decide when to trigger the overlay that contains the image on-air using the  IN  and  OUT  button. 

Clicking on the gearwheel icon you can change or delete the Image during the live operation. 


Was this article helpful?