How to make your images interactive with audio, video and links

How to
Share on FacebookShare on Google+Tweet about this on TwitterPin on PinterestShare on LinkedInEmail this to someone

Have you ever wanted to embed a link into a specific region of an image? What about several links in one image? What if you could embed additional photos, video and audio in the image to provide extra context? Thinglink is a service that allows you to turn any image into an interactive experience. Thanks to Dan Archer for the tip!

Storybench signed up for a educational account and started building an interactive image. Here’s the finished product:

Start a new project in Thinglink

After signing up for an account (there are free, premium, and educational accounts), we uploaded a base image that we wanted to make interactive.

 

addphoto

Start adding interactive elements

After you upload your image, Thinglink offers an interface to start adding interactive elements. We started by adding a tag to embed a video in the image.

begin

 

After clicking the area on the image where we wanted to add the tag, we provided a link to the Vimeo video and text for the video’s caption. With the educational account you can change the icon color and shape to some preloaded options. The premium account apparently allows the user to customize these labels.

Click Save Tag and your video is embedded.

 

embedamphi

 

Adding a hover-over popup image to your interactive

We wanted to create a feature where one could hover over a label and see a zoomed-in, popup image. To do so, we added a tag and included an image link that we had uploaded through WordPress.

 

uploadtowpthinglink

 

We pasted in our image URL and gave it a caption. Click Save Tag.

 

thinglinkaddimag

 

Adding a standard hyperlink and new title

Thinglink allows you to add a simple hyperlink to a tag, too. Naturally, we linked to Storybench. We also changed the title of our interactive image. We hope you like it.

 

thinglinkjustlink

Adding an audio clip

Thinglink offers a search bar to find content to add to your interactive image. After searching for a Soundcloud link, we added it to one of our tags. If you’ve misplaced your tag on your image, you can drag it around and place it somewhere else.

 

acappella

 

Finishing and embedding your interactive image

Once you’re finished adding tags, click Save Image at the bottom right corner of the screen. You can then share the image with an embed code. We clicked the checkbox for iframe embed because that’s what works best for our WordPress theme. You can also share a link to your image through social channels.

 

thinglinkembedcode

 

Below, our Thinglink of The University of Feenyx virtual campus!

 

 

Storybench’s editor is Aleszu Bajak, a science journalist and former Knight Science Journalism Fellow at MIT. He is an alum of Science Friday, the founder of LatinAmericanScience.org, and is passionate about breaking down the divide between journalists, developers and designers.

Leave a Reply