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.
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."
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.
Click on the circled link. This will bring you to a page that only contains the 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).
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.
Now copy the entire URL and return to your spreadsheet. Paste the URL in cell A2.
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' />
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:
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.
Now add the HTML:
Type the following before the URL <a href='
The type this after the URL. '>Website</a>
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.
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.