How To: Add photos to a dashboard

SharpTools.io (web)
1

Have you ever wanted to display a photo of your family or favorite sports team on your dashboard? In this article, we’ll describe how to host your photos online and display them in your dashboards.

In order to display a photo in your dashboard, there are three main steps we need to take:

  1. Host the photo online
  2. Create a Media Item in SharpTools
  3. Add a Media Tile or set your Dashboard Background

photo_in_ipad_pro
photo_in_ipad_pro2973×2288 705 KB

2 Likes
2

Host the photo online

In order to display a photo in your SharpTools dashboard, it will need to be hosted online somewhere. You may already have your photo hosted online if you use a service like Google Photos!

Note: In order to display the photo in SharpTools, it will have to be ‘publicly’ accessible. What you might be surprised to hear is that photos on services like Google Photos already use an unguessable public URL. These URLs are often upwards of 40 characters long meaning there’s billions upon trillions of possible combinations which makes it more secure than your average password.

The Verge has a nice article that goes into more details on Google’s approach and how it’s secure.

Imgur

Imgur is a popular photo sharing site that can be used to share photos online for free. One unique feature of the service is you can choose to mark a post as Hidden and it can’t be searched for, commented on, nor displayed in your Imgur profile.

Note: Imgur URLs are much shorter than Google’s, so even though you can mark a post as Hidden, it’s not as unguessable as the Google Photos approach. Imgur Post Privacy Settings

  1. Open https://imgur.com
  2. Tap the New Post button in the top-left corner
  3. Drag your image onto the drop zone or click the Choose Photo/Video option and select your photo from your computer / device.
  4. After the photo uploads, you’ll be taken to the post
    Note: The post should be set to Hidden by default as indicated in the top-right corner
  5. Right-click or long-press on the image and select Copy Image Address

    Alternatively, you can copy the Share Link and append .jpg to the end of it.

    For example, https://imgur.com/oNiccDx becomes https://i.imgur.com/oNiccDx.jpg

Google Photos

Google Photos is a popular free cross platform photo service that can be used for managing your photos.

:warning: The URL that’s produced requires that you are logged in to your Google Account in whatever browser you view the dashboard on. Otherwise, the image link is only valid for 1 hour.

In our case, we’ll be taking advantage of the URLs that are automatically generated for Google photos.

  1. Sign in to your Google Photos account at https://photos.google.com
  2. (Optional) To upload a new photo, drag a photo from your computer onto the page or tap the Upload link at the top of the page.
    Note: After uploading your photo, you may have to tap on the thumbnail that appears in the bottom-left corner or refresh your page to see it in your list of photos.
  3. Tap on your desired photo to view it full screen
  4. When viewing the large (fullscreen) version of the photo, right click or long-press on the image and choose Copy Image Address

    Important: We need a link directly to the image which is why we must right-click on the image and copy the address. If the native ‘Share’ feature of Google Photos is used, it will link to a webpage which displays the image rather than directly to the image itself.

3

Create a Media Item

Once the file has been hosted online and we have a direct link to the image, we’ll create a media item in SharpTools. You can find the full set of instructions on how to do this in the How do I add video/images to a SharpTools dashboard help article.

  1. From your SharpTools.io user page, tap Manage Resources
  2. Select the Media tab
  3. Tap the Create Media button at the bottom of the list
  4. Enter a name for your Media item and paste in the URL from the previous step

    Note: After pasting in the Media URL, a preview of the image should show up. If the preview doesn’t show up as expected, double check the steps from the Host the Photo Online section, making sure to grab a link directly to the image.

  5. Click Create to finish creating the media item

*In this example, we leave the ‘Enable Autorefresh’ option disabled as we are linking to a static image. If you were linking to an image that was periodically updated, like a weather forecast, you could choose to refresh the image periodically.

https://imgur.com/71N8hZJ

4

Add a Media Tile or set your Dashboard Background

Once you’ve hosted the image online and have created the Media Item, you can proceed to use the Media Item as a tile in your dashboard or as a background for your dashboard.

Add a Media Tile

  1. Navigate to your desired dashboard
  2. Tap ... in the bottom right corner and select Edit
  3. Tap the green + icon in the bottom-right corner of the screen
  4. Expand the Media section and tap your newly added Media Item
  5. Tap Done to close the Add Item screen and press the orange Save icon to save the dashboard

https://imgur.com/tSVoEgD

Set your Dashboard Background

  1. Navigate to your desired dashboard
  2. Tap the ... in the bottom right corner and select :gear: Configuration
  3. Tap the Background Image button next to the Colors section
  4. Select the Media tab and tap your newly added Media Item
  5. Tap Save to close the Dashboard Settings screen and apply your changes

https://imgur.com/qIdxSA3

1 Like
5

A post was split to a new topic: Google Photos Image URL Changes