Skip to content

4. Embed an Image Link in a Spreadsheet Cell

Playback Speed:
Transcript

In the last video, you used code to add one embedded image to your area guide.

In this video, you will add code that allows users to see a different image for each place in your area guide when they click on a cell with the link.

First, create a column in your area guide for “Image Links.”

You will paste embedded image links for each location in this column of your spreadsheet.

Later, your users will click on this link, and the image will automatically appear in the sidebar.

Open the script editor if it isn’t open already, or if it closed when you refreshed your area guide.

In the code, find the link for the Google Maps image you pasted in the last video.

Then, cut the link from the code.

Highlight the entire link.

Then, right click or press Control or Command “X” to cut.

Return to your area guide spreadsheet.

Paste the URL into the image link column in the appropriate row.

Return to the script editor.

Delete the single quotation marks that surrounded your link.

Then, in the parentheses, type Spreadsheet App (dot) Get Active Range, and add a set of parentheses.

Type a period after the set of parentheses.

An autocomplete menu appears with more options.

Select “Get Display Value”.

Clicking a cell makes it “active.”

These instructions tell the computer to return to the values contained in the “active range” of cells and display them in the sidebar.

Try it out.

Save your code.

Then, run the “onOpen” function.

You may need to authorize the code again so your program can read information from the spreadsheet.

Return to the area guide sheet.

Click the cell where you pasted the URL for the image.

Then, use the custom menu to run the program again.

The embedded image reloads in the sheet.

Great job!

Next, add another embedded image for a different location in your guide.

Find the location in Google Maps.

Get a streetview image.

Get the embedded URL.

Then, copy the URL to the empty cell in the appropriate row in your area guide.

Click the cell with the new link.

Then, use the custom menu to run the program.

Great!

Now your program works for any embedded link in the spreadsheet.

If your code didn’t work, don’t worry.

Check your punctuation and capitalization carefully.

Make sure you deleted the image link and the single quotation marks from your code.

If you can’t find the problem, ask a neighbor for help.

In the next video, you will add directions for your users, so they will know how to use your area guide.

Now, it’s your turn: Cut the embedded image link from your code, and paste it into a cell in your area guide sheet.

Add code so that the spreadsheet returns the values in the active range of the spreadsheet.

Then, move on to the next video.

Next arrow_forward
Instructions
  1. Cut the embedded image link from the code, and paste it into a cell on your Area Guide sheet.
  2. Change one line of the code to create html output from a new parameter.
  3. Make the parameter the value of a selected cell in the spreadsheet.
  4. Add a second embedded image link to your Area Guide.
Attributions
  • "Happy Alley by Kevin MacLeod" by incompetech.com (http://incompetech.com/music/royalty-free/index.html?isrc=USUAN1100482) -- Licensed under Creative Commons: By Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0/)