Microsoft Teams Logo

Publish content to your screens directly from Microsoft Teams

Learn More ScreenCloud Banner Arrow
ScreenCloud Close Icon
Login
Free Trial
EnterprisePricingCustomers
Free TrialSign in

On Screen

What is Screencloud Icon
What is Screencloud
ScreenCloud Content Management Icon
Content Management
ScreenCloud Dashboards Icon
Dashboards
ScreenCloud Integrations Icon
Apps & Integrations

Manage

ScreenCloud OS Icon
ScreenCloud OS
ScreenCloud Hardware Icon
Hardware
ScreenCloud Security Icon
Security
Resources
>

Put Any Photo on Any Screen Without Uploading Files

Want a quick way to put photos and screenshots on your digital signage? Here’s how to send any image to your screens, without even opening an app.

ScreenCloud Post Image

You’ve snapped a shot of today’s special menu item, captured a screenshot of your website traffic, or saved an image your whole team should see. Maybe you have a photo studio, and want clients to see the latest shots. Now you just need to get those pixels on your digital signage.

You could copy the image to a USB flash drive, plug it into your TV’s USB port, and start a slideshow. That’s the cheapest way to turn a TV into digital signage.

But that requires physical access to the TV and interrupts your current programming. It’s enough work that you’re unlikely to do it often.

What if, instead, you could snap a photo, tap Share on your phone, and send it to your signage? Or, if you could right-click on a screenshot and push it to ScreenCloud directly?

Here’s how to send any image to your digital signage in seconds.

An Image to Signage workflow rundown

Right-click menu on Mac to send image to digital signage
Right-click, send image to sign, and your photo’s on ScreenCloud.

You’ve got an image. You want to put it on your screen.

That’s the destination. The journey can take whichever route you want.

ScreenCloud’s Media player is a great way to put images on your signage, but you need another option to push images to your screens without opening ScreenCloud. The easiest option is with online storage. ScreenCloud can watch a Dropbox or OneDrive folder for new images. That’s the simplest way to get images on signage—but also the least configurable, as ScreenCloud will only display your images full-screen.

ScreenCloud’s Playgrounds lets you code a custom dashboard—a great way to make a custom image-powered screen with a caption if you want. You could then upload images and send the link to ScreenCloud—or, you could base64 encode your image and push it directly to ScreenCloud via Webhooks. Or, you could build a custom GraphQL query that uploads an image to your ScreenCloud Media automatically.

Here’s how to set each of those up.

Sync a Dropbox or OneDrive folder with ScreenCloud signage

Already use Dropbox or Microsoft OneDrive to sync and share your team’s files? That’s the quickest way to get images on your digital signage. ScreenCloud can monitor a folder, and then automatically add any images in it to a full-screen slideshow. It can even be a good way to put a PowerPoint presentation on digital signage: Make a deck, export each slide as images, save them to a folder, then let ScreenCloud turn them into a slideshow.

Select OneDrive folder in ScreenCloud digital signage
Select the folder in Dropbox or OneDrive for ScreenCloud to monitor

Start by adding a folder to Dropbox or OneDrive with the images you want to show on your signage—and nothing else. Then in ScreenCloud’s Apps pane, add a new instance of the Dropbox or OneDrive app.

Click the Login button to connect your account to ScreenCloud, then single-click the folder you want ScreenCloud to monitor (note that ScreenCloud will grab images from subfolders as well—so make sure everything in that folder and its subfolders is safe for signage) and click the blue Select Items button.

OneDrive on ScreenCloud digital signage
Customize how your slideshow looks on your signage

All that’s left is to tweak the settings. Choose an animation style, set how long each image should be displayed, and set a background color (the default black is likely best to blend in with your TV’s bezel).

Now add your OneDrive or Dropbox app to a ScreenCloud playlist or channel, and you’re good to go.

Whenever you want to show a new image on your digital signage, add the photo to your Dropbox or OneDrive folder, and the next time that app’s playing on your screen it’ll include your new photo in the slideshow. That works on your phone too. Open the OneDrive or Dropbox app and add a new photo on the go. And if you want to clean up your slideshow, just delete photos from your folder and they’ll disappear from your signage.

A more customizable way to display photos on your ScreenCloud signage is with a custom ScreenCloud Playgrounds screen.

You’ll get a custom screen for your photos that you can design however you want. Add your company branding. Show two photos side-by-side. Add a caption, branded logo, or timestamp. Display metadata, perhaps, for a photography exhibition.

ScreenCloud Playgrounds code
Example Playgrounds code to show an image from a link on your signage

Playgrounds require a bit of coding HTML and CSS, something these days ChatGPT can help simplify if you’re not a developer. Open ScreenCloud Playgrounds, create a new instance, and choose a default template (the Big Number template is easy to customize; the Meme or GIF templates are quicker if you want just a full-screen image).

You can then customize the HTML, CSS, and React JavaScript code to build a simple site for your signage. Dig in as deep here as you want; check out our ScreenCloud Playgrounds guide for more details.

Photo in ScreenCloud digital signage
With a bit of tweaking, you can get a photo-centric layout for your signage

In general, you’re going to want to add a nice background color or gradient, you’ll want to set your image’s max width so it doesn’t overflow the screen, and you might want to add columns for multiple pictures or a text section for a caption.

Then you need the image. You can’t upload images to Playgrounds, but you can display an image from a link. The easiest way is just to add an <img source="https://image.link" /> line to Playgrounds with a link to an image on your company’s site or, perhaps, in Dropbox. Updating it would require opening Playgrounds and tweaking code.

The better option is to use ScreenCloud Playground’s Application Data to store your image link.

To do that, first open the Application Data, and add a JSON entry with your image URL, something like:

{
"image": "https://image.link",
}

Now, in the JavaScript side of ScreenCloud Playgrounds, add your image block with a reference to your image link, like so:

<img src={data.image} />


Preview your sign, and the image should show up in your preview.

All that’s left is sending your new image links to ScreenCloud with Webhooks. Open the Application Data pane and copy the API URL at the bottom. You can then push image links to your ScreenCloud site via Webhooks. That means you could send an image link through Apple Shortcuts or Google Automator—check our guide to Siri for Digital Signage to set that up. Just be sure to send an image URL to your sign instead of a string of text or number as suggested in that tutorial.

Or you could have automation platform Zapier watch Dropbox or any other app for a new image, and then have Zapier send the image URL to ScreenCloud’s webhook. Check our Zapier for Digital Signage guide for step-by-step details there.

Either way, the process is the same. You’ll upload an image somewhere, copy the link to the image, then send the link to ScreenCloud’s webhook endpoint.

And whenever you want to update the image, just send along a new image link and ScreenCloud will display the new image the next time your image Playground dashboard comes up on the playlist.

Base64 encode images then push to ScreenCloud

Now, for the best trick. Want to send the actual image to ScreenCloud, right from your right-click menu or iPhone share sheet?

All you need to do is base64 encode your image and send the resulting text to ScreenCloud Playgrounds’ webhooks URL, and voilà.

Google Analytics in ScreenCloud digital signage
Take a screenshot of Google Analytics, right-click and send to ScreenCloud, and seconds later your latest stats are on your digital signage

Do note first that ScreenCloud’s Webhooks endpoint will only accept around 200kb of data. If you send more than that, ScreenCloud will ignore the request and continue showing any data you’d previously sent to ScreenCloud instead. That means you’ll want to optimize your image before encoding it.

With that in mind, you’ll first want to tweak your Playgrounds dashboard for base64 decoding. In the JavaScript pane of Playgrounds, add code similar to the following to first decode the base64 text and turn it into an image, then display it on your screen along with a caption:

&lt;const render = data &gt; {
    var background = data.background.replace(/(&amp;nbsp;)+/g, '') //de-sanitize the background image
    var bgStyle = {
        background: `url(${background}) no-repeat center center fixed`, //use the background image from the application data in CSS
        height: "100vh"
    }

        // replace the "root" HTML element with the following and style it
    ReactDOM.render(
        &lt;div class="root-image" style={bgStyle}&gt;
        &lt;/div&gt;,
        document.getElementById("root")
    )
}
getData().then(data &gt; render(data)); // call the promise to retrieve application data
Base64 encoded image in ScreenCloud Playgrounds Webhook data
It doesn’t look like much, but that string of characters is an image in base64

In your Application Data, you can now add an image field followed by base64 image code. Try adding an image to an online base64 converter like this one, then add it to Application Data and preview to ensure everything’s working correctly.

With that done, you need a way to encode images quickly and send them to ScreenCloud. On a Mac, iPad, or iPhone, the built-in Shortcuts automation app is your best option.

Apple Shortcuts base64 image converter
Apple Shortcuts can turn your image into base64 code and send it to ScreenCloud

Create a new workflow that can receive images from the share sheet and quick actions. Add a Convert Image action, to convert your image to JPEG format (to optimize the file), and a Resize image action set to a max of 1200 pixels wide (which should keep your file under 200kb). Now, add an Encode action, to convert the image to base64 (set the line breaks to None in the options), and finally add a Get Contents of URL action to send the data to ScreenCloud (use a PUT method, add a Content-Type application/json, and put the details in a data JSON request body. Check the Siri for Signage guide for more details.).

Now, tap the i button for the info pane, and check to show it in your Share Sheet and Services Menu.

To send an image to ScreenCloud, all you need to do is right-click on the photo, select Quick Actions, then choose whatever you named your Shortcuts workflow. Or, on an iPhone or iPad, tap the share button, and tap your Shortcut’s name down the sharing list.

Do that, and a moment later your image will be on your ScreenCloud signage—no extra online storage needed.

You could build a similar workflow on a Windows PC with AutoHotkey, or make a Cron job on a Linux server or a Windows Powershell scheduled script to check for new images, encode them, and push them to ScreenCloud’s Webhooks. Or, you could do the same with Zapier: Have it watch for new images, use a base64 action to encode them, then send them to ScreenCloud’s webhooks as before. But if your images are already in the cloud, it’s just as easy to send their link to ScreenCloud instead.

Upload image via ScreenCloud GraphQL API

There’s one final way to add images to ScreenCloud: With the ScreenCloud GraphQL API.

Here, again, you’d need a link to your image—so you’d need to upload it to your website, an old-school FTP server, or cloud storage like Dropbox with a public link to your file. Then, you’ll run a ScreenCloud createFile GraphQL mutation like the following with your image link (check our Intro to GraphQL guide for more details):

mutation CreateFile {
createFile(input: {source: "https://image.link"}) {
clientMutationId
}
}

Run that query, and ScreenCloud will copy the image file from your URL and save it to your ScreenCloud media (name and folder optional).

Now, this isn’t exactly easier than the other options, but the good thing is that it will store your media files on ScreenCloud directly. It’s also the kind of thing you can automate server-side, if your company already has, say, a CMS where you upload images regularly or a network-connected camera that uploads, say, photos of the weather outside your office every hour.

Time to make your signage shine

Ready to simplify sharing images—and so much more—with your team, but don’t have any digital signage yet? Start a free 14-day ScreenCloud trial with a spare TV or monitor around your office. Add some of the apps your team relies on like Slack and Google Calendar, then set up an image workflow to quickly send anything you want to your signage. And while you’re at it, you can build a comms dashboard to put any number on any screen along with your images.

 SC Gradient

Ready to get your organization connected?

Connect your first screen today with our 14-day free trial

Free TrialBook Demo
articles