freedive tips and tricks

Add images and links

One of the great things about the Google Visualization API is that it allows the use of some HTML inside of tabels. That means you can make your database a bit more informative by adding images and links (shown below). Any web-friendly image file like JPEG, PNG, etc. will work.

Adding images

freedive with images and links

Our example data lists population densities in US states and we want to include photos of state flags. For freeDive to recognize these images we need to write it into the data spreadsheet using HTML.

Notice that we have created a new column for our images. We have chosen column A, but it could be any column. We have named our column header "Flag."

add flag column

Next, we'll need to find the images we want to use. For this exercise, wikimedia commons is a great place to collect images of flags. Your needs may be different, but as long as the images are hosted online (through your own site, wikimedia commons, flickr, ect.) the method is the same. 

search for flag

 

Click on the circled link. This will bring you to a page that only contains the image.

get flag image

 

We have an image file, however, it is far too big to be used in freeDive. Click the link to get a smaller version (200px).

get smaller flag

This is much more manageable, but is still too large for our purposes. Look at the URL in the browser and you can see that the image is 200px. Now if we choose to, we can make the image smaller or larger by just changing this size. Change the  200px in the URL to 50px then refresh the browser. 

find size in URL

Now copy the entire URL and return to your spreadsheet.  Paste the URL in cell A2.

copy paste url

We need to write HTML code so that freeDive recognizes these URLs as images. 
Type the following before the URL <img src='
The type this after the URL. ' />

As a whole it should look this
<img src='http://upload.wikimedia.org/wikipedia/commons/thumb/5/5c/Flag_of_Alabama.svg/50px-Flag_of_Alabama.svg.png' />

html

 

If this were more than a tutorial, we'd continue to add images to the rest of the 50 states. For your purposes, you will need to add the HTML for all of the image URLs, as the red arrows indicate. Here's an example:

more images

 

Adding links

We use a similar process to add links to our table.

Create a column for the links. I selected the column G on the example google spreadsheet. Type "Website" in cell G1 because all of the corresponding links will ultimately take me to the government website of each state.  

As you can see below, I have pasted the Alabama state website's URL into cell G2. Your needs and links will be different, but if possible, try to paste a URL to avoid any errors.

add site url

 

Now add the HTML:

Type the following before the URL <a href=' 

anchor link

 

The type this after the URL.  '>Website</a>

add link text

 

When published in freeDive all you will see is the word Website and it will be a link. However, if you choose to call your links something different, adjust that in the HTML. For example, if I wanted to call this link "site," I would have written the code as <a href=http://www.alabama.gov/' >site</a> 

The example below shows the two links in use.

change link text

 

Once you have finished adding all the necessary html into your spreadsheet, simply put it into freeDive and presto, you'll have images and links in your database.