All Collections
Dashboard tools
Add images using the image widget
Add images using the image widget

Display an uploaded image, with instructions on how to host images in Dropbox and Google Drive.

Updated over a week ago

To display an image, you need to upload it and copy its URL into the widget configuration. You can use services such as Dropbox and Google Drive to host your image file.

Important considerations:

  • Accepted image formats include: JPG, PNG, SVG and GIF.

  • Images displayed using 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.

Hosting images in Dropbox

  1. In Dropbox, click Share on the image file.

  2. Click Create a link, then Copy link.

  3. Return to your Geckoboard dashboard and add a new Image widget.

  4. Paste the copied URL to the URL field, then 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

Images hosted in Google Drive need their URLs modified to turn them into download URLs, rather than opening a preview. The fastest way is to use a tool to do this automatically.

To do this manually, open a text editor and follow these steps:

  1. Right-click on the uploaded file and click Share.

  2. Next to "Anyone..." click the down arrow and select Anyone on the internet can find and view.

  3. Then click Copy link.

  4. 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 Geckoboard dashboard and add a new Image widget.

  5. Paste the copied URL to the URL field, then click Save.

Did this answer your question?