I use Google Drive to store just about everything. One thing that bothered me was how difficult it is to view or embed images stored in GDrive on other websites.

Getting Started

The first trick is, finding the url template from Google, which allows itself to be loaded from another origin:

https://lh3.googleusercontent.com/d/[gdrive-file-id]=w1000

So, in the case of the image above,

https://lh3.googleusercontent.com/d/1IiW2PcEgFG0-j8aoVBVPFFiGxVWSAlB2=w1000

This can then be used as the src of an img tag:

<img src="https://lh3.googleusercontent.com/d/1IiW2PcEgFG0-j8aoVBVPFFiGxVWSAlB2=w1000"/>

Here you can try it out on CodePen.

Make it easy

In order to use my images, I would like to have a sheet, from which I can copy the correct, embeddable, image link.

For this, I've created a Sheet "image-links", with 2 Worksheets: "links" and "parameters".

Worksheet: Parameters

Worksheet "Parameters" has a list of  Google Drive Folder ID's which are to be processed for content.

Worksheet "Links" will contain the parsed out information which will help us in re-using our content.

Now we have a list of content, which we can filter for drive path, folder name, or file name. In column "F" we have the Drive Url - which, when we hover over with the mouse, will give us a preview of the content.

In Column "G" we have an embedded image, which, when hovering over, allows us to copy its value - the url to the content.

Now we can copy that URL and use it in other sites - like blogs or emails.

How it was done

In order to make this happen, we need to use a little bit of Apps Script.

  1. Create a Sheet
  2. Add a Sheet "links"
  3. Add a Sheet "parameters"
  4. Starting with Column "B2", insert Drive Folder ID's, one per row. For example, in cell "B2" put  "1tyy4z31bInANBubd7IQHJ3Pfap-EmlGs" (this should work for you too)
  5. Click on "Extensions -> Apps Script"
  6. Give the new project a name, eg. "image-links"
  7. Add the following code to the "Code.gs" file:
class Parent {
  constructor(folder, path) {
    this.name = folder.getName();
    this.path = path;
  }
  fullPath() {
    return `${this.path}/${this.name}`;
  }
  data() {
    return [this.path, this.name];
  }
}

class Item {
  constructor(file, parent) {
    this.imageLinkTemplate = "https://lh3.googleusercontent.com/d/[ID]=w1000?authuser=1";
    this.name = file.getName();
    this.id = file.getId();
    this.externalLink = this.imageLinkTemplate.replace("[ID]", file.getId());
    this.gdriveUrl = file.getUrl();
    this.mimeType = file.getMimeType();
    this.parent = parent;
  }
  data() {
    return [this.parent.fullPath(), this.parent.name, this.name, this.id, this.externalLink, this.gdriveUrl, this.mimeType];
  }
  formula(rowIndex) {
    return `=HYPERLINK(E${rowIndex}, IMAGE(E${rowIndex}))`;
  }
}

function process() {
  const folders = contentFolders();
  const items = folders.flatMap(folderId => {
    return listSubfolders(DriveApp.getFolderById(folderId));
  });
  updateContentLinks(items);
}


function contentFolders() {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const parameters = ss.getSheetByName('parameters');
  const folderIds = parameters.getRange("B2:B1000").getValues()
  const folderIdsReduced = folderIds.filter(val => {
    return val[0].length > 0;
  })
    .map(val => val[0]);
  console.log(JSON.stringify(folderIdsReduced));
  return folderIdsReduced;
}
function updateContentLinks(items) {
  const ss = SpreadsheetApp.getActiveSpreadsheet();
  const links = ss.getSheetByName('links');
  const rows = items.map(item => item.data());
  const startRow = 2;
  const range = links.getRange(startRow, 1, rows.length, rows[0].length);
  range.setValues(rows);
  const formulaRange = links.getRange(startRow, rows[0].length, rows.length, 1);
  const formulaColumn = items.map((item, idx) => [item.formula(idx + startRow)]);
  formulaRange.setFormulas(formulaColumn);
}



function listSubfolders(parentFolder, parent) {
  let items = [];
  const path = parent ? parent.fullPath() : "";
  const parentItem = new Parent(parentFolder, path);

  const childFiles = parentFolder.getFiles();
  while (childFiles.hasNext()) {
    const file = childFiles.next();
    const item = new Item(file, parentItem);
    items.push(item);
  }

  const childFolders = parentFolder.getFolders();
  while (childFolders.hasNext()) {
    const subItems = listSubfolders(childFolders.next(), parentItem);
    items = items.concat(subItems);
  }
  return items;
}

8. Save
9. Now run the "process" function:

Now the "links" sheet should contain a list of your contents.

If you'd like to take a closer look, here is the Google Sheet: