How to update embedded images (like on a website) using a Zap

Hey Zappers!

Have you ever wanted to embed an image somewhere, like on a website or in a blog post and then update it automatically?

Some possible use cases:

• a weekly updated graphic showing progress of some sort
• the most recent member to join your community
• a screenshot of some sort (a tweet, Instagram post, etc)

Using Google Drive to Host the Image

This can likely be done with other services, like Dropbox, but in this example we’ll use Google Drive because I know it has a Replace File action.

Make the Image Embeddable

There are a few steps required:

1. Upload the graphic to Google Drive
2. Share it so that “anyone with the link” can view it
3. Add the ID of the image at the end of this URL: https://drive.google.com/uc?export=view&id=

   

4. Use some basic HTML to embed it:

   

    

Update It with a Zap

Now that we’ve got the image uploaded and embedded, let’s see how to replace the file in-place, so that anywhere you’re displaying it, it will be updated.

Getting the New Image

This part will be different for everyone’s particular use case. As an example, let’s say we don’t want to give someone access to the Google Drive folder where this file is saved. We could use a form (like a Google Form):

In the Zap

Trigger: Google Drive — New File in Folder

In this case, you’ll use the folder that Google Forms is using to store your uploads.

Action: Google Drive — Replace File

Here you use the same ID that you used in the previous step.

Let’s See It in Action

I tested the Zap, updating the image. Let’s see what happens to the embedded image:

There you have it! Now you know how to embed an image somewhere and use a Zap update it in-place :)