I'll start this post by stating the obvious, the easiest way to create a drawing with clickable links/tags is to use
Thinglink. This site has been my go-to for any type of image tagging and while I love all their possibilities, including adding custom icons and tagging 360 images, I recently had the issue of wanting to both create the image and the tags at the same time.
A little backstory.
The culmination of my
Interdependence of Organisms unit has my students creating blog posts for different organisms in the Amazonian rainforest where they write about how each organism has a specific role to fulfill in its environment. In class, we then use those posts to create a Google drawing of the food web with links to their work. Everything works great as long as you stay within Google Drawing. It is not until I tried to embed that tagged image the students created anywhere that I realized that those tags the students painstakingly created do not work!
In the past, I've always solved the problem using Thinglink.
But as I mentioned before, this has the "problem" of having to create the image first and then add the tags. In class, this does not always work for a variety of reasons. The most important being that the image is completely static. You cannot change anything on the actual image so the students cannot add any more arrows (or organisms) as they discover other relationships when they discuss their work. Since this is a collaborative end product, the permanence of the image does not work for my purposes.
The workaround
It is a little convoluted, and it requires a little risk-taking simply because of the unfamiliarity you may have with some of the steps, but bear with me. In the end, you will have created the code with working links that can be embedded on any site or platform.
1. Open up a Google drawing. Add your background and items, and tag to your heart's content. In case you do not know how to do this,
Karen Ferguson's video does a great job of explaining this.
2. Once you and your students are "done", or even before if you wish, publish your drawing to the web (File>Publish to the web). It does not matter when you do this since any changes you make after the fact will be updated automatically, which is exactly what my students needed. Do not worry about the size or the code at all. You just need it to be "on the web".
3. Go to Google sites, and create a simple blank site. You can name this whatever you like, and edit the homepage to insert your google drawing.
4. Unclick "include border around Google drawing" and "include title". At this point, you will choose your height and width. I recommend setting both to the size of your actual drawing.
5. Save the Google site. This creates a version of the site, with your Google drawing that includes those pesky clickable links you were aiming for.
6. Once you have saved, right-click anywhere on the image and select inspect
7. For those of us not familiar with working with HTML or the developer tools, this is where it gets scary. But don't fret it is simply a matter of finding the code and copy/pasting it in three quick steps:
- On the tab that appears, select Elements. Find the code where you see <div id="sites-chrome-everything-scrollbar">, and click on it to expand it.
- Scroll down until you find <div class = "sites-embed-border-off sites - embed"... style=width 800 (or other number) px;" and right click on that.
- Select edit as HTML (third option). A box within the space appears, filled with the code you are looking for! Select everything within that box, and copy it.
It should look something like this:
<div class="sites-embed-border-off sites-embed" style="width:600px;"><div class="sites-embed-object-title" style="display:none;">Interdependence Rainforest Blogs</div><div class="sites-embed-content sites-embed-type-sketchy"><iframe src="https://docs.google.com/drawings/d/1ELpo7S7a0htZsqckkHkEtaI3KMXORFPStvVZGnVzt_o/preview?authuser=0&h=400&hl=en&w=600" width="600" height="400" title="Interdependence Rainforest Blogs" frameborder="0" id="811835776" allowfullscreen="true" mozallowfullscreen="true" webkitallowfullscreen="true"></iframe></div><div class="sites-embed-footer"><div class="sites-embed-footer-icon sites-sketchy-icon"> </div><a href="https://docs.google.com/drawings/d/1ELpo7S7a0htZsqckkHkEtaI3KMXORFPStvVZGnVzt_o/edit?authuser=0" target="_blank">Open <i>Interdependence Rainforest Blogs</i></a></div></div>
8. Now you can go ahead and paste that full code anywhere that allows you to edit HTML embeds (Blogger, Wix, Weebly, Wordpress, Emaze to name a few) creating your tagged and clickable Google drawing.
And not only that, any changes you make to the original image immediately populate anywhere you have embedded your image so your students can modify the drawing, adding and deleting elements and tags without any worry about going through the process again!
Additional benefits
Using this method for creating interactive images also has some other "unforeseen" benefits.
- The students can be in total control of the creation process. Any CC0 image is fair game to be used as a background or for tagging purposes. Once you teach your students to crop things in shapes, they can create all sorts of icons without worrying about size limitations.
- Recently my district blocked Thinglink for student use. I can share my tagged images with them, but they cannot create accounts themselves and use it to create their own.
- Thinglink is not set up to be collaborative, so even if my students went outside of our servers and created personal accounts, they cannot work on one image together. This often defeats my purposes for creating interactive images.
- It is totally free. You only need access to the Google tools mentioned. Most districts nowadays have given students access to the Google suite, so anything they create using them will not need any paid upgrade of any kind.
I hope this is useful to you and your students, and please drop me a line in the comments section if you find an easier way to do this.
