Add images using the image widget

The Image widget allows you to embed images within your dashboard. To display an image, you need to specify its URL within the widget configuration. You can use a service such as Dropbox to host your image file, or another service.

If your image is already hosted online, learn how to copy the image URL in this guide.

Other important considerations:

  • Accepted image formats include: JPG, PNG, SVG and GIF.
  • Images displayed via the image widget are full bleed, which means the image has no padding and runs edge to edge.
  • The image widget doesn't have a background color which means transparent images such as logos can be placed directly on the dashboard background.

Below are examples of how various images appear: a logo with a transparent background, full width image with a title, and a full width image with no title.Image_widget_examples

Hosting images in Dropbox

Follow the steps below to create a sharing URL for your image.

  1. To begin, upload your image to Dropbox
  2. Locate the file and click Share.
  3. Next, click Create a link
  4. Select Copy link.
  5. Return to your dashboard and select Add widget.
  6. Search for Image and select it.
  7. Add the newly created URL to the URL field.
  8. Click Save

Important note

A known issue with WebKit may prevent your images from loading as expected if you use Safari, or other unofficial browsers to view Geckoboard. To resolve this, you can modify the URL for your Dropbox file.

The original URL will appear as: https://www.dropbox.com/s/wjd4z7wc6vh3i5z/geckoboard.png?dl=0.

Reformat the www to dl and the end parameter dl=0 to dl=1.

The new URL should appear like so: https://dl.dropbox.com/s/wjd4z7wc6vh3i5z/geckoboard.png?dl=1.

Hosting images in Google Drive

Hosting images in Google Drive is a great option, but we'll need to modify the sharing URL that Google provides and turn it into a download URL. 

Follow the steps below to create a properly formatted URL. We recommend you have a text editor open during this process.

  1. First, upload the image to Google Drive.  
  2. Then right-click on the file that was uploaded, and click Share.
  3. Next to "Anyone..." click the down arrow and select Anyone on the internet can find and view
  4. Then click Copy link.
  5. Paste this link into your text editor for later.

Next, we'll modify the URL you just copied. Here is the an example of the sharing URL you just copied: https://drive.google.com/file/d/IMAGE-ID/view?usp=sharing.

And here is the format for the download URL we will create: https://drive.google.com/uc?export=download&id=IMAGE-ID.

  1. In your text editor, copy and paste the characters from the IMAGE-ID section of your sharing URL.
  2. Copy the following download URL example and paste it into your text editor: https://drive.google.com/uc?export=download&id=.
  3. Then, paste the IMAGE-ID from your original sharing URL onto the end of the download URL. You now have a functioning download URL!
  4. Return to your dashboard and select Add widget.
  5. Search for Image and select it.
  6. Add the newly created URL to the URL field.
  7. Click Save.

Additional resources

Was this article helpful?

Awesome! 👍  Thanks so much for your feedback!