Creating effective dashboards may require more than just the data presented. Images are an easy way to personalize your dashboard and make it stand out.
In this article
1. Image Container
The data you present in a dashboard is critical, but making a dashboard look good is also important. You can use image containers in several ways, including:
- Background for your dashboard: A well-chosen background improves data readability and enhances the dashboard viewer experience.
- Branding: Adding logos and branding elements for a consistent dashboard identity.
- Use as Navigation buttons: Using images or icons to creates modern, user-friendly navigation .
Image formats supported include .jpg, .png, .svg, and .gif.
Animated GIFs will only show the first frame when exporting to PowerPoint.
Adding an Image
The image container settings appear when you insert an image container. Under content, you can select the image source.
- Select the Image container
- In the General settings menu, go to Content
- Browse to the location of your image
- Customize your image container
- Save
Make sure you are in edit mode and select the image container option.
- Select the Image container option
- Click Choose an to select the image source
- Adjust the container
- Save the dashboard
2. General Settings
Selecting a container type, opens the General settings menu. Here, you can see options that are available to the image container.
To learn more about the general settings common to all container types, please review the Dashboard Containers article.
Let's look at the editing options available for image containers.
Container Name and Type
Naming the container is useful when you want to manage the visibility of containers using personalization keys. You can also see the container Type you have selected.
- Select the container and rename it in the Name field
- The container type displays the selected container's type (e.g., image)
Content
Under the content menu, click Choose an, and browse to the image location. You can also change the source later using Replace the.
- Create a new image container and choose an image source
- Select the image container and replace the image source
Image Placement
Image placement within a container can be controlled using the following options: Center, Full, Stretch, and Anchor.
Center scales the image down proportionally to fit within the container both horizontally and vertically.
Full fills the container, cropping the image to preserve its aspect ratio.
Stretch distorts the image to fill the container without cropping the image.
Anchor keeps the original image size and aligns it within the container grid (top/middle/bottom x left/center/right).
Since images vary in size, it is a good idea to pre-crop, or adjust the image size according to its aspect ratio. Setting Image placement to Full helps keep proportions when scaling.
For better responsiveness, consider uploading images to ASSETS and style them using a text container in the HTML editor.
- Expand Image Placement to reveal the options
- Select Center for the logo to prevent cropping
- Adjust the container size and review other options
- In this example, Full is selected for a background image to fill the container
Size and Position
While you can drag and resize containers by selecting the container and using the mouse pointer, the size and position options allows for the perfect placement of your image container within the dashboard canvas, which is a 120 by 120 grid or coordinate space.
- Width and Height control the size of the container.
- X (from left) and Y (from top) control the horizontal and vertical placement in the dashboard canvas.
- To fill the entire dashboard canvas, resize the image to 120x120
- Place the image X from left = 0, and Y from top = 0
- Use the same positioning for the logo to place it in the top left corner
Padding
Use Padding options to create extra space around the container's content.
Adding space around an image, such as logos, makes it easier to differentiate from nearby content and improves the visibility of clickable elements. This is particularly helpful for viewers accessing dashboards on different screen sizes and helps maintain consistent brand guidelines.
- The logo is located in the top left corner of the canvas
- To add space around the container, add padding to the top and left sides
Arrange
Dashboards often have multiple containers and the ability to organize them easily is important. Under Arrange, you can use the layering options Send to Front, Bring Forward, Send Backward, or Send to Back to stack containers in the order you need.
Learn more about ordering layered containers.
- Select the image and click Arrange for layering options
- Choose Send to Back to set the image as the background
Background
To set the background color, use the color picker, or for specific colors, enter the Hex value. Adjust the transparency from 0% (transparent) to 100% (opaque).
With an image added to a container, it can be useful to change the opacity to 0 when the image does not take up the full size of the container.
- Expand the background setting and adjust the color as needed
- To remove the background, set the background opacity to 0
- Save the dashboard
Link
Custom Link allows you to link an image to other dashboard pages, story views, websites, and documents. A user can then click on an image to take them to another dashboard page, or to another website.
In the example below, we can add a link to the home image to take users back to the home page.
- In edit mode, create an image container and add a home image
- Select the image and click the dashboard page icon
next to Custom link
- Select the required dashboard page from the list
- Save
- Clicking the home icon takes you to the home landing page
Where to from here?
Learn more about Harmoni Dashboards